lottie-web：让 After Effects 动画在 Web 端原生渲染，10 分钟上手

lottie-web：让 After Effects 动画在 Web 端原生渲染，10 分钟上手

【免费下载链接】lottie-webRender After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/项目地址: https://gitcode.com/gh_mirrors/lo/lottie-web

设计师做完 AE 动画，工程师还要逐帧重画？lottie-web 终结这种交接：Bodymovin 把动画导出成一个 JSON，lottie-web 播放器在浏览器原生渲染。跟着步骤走，10 分钟让第一个动画在你的页面上跑起来。

快速认清项目定位

• 它把 Adobe After Effects 动画经 Bodymovin 插件导出为 JSON，再由播放器在浏览器原生解析渲染，不再依赖 GIF 或视频。
• 面向前端与动效开发，配套 Android、iOS、React Native、Windows 端实现，一套 JSON 多端通用。
• 内置 svg / canvas / html 三种渲染器，构建配置（rollup.config.js）一次产出 13 个构建产物，覆盖全量版、轻量版和单渲染器版。
• 当前版本 5.12.2，MIT 协议，npm 包名lottie-web。
• 相比手动画动画或切图，它直接复用 AE 工程，设计改稿后重新导出即可，不需要二次还原。

📦 环境自检：开始前的 3 件事

权限没开，后面导出会静默失败，务必先勾上。旧版 AE 该项在「常规」首选项里。

最快安装：装播放器与 AE 插件

1. 装 Web 播放器。在目标前端项目根目录执行：

npm install lottie-web

装完node_modules/lottie-web出现即成功；习惯 bower 的话一行bower install bodymovin也可。

2. 装 Bodymovin 插件。去 Aescripts 商店下载最新 zxp，用 ZXP Installer 安装。装完打开 AE，「窗口 > 扩展」里能看到 bodymovin。备选：Creative Cloud 商店搜 Bodymovin 一键装，要求 CC 2014 及以上。

3. 开脚本权限。Windows：编辑 > 首选项 > 脚本与表达式，勾选「允许脚本写入文件和访问网络」；macOS：After Effects > 首选项 > 脚本与表达式，勾同一项。勾选后导出 JSON 才允许写盘。

4. 导出第一个动画。AE 里打开「窗口 > 扩展 > bodymovin」，在 Compositions 标签选中要导出的合成，指定 Destination Folder，点 Render。完成后目标目录出现data.json；动画里用了图片或 AI 图层时，会多一个images文件夹。注意别用同名目录覆盖已有导出。

导出第一个动画并在浏览器跑起来

新建一个 HTML，引入播放器、放一个容器、调用loadAnimation，这就是最小可运行示例：

<div id="box" style="width:400px;height:400px;"></div> <script src="lottie.js"></script> <script> lottie.loadAnimation({ container: document.getElementById('box'), renderer: 'svg', loop: true, autoplay: true, path: 'data.json' // 上一步导出的 JSON }); </script>

浏览器打开页面，容器里出现循环播放的 AE 动画即成功。返回的动画实例可直接控制：play()、pause()、setSpeed(1)、goToAndStop(value, isFrame)、playSegments(segments)。不想写 JS 的话，给 div 加class="bodymovin"和data-bm-path="data.json"也行，仓库里的 示例页 就是这么写的。

⚡ 避坑清单：3 个高频报错

AE 里看不到 bodymovin 菜单？

检查项：zxp 是否落到了 CEP 扩展目录（Windows：C:\Program Files (x86)\Common Files\Adobe\CEP\extensions；macOS：/Library/Application Support/Adobe/CEP/extensions/bodymovin）。

处理动作：补上调试项后重启 AE——

Windows 注册表 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 加字符串 PlayerDebugMode = 1 macOS 打开 ~/Library/Preferences/com.adobe.CSXS.6.plist，加同样的键值

页面加载了但动画不显示？

检查项：path与animationData互斥，不能同时传；data.json相对路径是否指向真实文件；renderer值（svg/canvas/html）是否与你引入的构建产物匹配，比如lottie_svg.js里用renderer: 'canvas'必然失败。

处理动作：核对路径指向导出目录，删掉多余参数，或改用全量构建lottie.js排除渲染器问题。

Safari 里遮罩（mask）丢失？

检查项：页面 HTML 里是否用了<base>标签，导致 svg 内部 id 引用路径错乱。

处理动作：在动画生成前调用lottie.setLocationHref(locationHref)修正相对位置。另外先确认特性在支持列表内：预合成、形状、纯色、图片、空对象、文本、遮罩（含反相）、时间重映射、表达式均支持；图片序列、视频、音频、负向图层拉伸不支持，这些换思路处理。

进阶优化：4 个动作让动画更轻

• 上 gzip：README 明确建议对动画 JSON 和播放器都开 gzip，生产环境体积能明显下降。
• 降曲线精度：lottie.setQuality('medium')把贝塞尔曲线段数从默认 200 段降到 50 段（low为 10 段，也可传大于 1 的自定义数字），部分动画低到 2 都看不出差别。
• 按需加载 DOM：svg 渲染器可传rendererSettings: { progressiveLoad: true }，元素多时初始化更快。
• 素材转形状：AE 里对 AI/PSD 图层右键「Create shapes from Vector Layers」，导出为矢量，避免拖出一堆images文件。

探索生态与资源

• 官方站点与文档：airbnb.io/lottie（FAQ、Composition Settings、表达式说明都在这里）。
• 兄弟实现：lottie-android、lottie-ios、lottie-react-native、Windows 版 Lottie，同一个 JSON 多端复用。
• 仓库内 JSON 结构文档：layers、shapes、effects、properties 各字段拆解，调试导出问题必查。
• 播放器核心入口：loadAnimation、setQuality等全局方法的源码位置。
• 测试动画 JSON 集：adrock、bacon、banner 等现成素材，没有 AE 也能直接练手。
• TypeScript 类型定义：TS 项目引用参数不飘红。
• 导出跑不通的动画可邮件作者反馈：hernantorrisi@gmail.com。

你现在已经能独立完成「AE 导出 JSON → 页面原生播放 → 出错自查 → 体积优化」的完整链路。下一步：挑一个你项目里的真实动效位，把第一个data.json塞进去上线。

【免费下载链接】lottie-webRender After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/项目地址: https://gitcode.com/gh_mirrors/lo/lottie-web