lottie-web 快速上手：四步把 AE 动画跑上网页-创锋一号

lottie-web 快速上手：四步把 AE 动画跑上网页

【免费下载链接】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

做前端时你多半遇到过这种局面：设计师交来一段很灵的动效，工程师用 CSS 或 canvas 手搓，好几天下来还原度还是差一截。lottie-web 就是干这件事的：它把 After Effects 插件导出的 lottie 动画 json 解析出来，在网页里用 svg、canvas 或 html 原生渲染。读完这篇文章，你能装好导出插件、完成必做配置，并用十几行代码把第一个动画跑起来，卡住了也知道去哪查。

它解决什么问题

传统做法里，动效要么压成视频，要么切图做成 GIF，要么工程师逐帧重写。Lottie 把动画变成一份数据文件，播放器按数据实时画出来，带来三个直接好处：

体积小：一段常见动效的 json 通常只有几十到几百 KB，远小于同内容视频的数 MB；生产环境再开 gzip，一般还能再砍掉 70% 左右。
无损缩放：矢量渲染意味着任意分辨率、任意容器尺寸都清晰，手机、桌面一套素材通吃，不用按屏幕切多份资源。
设计即交付：设计师在 AE 里做完动画，工程师只负责嵌入和触发，中间不需要"还原"这个环节。

仓库自带的社区示例能直观感受效果：

装起来

下面这条推荐路径覆盖了两端：AE 侧装导出插件，前端侧装播放库。

获取源码：git clone https://gitcode.com/gh_mirrors/lo/lottie-web
安装 AE 插件：从插件市场安装 Bodymovin，或把 zxp 包用 ZXP 安装工具装进 AE
重启 AE，在「窗口 > 扩展」菜单里确认 Bodymovin 面板已出现
在你的前端项目里装播放库：npm install lottie-web

备选方式，按你的习惯挑一个就行：

Adobe 商店：Creative Cloud 里搜 Bodymovin 一键安装，适合完全不想碰命令行的场景。
Homebrew（macOS）：brew tap danielbayley/adobe && brew cask install lottie，两行命令搞定，适合本来就重度用 brew 的 Mac 用户。
Bower：老项目还在用 Bower 管理依赖的话，执行bower install bodymovin。

第一次运行前先做的配置

插件装完不能直接出活，有一项权限必须手动打开，否则导出时写不了 json 文件。

Windows

打开「编辑 > 首选项 > 脚本与表达式」，勾选「允许脚本写入文件和访问网络」。老版本 AE 没有这个分类，请到「常规」首选项里找同名选项。

macOS

打开「After Effects > 首选项 > 脚本与表达式」，勾选与上面相同的选项；旧版本同样在「常规」里找。

改完不用做什么验证，直接在插件面板里点一次 Render，能正常落出 json 文件就说明配置生效了。

最小可用示例

最短的跑通路径：npm install lottie-web之后，把一个播放库文件和一份动画 json 放进项目，再写下面这段代码。仓库的 demo/ 目录本身就是一组跑好的页面，demo/bodymovin/index.html 可以直接打开对照，动画数据可以拿 demo/adrock/data.json 当data.json用。

<div id="animation-container" style="width:400px;height:400px"></div> <script src="js/lottie.js"></script> <script> lottie.loadAnimation({ container: document.getElementById('animation-container'), renderer: 'svg', loop: true, autoplay: true, path: 'data.json' }); </script>

打开页面后，容器里应该有一段矢量动画在无限循环播放，缩小放大窗口它都保持清晰；把鼠标悬停、暂停、改速这类操作，调的是loadAnimation返回的那个动画实例，比如anim.play()、anim.setSpeed(2)。

遇到问题？常见问题速查

AE 里找不到插件菜单→ 先确认 zxp 是否真正装进去：macOS 可以执行ls /Library/Application\ Support/Adobe/CEP/extensions看有没有 bodymovin 目录，Windows 检查C:\Program Files (x86)\Common Files\Adobe\CEP\extensions。目录缺失就用 ZXP 安装工具重装一遍，或把插件手动解压到上面的 CEP 目录后重启 AE。

页面空白，控制台报 data.json 404→ 检查path是不是相对 HTML 文件的相对路径，以及导出目录里的images/文件夹有没有跟着一起拷走。json 和它配套的素材必须同目录，把整个导出文件夹一起放进去即可。

Safari 里遮罩丢失或整块发白→ 多半是页面用了<base>标签，导致 SVG 内部 id 引用路径错了。在loadAnimation之前加一行lottie.setLocationHref(location.href)即可。

同一份动画数据挂两个实例，含重复器的动画第二个出错→animationData对象会被播放器就地修改，复用前记得深拷贝一份再传入。

让体验更好的几个设置

lottie.setQuality('medium')（或'low'、大于 1 的数字）：降低贝塞尔曲线细分段数，默认'high'最精细，同屏动画多的低端页面调到'medium'往往看不出差别但帧率明显更稳。
rendererSettings: { progressiveLoad: true }：svg 渲染按需创建 DOM，图层多的大动画初始化更快。
生产环境给 json 和播放库都开 gzip，这是压缩体积最划算的一步。
AE 里把图片、Illustrator 图层转成形状图层（右键 > 从矢量图层创建形状），导出就是矢量数据，文件更小、缩放更稳。
项目保持精简：这是实时渲染，AE 工程里塞大量无用节点、用超大形状遮一小块区域，都会直接吃掉帧率。

企业官网建设流程全解析