Flutter中Lottie动画显示异常问题求助

我有一个Adobe After Effects制作的动画（原效果）：

但在Flutter中使用Lottie组件显示的效果却和原动画不一致：

我的Flutter实现代码如下：

Expanded(
  child: Center(
    child: Padding(
      padding: const EdgeInsets.only(left: 15.0, right: 15.0),
      child: Lottie.asset(
        'lib/assets/data.json',
        repeat: false,
        reverse: false,
        animate: false,
        controller: _controller,
        onLoaded: (composition) {
          _controller
            ..duration = composition.duration
            ..reset();
        },
      ),
    ),
  ),
),

• 检查Lottie导出配置：确保用AE官方Bodymovin插件导出时，勾选了「Merge Shapes」「Trim Paths」等必要选项，避免复杂图层属性或效果被丢失。导出前可以清理AE工程里的冗余图层、未使用的效果。
• 添加适配参数修正变形：给Lottie组件加上fit属性控制缩放逻辑，比如设置fit: BoxFit.contain来保持原动画比例，避免拉伸错位：

  Lottie.asset(
    'lib/assets/data.json',
    repeat: false,
    reverse: false,
    animate: false,
    controller: _controller,
    fit: BoxFit.contain, // 添加适配参数
    onLoaded: (composition) {
      _controller
        ..duration = composition.duration
        ..reset();
    },
  ),
  

• 调整控制器播放逻辑：当前代码设置animate: false且调用reset()，会让动画停在初始帧。如果需要正常播放动画，可在onLoaded中调用forward()，或者移除animate: false：

  onLoaded: (composition) {
    _controller
      ..duration = composition.duration
      ..forward(); // 启动动画播放
  },
  

• 更新Lottie依赖：旧版lottie包可能存在兼容性问题，在pubspec.yaml中升级到最新版本：

  dependencies:
    lottie: ^latest_version
  

• 校验AE图层锚点：AE中图层锚点位置异常可能导致Lottie解析错位，导出前重置所有图层的变换属性（锚点、位置、缩放）到合理状态。

内容的提问来源于stack exchange，提问作者Alexandr