Flutter集成Lottie动画帧率低、多动画并行卡顿如何优化？

问题1：单Lottie动画帧率仅30帧的优化 #

你已经完成了组件抽离避免父组件重绘影响，还可以通过以下方式优化：

• 优先精简Lottie源文件：导出动画时删除无用图层、蒙版、冗余关键帧，不要嵌入体积过大的位图资源，也可以用Lottie官方的精简工具处理源文件，去掉多余配置项，从源头降低渲染消耗。如果动画复杂度较高，也可以换成Rive格式实现同等效果，渲染性能比Lottie高30%以上。
• 开启Lottie栅格缓存：初始化Lottie组件时配置renderCache: RenderCache.raster参数，将动画帧预渲染为栅格纹理缓存，避免每一帧都重新解析矢量路径、计算绘制属性，实测这个配置在中低端设备上可以把帧率提升到55帧以上。
• 固定动画依赖的配置项：把Lottie使用的AnimationController用late final声明在State中，不要在build方法里每次重新创建，组件的静态配置参数（比如宽高、重复模式）用const修饰，避免不必要的组件重建触发动画重绘。
• 限制动画刷新率：如果业务场景不需要动画满60帧运行，可以显式设置frameRate: FrameRate(30)固定帧率，避免无效的渲染资源消耗。

问题2：弹窗和下层页面多动画并行导致大量重绘的优化 #

Flutter内核不会自动停止下层页面的动画运行：弹窗本质是路由栈上新压入的Route，下层页面依然处于可见状态，只要动画的Controller处于运行状态，就会持续触发帧绘制，需要手动做优化：

• 用RouteObserver监听路由生命周期：给下层页面绑定路由监听器，当页面被新的Route（弹窗、新页面）覆盖时，主动调用页面内所有Lottie动画、GIF、自定义动画的pause()方法暂停运行，当路由弹出回到当前页面时再调用resume()恢复。
• 增加路由可见性判断：在动画的构建逻辑中加入ModalRoute.of(context)?.isCurrent == true的判断，只有当前页面处于路由栈最上层时才播放动画，否则只渲染动画的第一帧或者静态占位图。
• 高负载场景降级动画实现：如果业务需要同时运行多个动画，可以把优先级较低的动画换成WEBP序列帧或者MP4视频实现，矢量动画并行计算的CPU占用远高于光栅化的视频/序列帧，降级后可以大幅降低渲染负载。

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