如何解决移动设备上的 Lottie 性能问题和电池消耗问题？

Lottie 性能问题通常来自文件，而不是播放器。 After Effects 可以轻松添加在手机上逐帧渲染成本高昂的功能。

从文件开始。遮罩和轨道遮罩通常是最大的成本；尽可能用更简单的形状替换它们。删除玩家不需要的效果和模糊。合并形状、减少层数并仔细预合成。大型嵌入图像会增加内存和解码成本，因此请优化它们或用矢量替换它们。 Lottie 检查器（例如我们的免费 Lottie JSON 查看器）可帮助您查看文件内的内容。

然后检查应用程序如何播放它。在屏幕外、关闭的选项卡内或滚动离开的列表单元格内持续循环的动画仍然会消耗 CPU 和电池。当它们不可见时暂停它们并停止不需要的循环。避免同时播放数十个动画。

为您的平台选择正确的选项。在网络上，SVG 和画布渲染器的性能因动画而异，因此请对两者进行测试。压缩的 .lottie (dotLottie) 格式可减少下载大小。在 Android 上，在您的播放器支持的情况下使用硬件加速进行测试。

最后，在低端设备上进行测量。如果动画仍然太重，那么它可能不是适合这项工作的工具：简单的 CSS 或本机动画可以取代装饰循环，并且交互式组件可能更好地构建在基于状态的工具中，例如我们制作的 Rive 或 ExodeUI。