You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

Flutter Lottie动画颜色渲染异常问题

我在Flutter项目中使用pub.dev的lottie包实现动画,代码如下:

Lottie.asset(
      'assets/animations/testcomp.json',
      frameRate: FrameRate.max,
      repeat: true,
);

实际渲染出现颜色混合错误:
颜色混合错误
预期应为正常的色彩渲染效果(对应LottieFiles上的testcomp动画)。我查阅了LottieFiles的支持特性列表,未找到相关解决办法。

可能的解决方法:

  • 检查并替换动画的混合模式:部分复杂混合模式(如Color Dodge、Color Burn)在Flutter的lottie包中支持不完善,用LottieFiles编辑器打开动画,将混合模式改为Normal后重新导出JSON测试。
  • 升级lottie包版本:旧版本可能存在渲染bug,在pubspec.yaml中更新至最新版,执行flutter pub upgrade lottie后重启项目。
  • 验证动画兼容性:用LottieFiles的“Validate Animation”工具检查动画文件是否存在Flutter端不支持的特性,修复后再导入。
  • 明确指定渲染尺寸:给Lottie.asset添加width和height参数,避免自适应渲染异常:
Lottie.asset(
      'assets/animations/testcomp.json',
      frameRate: FrameRate.max,
      repeat: true,
      width: 200,
      height: 200,
);

内容的提问来源于stack exchange,提问作者Sebb

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 05:32:12