Lottie 渲染异常——错位、变形、颜色不对、图层错乱

跨平台共通的渲染问题

位置 / 大小不一致

原因：合成的像素比（Pixel Aspect Ratio）不是 1:1。AE 里很多预设合成（比如 PAL、NTSC）用非方形像素。

解决：在 AE 里 合成设置 → 像素长宽比 → 选"方形像素"。Lottie 只支持方形像素合成。

图层叠放顺序不对

原因：AE 里图层顺序从上到下渲染，但某些位图图层用了 Alpha Matte 后会影响层级。

解决：避免位图 + Mask / Alpha Matte 组合，用形状图层 + 修剪路径代替。

Web 端渲染异常

SVG vs Canvas 渲染器差异

lottie-web 支持三种渲染器：svg、canvas、html。不同渲染器对某些 Lottie 特性支持不同：

• svg（推荐）：最稳定，矢量精确，DOM 可访问。
• canvas：性能好但某些路径渲染不如 SVG 精确。
• html：基本废弃，不要用。

如果 SVG 渲染正常但 Canvas 渲染有错位，说明你的动画用了 Canvas 渲染器不支持的特性——换回 SVG。

浏览器差异

• Safari：SVG 过滤器支持有限，某些渐变可能丢失。
• 老版 IE / Edge（非 Chromium）：根本不支持 SVG 动画或 Canvas。lottie-web 在 IE 11 上支持有限。
• Chrome / Firefox：表现最稳定。

Android 端渲染异常

Lottie vs AVD 表现不同

Lottie 支持的特性比 Android Vector Drawable 多，但在某些场景下 Lottie 表现不如 AVD——比如合并路径（Merge Paths）在 Android 上需要创建离屏渲染缓冲，可能导致锯齿。

解决：在 AE 里尽量避免使用合并路径；或者改用 AVD（如果你的动画不需要跨平台）。

颜色显示不对

常见原因：

1. 颜色空间：AE 工作在 sRGB，但某些设置可能用了 Display P3——导出的颜色值在 Android 上看起来会有差异。
2. 运行时 ValueCallback 改了颜色但没清理——检查代码里有没有没移除的 ValueCallback。
3. 夜间模式：某些 Android 系统的夜间模式滤镜可能让颜色看起来不对。

文字图层渲染错乱

文字图层是渲染异常高发区：

• 转轮廓（Convert to Outlines）模式：推荐！100% 支持，没有字体依赖。
• 保留文字 + 导出字体：Lottie 在 Android 上需要渲染指定字体，但 Android 的字体渲染和 iOS、Web 差异大。遇到文字渲染问题，直接改回 Convert to Outlines。

iOS 端渲染异常

Core Animation 渲染差异

lottie-ios 底层用 Core Animation 渲染——某些 Lottie 特性和 Core Animation 的模型不完全对应。

最常见的两个问题：

1. 修剪路径（Trim Paths）：iOS 上某些复杂的 Trim Paths 时序可能和 Android / Web 有偏差。
2. 时间插值曲线：AE 里的缓动曲线在 iOS 上和 Android 上表现略有不同。

解决：用更简单的缓动曲线（标准 ease-in-out），并在 iOS 设备上实测。

排查流程

遇到渲染问题时按这个顺序排查：

1. 在 LottieFiles 在线预览器里看 SVG、iOS、Android 三种模拟渲染效果。
2. 确认是导出问题还是平台渲染问题。
3. 如果预览器里正常但实际设备有问题 → 检查 SDK 版本是否匹配、代码实现是否正确。
4. 如果预览器里就有问题 → 回到 AE 对照 图层兼容性 清单修改合成。