After Effects 导出 Lottie JSON 的完整流程

导出前置：合成设置

在打开 Bodymovin 面板之前，先确认你的 AE 合成满足这些条件：

• 帧率：Lottie 建议 30 或 60 FPS，和目标平台的屏幕刷新率匹配。
• 像素比：合成的像素比（Pixel Aspect Ratio）必须是 1:1。如果是方形像素合成，直接导出不会有拉伸问题。
• 持续时间：动效通常 1~5 秒。Lottie 支持任意长度，但太长的动效体积会变大。
• 图层结构：尽量保持图层简单、命名清晰。Bodymovin 会把图层名和属性名直接写进 JSON，清晰的命名方便后续调试。

五步导出

第一步：打开 Bodymovin 面板

窗口 → 扩展 → Bodymovin

第二步：选择合成

Bodymovin 面板的 Compositions 标签页会列出当前项目里所有合成。找到你要导出的那个，点左边的圆形选择按钮。

第三步：设置导出参数

点击面板右侧的三个点选择导出目录。文件名建议和动效用途挂钩，比如 loading-spinner.json，不建议用默认的 1.json。

常用的导出选项：

第四步：点 Render（绿色大按钮）

Bodymovin 开始解析合成并生成 JSON。复杂合成可能需要几秒钟。完成后状态条会显示导出的文件路径。

第五步：检查输出

导出目录里会出现：

• <文件名>.json —— 这就是 Lottie 渲染引擎要加载的主文件。
• images/ 文件夹（如果合成里用了位图图层）—— Bodymovin 会把所有位图导出到这个子目录。部署时记得让 JSON 和 images/ 保持相对位置。
• fonts/ 文件夹（如果有文字图层）—— 自动导出用到的字体字形。

导出后立即做的事

把 JSON 文件直接拖到 LottieFiles 的在线预览器（lottiefiles.com/preview）里，一秒就能看到渲染效果。这是最常用的快速验错方式——如果在预览器里就有问题，到各平台 SDK 上也肯定有问题。