Lottie 是目前最稳妥的 AE 动画 Web 落地方案，但直接导出播放失败率很高——问题几乎全出在 AE 工程设置、插件版本和 JSON 加载方式上。
AE 里怎么导出能被 Lottie 正确识别的 JSON
关键不是“导出”，而是“用 Bodymovin 插件渲染”。Lottie 不读 AE 源文件，只认 Bodymovin 导出的 JSON，且对图层类型、表达式、效果器有严格限制：
- 禁用任何 3D 图层（哪怕只是开了 3D 开关）、摄像机、灯光；
- 避免使用
Trim Paths以外的路径动画，Repeater可用但嵌套层级别超过 2 层； - 文字图层必须转为形状（右键 →
Create Shapes from Text），否则导出后空白； - 确保安装的是最新版
Bodymovin（v5.12+），旧版不支持 AE 2024+ 的某些新属性； - 导出前在 Bodymovin 面板勾选
Include in HTML并点击Render，别用“Export”菜单里的“Adobe Media Encoder”路径。
网页中用 lottie-web 播放 JSON 的最小可行代码
不用框架、不配构建工具，纯 HTML + CDN 就能跑起来。最容易错的是容器尺寸和加载时机：
- 播放容器（比如
）必须设明确宽高，width: 100%; height: 200px;这类 CSS 是必须的； - 不要等
window.onload再初始化，改用document.addEventListener('DOMContentLoaded', ...)； - 用
lottie.loadAnimation()时，container必须是 DOM 元素，不是字符串 ID； - 示例代码片段：
const anim = lottie.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: './animation.json'
});
注意：renderer 推荐用 'svg'（兼容性好、缩放清晰），'canvas' 在 iOS Safari 上偶发闪烁。
立即学习“前端免费学习笔记（深入）”；
常见报错和对应修复点
报错信息看着吓人，其实集中在几个固定位置：
-
Cannot read property 'length' of undefined：JSON 文件本身损坏或为空，重新导出并检查文件开头是否是{； -
Failed to load resource: net::ERR_FILE_NOT_FOUND：路径写错，确认path值是相对当前 HTML 的路径，不是 AE 工程路径； - 动画播一半卡住/跳帧：AE 中用了
Hold Keyframes或非线性缓动（如Easy Ease In Out），改用线性关键帧或导出时在 Bodymovin 设置里勾选Preserve Aspect Ratio； - 颜色不对或渐变消失：AE 里用了“渐变叠加”图层样式（Layer Style），Lottie 不支持，必须用形状图层 +
Gradient Fill替代。
移动端适配和性能注意项
动画在手机上卡顿，往往不是 JSON 太大，而是渲染策略没调对：
- 导出前在 AE 把合成分辨率设为实际需要的最大尺寸（比如 375×667），别留 1920×1080 合成再靠 CSS 缩放；
- 用
anim.setSpeed(0.8)降低帧率比硬压 JSON 更有效； - iOS Safari 对
will-change: transform敏感，给容器加transform: translateZ(0)可触发硬件加速； - 超过 2 秒的长动画，建议拆成多个 JSON 分段加载，用
anim.goToAndPlay(frame, true)衔接，避免首屏阻塞。
真正麻烦的从来不是“怎么播”，而是 AE 里哪些操作会让 Bodymovin 默默丢掉图层或崩掉时间轴——多导出几次，用 lottie-api 的 anim.getDuration() 和 anim.totalFrames 核对帧数是否一致，比肉眼盯预览靠谱得多。
