跨平台表现不一致——同一 JSON 在 iOS/Android/Web 上看起来不同

为什么会有差异

Lottie 的设计初衷就是"一份 JSON、到处渲染"——但各平台的渲染引擎是不同团队独立实现的：

• lottie-android：Airbnb 团队维护，基于 Android Canvas。
• lottie-ios：Airbnb 团队维护，基于 Core Animation。
• lottie-web：Airbnb 团队维护，基于 SVG / Canvas。

三个引擎的目标一致，但实现细节不同（路径解析、颜色空间、插值算法等）——这是差异的根本原因。

常见差异类型

颜色值 / 渐变不同

原因：

1. AE 用 Display P3 或其他广色域颜色空间导出，转换为 sRGB 后值有微小偏差。
2. 不同平台的色彩管理（Color Management）配置不同。
3. 某些颜色在低色域设备（比如旧 Android 设备）上被系统映射。

解决：

• AE 工作空间统一设置为 sRGB IEC61966-2.1。
• 渐变保持简单（线性渐变、最多 3 个颜色点），复杂径向渐变跨平台差异大。
• 在目标设备上实测颜色——不要靠模拟器/预览器判断。

缓动曲线不同

AE 里你调的 Graph Editor 贝塞尔曲线，三个引擎解析和执行方式不完全一致：

• iOS Core Animation 的 timing function 模型和 AE 最接近。
• Android 的动画插值器和 AE 有细微差别。
• Web SVG 的 timing function 由浏览器实现。

解决：

• 尽量用标准的 ease-in / ease-out / ease-in-out，不要用自定义的复杂贝塞尔曲线。
• 如果必须用自定义曲线，选一个平台（通常是 iOS）作为基准，其他平台做微调。
• 关键帧位置放整点帧（比如第 10、20、30 帧），不要放中间帧（第 12.7 帧）——中间帧会被不同引擎按不同方式取整。

图层叠放顺序异常

原因：通常发生在 Alpha Matte / Trim Paths / Merge Paths 组合使用时。

解决：

• 避免位图 + Alpha Matte 组合 → 用形状图层 + 修剪路径代替。
• Merge Paths 在 Android 和 Web 上支持不如 iOS 稳定 → 尽量不用。
• Precompose（预合成）把复杂图层组合合并 → 减少渲染层级。

修剪路径（Trim Paths）时序不一致

Trim Paths 是跨平台差异最大的特性之一：

• 各引擎对开始/结束点、偏移量的单位和计算方式不同。
• 某些引擎把百分比转绝对长度时精度有损失。

解决：

• 把 Trim Paths 的 Start/End/Offset 值设为整点数值（比如 25、50、75），不要用小数（25.3）。
• 避开 Offset 属性的动画——Start + End 动画在各平台上一致性更好。
• 如果 Trim Paths 在某个平台上表现就是不对，换思路：不用路径修剪，直接做图层的淡入动画。

文字渲染完全不同

文字图层跨平台差异最大，建议直接Convert to Outlines（转轮廓）：

• 转轮廓后，文字变成了普通形状图层，矢量路径在所有平台上一致渲染。
• 代价是文件体积略微增加（字体字形被烘焙进 JSON）。
• 好处是 100% 跨平台一致，且不需要目标设备上安装该字体。

差异定位工具

LottieFiles 预览器 是排查跨平台差异的最佳工具：

1. 拖入你的 JSON 文件。
2. 切换右侧的 Web (SVG) / Web (Canvas) / iOS / Android 四种渲染模式。
3. 对比同一段动画在四种模式下的表现。
4. 如果预览器里就有差异 → 回到 AE 调整动画。
5. 如果预览器里一致但实际设备有差异 → 检查各平台的 SDK 版本是否是最新。

终极建议

设计阶段就有跨平台意识：

• 尽量用简单特性：形状图层、标准关键帧、标准缓动、矢量为主。
• 避开已知坑：位图 + Mask、3D 图层、表达式、复杂 Merge Paths、保留文字模式。
• 用 dotLottie 代替原始 JSON：dotLottie 规范里定义了更精确的渲染规则，三个引擎的实现一致性更好。