Flutter Web使用HTML渲染器时能否使用Lottie动画JSON文件？

核心结论 #

Flutter Web使用HTML渲染器时可以正常加载Lottie动画的JSON文件，你遇到的无法运行问题不是加载链路故障，是HTML渲染器和Lottie包的渲染逻辑存在兼容缺口。

常见故障原因与对应解决方案 #

• 基础资源路径错误
  先打开浏览器开发者工具的「网络」面板，检查对应Lottie JSON文件的请求状态：如果状态码为404，说明是资源路径配置错误，核对pubspec.yaml中的资源声明、代码中传入的资源路径是否匹配，注意Web端部署时的相对路径规则。
• 动画包含HTML渲染器不支持的特性
  HTML渲染器阉割了部分Skia渲染能力，以下Lottie特效在HTML模式下无法正常渲染，会导致动画空白、错位甚至完全不显示：
  • Alpha蒙版、复杂合并路径
  • Lottie JS表达式逻辑
  • 嵌入自定义字体、外置位图的图层
  • 3D变换图层
    可以先用仅包含基础形状补间、纯色位移的极简Lottie文件测试，如果极简动画能正常播放，就说明是原动画文件带了不兼容特性，可以让设计师导出Lottie时移除上述不支持的特效。
• 渲染配置不匹配
  初始化Lottie组件时调整配置，绕开不兼容的渲染路径：

  Lottie.asset(
    'assets/your_animation.json',
    delegates: LottieDelegates(
      enableTextLayer: false,
      enableMergePaths: false,
    ),
    renderCache: RenderCache.raster,
  )
  

  如果业务侧必须保留完整Lottie特效，直接切换Web渲染器为Canvaskit即可实现全特性兼容，编译时添加对应参数：

  flutter build web --web-renderer canvaskit
  

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