如何从 After Effects 正确导出 Lottie 动画？

做 Lottie 最容易踩的坑，不在导出按钮，而在 AE 项目一开始就没按 Lottie 的边界来做。Lottie 本质是把 After Effects 动画转成 JSON，再由 Web、iOS 或 Android 的运行时解释播放；它擅长矢量形状、基础变换、遮罩和简单透明度，不擅长大量 AE 特效、复杂表达式、3D 摄像机和高分辨率位图。所以正确流程不是“动画做完再试着导出”，而是从建合成、画图层、加关键帧开始就把兼容性和性能算进去。

从项目设置开始控制边界

新建合成时先确认目标端：移动端图标动效通常用 300 到 600px 的正方形合成，落地页首屏动画可以按实际容器比例做，但不要直接套 1920×1080。帧率建议 30fps，只有对运动细节特别敏感的品牌动画才考虑 60fps；帧率越高，JSON 里的关键帧越密，低端机解析压力越明显。时长也要克制，加载动效 1 到 3 秒，说明性动画 5 到 8 秒通常够用。

安装 Bodymovin 后，在 AE 的 Window > Extensions 打开面板。导出前先把素材整理干净：图层命名不要用奇怪符号，预合成层级不要套太深，没用的隐藏层、参考层、测试图层都删掉。位图能不用就不用，必须用图片时压缩到实际显示尺寸，并确认导出包会包含 images 文件夹，否则前端只拿到 JSON 会丢图。

动画制作时优先用 Lottie 友好的属性

最稳的是形状图层加基础属性：Position、Scale、Rotation、Opacity、Path、Trim Paths、Fill、Stroke。这些属性在 lottie-web 和移动端运行时里支持更成熟，跨端表现也更一致。文本图层要谨慎，如果目标端没有对应字体，最终会出现换行、字重或位置偏移；需要完全一致时，可以把文字转成形状，但代价是文件变大、后续改文案不方便。

常见做法是先把 AI 或 Figma 里的矢量拆成清晰分组，再在 AE 里转成 Shape Layer。不要把一个复杂 SVG 全部塞进单个图层，后期调动画会很痛苦；也不要拆成几十上百层同时动，浏览器渲染会卡。比较稳的取舍是：需要独立运动的元素单独成层，只作为静态装饰的元素合并成组。

js
// 导出前可按这个方向检查，不是 AE 脚本
const lottieChecklist = {
  fps: 30,
  duration: '<= 8s',
  preferred: ['shape', 'position', 'scale', 'rotation', 'opacity', 'trim paths'],
  avoid: ['3d layer', 'camera', 'heavy effects', 'unsupported expressions'],
  image: 'use only when vector is too expensive'
}

用 Bodymovin 导出并验证

在 Bodymovin 面板里刷新合成，选择要导出的 Composition，设置输出路径后点击 Render。一般建议关闭 Demo HTML、开启压缩，先不要勾太多实验选项；如果动画依赖图片，确认 Assets 路径正确。导出后不要直接交付，先把 JSON 上传到 LottieFiles Preview 或本地 lottie-web 页面里看一遍，重点检查图层缺失、遮罩方向、透明度、缓动节奏和文件体积。

如果预览和 AE 不一致，先回 AE 查 unsupported features，而不是让前端硬调。Lottie 的问题往往不是“代码没写对”，而是 JSON 里根本没有 AE 某个效果的等价表达。最终交付时最好同时给出 JSON、图片资源、建议尺寸、是否循环、背景是否透明、期望播放触发时机，这些信息能减少很多联调误会。

追问

为什么 AE 里正常，导出成 Lottie 后效果丢了？

因为 Bodymovin 不是录屏工具，它只会把支持的图层和属性翻译成 JSON。模糊、粒子、部分混合模式、复杂表达式、3D 摄像机这类效果经常无法完整转换。取舍上，如果必须百分百还原复杂视觉，视频或 APNG 可能更稳；如果要小体积、可交互、可换色，才更适合 Lottie。踩坑点是设计师最后一天才导出测试，发现核心效果不支持时已经没有重做时间。

文字要保留为文本图层，还是转成形状？

保留文本的好处是 JSON 较小，也方便以后换文案，但它依赖运行环境字体，跨端一致性差。转成形状后视觉更稳定，缺点是路径数量增加，文件会变大，动态改字也基本不可行。边界是品牌 Logo、固定标题可以转形状，运营文案、国际化内容不建议这么做。常见坑是中文字体在 Web 上没有加载成功，AE 里一行字到浏览器里变成两行。

什么时候该用图片，不该强行全矢量？

简单图标、线条、几何图形优先矢量，缩放清晰，也容易改颜色。复杂插画如果路径点特别多，矢量 JSON 反而会比压缩图片更重，播放时还更吃 CPU。取舍标准可以看实际包体和帧率：同样视觉下，哪个更小、更稳就用哪个。踩坑是为了“保持矢量”把几千个路径点塞进 Lottie，结果首屏动画比一张 WebP 还卡。

导出文件多大算合理？

没有绝对数字，但用于按钮、空状态、加载反馈的 Lottie，通常应控制在几十 KB 到两三百 KB。首屏大动画可以更大，但要配合懒加载、缓存和降级图。边界在于 Lottie 是运行时解析 JSON，不是浏览器原生视频解码，文件越复杂越容易把主线程拖慢。不要只看 JSON 体积，还要在目标设备上看掉帧、发热和首次播放延迟。