lottie-web 完整快速上手3步把 After Effects 动画跑上网页【免费下载链接】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 动画后开发端通常只有两个选择手写关键帧复刻或者收下体积大好几倍、放大就糊的 GIF。lottie-webBodymovin 生态的 Web 端换了一条路——把 AE 导出的 JSON 在浏览器里原生渲染成动画矢量清晰度还带完整的播放控制。本文按装插件 → 导出 JSON → 页面渲染的路线走一遍能操作鼠标的话20 分钟内可以搭好第一条动画。一、先花 30 秒看懂全流程动手之前先理清链路它只有 4 个节点设计在 After Effects 里做好动画在Window Extensions bodymovin面板中选中要导出的合成插件把图层、关键帧、遮罩等数据写成data.json含图片或 AI 图层时旁边还会输出一个images/目录项目里引入 lottie-web 播放器用lottie.loadAnimation()加载这份 JSON播放器用svg/canvas/html三种渲染器之一实时逐帧重绘。理解重点在第 4 步动画不是一段视频而是数据文件 实时计算。这解释了为什么它放大不糊、可以任意控制播放进度也解释了为什么动画复杂度会直接影响帧率——这部分放到第五章展开。JSON 数据结构的完整说明见官方文档docs/json/animation.json。二、AE 插件安装教程4 种方式任选其一插件本体有 4 条安装路线前两种适合绝大多数人后两种留给特殊环境。方式 1推荐商店一键安装在 Aescripts 或 Adobe Exchange 商店Creative Cloud 桌面端内搜索 Bodymovin 下载安装后它会直接出现在 AE 的扩展菜单里。Exchange 商店版本要求 CC 2014 及以上。方式 2Homebrew仅 macOSbrew tap danielbayley/adobe brew cask install lottie方式 3手动 ZXP 安装克隆仓库从/build/extension/里取bodymovin.zxp用 ZXP Installer 安装也可以按 Adobe 官方安装第三方扩展的说明手动完成git clone https://gitcode.com/gh_mirrors/lo/lottie-web方式 4手动拷贝到系统扩展目录适合想完全掌控安装细节的人先关闭 After Effects再把插件目录拷进 CEP 扩展路径——WindowsC:\Program Files (x86)\Common Files\Adobe\CEP\extensionsmacOS/Library/Application Support/Adobe/CEP/extensions/bodymovinmacOS 一条命令即可cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application Support/Adobe/CEP/extensions/bodymovin拷完用ls确认内容完整。如果 AE 还是不认需要开本地调试开关Windows 在注册表HKEY_CURRENT_USER\Software\Adobe\CSXS.6下加字符串键PlayerDebugMode值1macOS 则在~/Library/Preferences/com.adobe.CSXS.6.plist里加同样的键值。装完必做开启脚本权限无论哪种方式这一步都不能省否则插件渲染时写不出文件WindowsEdit Preferences Scripting Expressions勾选Allow Scripts to Write Files and Access NetworkmacOSAfter Effects Preferences Scripting Expressions勾同一项旧版 AE 里这个选项在General常规首选项中三、从 After Effects 导出动画 JSON5 步插件装好后导出流程是固定的打开 AE 项目Window Extensions bodymovin打开面板在面板的Compositions列表里勾选要导出的合成选输出目录注意同位置已存在的images文件夹会被覆盖别放错地方点Render在输出目录拿到data.json和配套的images文件夹。导出前有两点值得注意把图片/AI 图层转成形状图层对图层右键选Create Shapes from Vector Layers插件会以矢量数据导出文件体积和缩放质量都更好这些素材插件不支持图片序列、视频、音频以及图层缩放的负向拉伸负值会直接搞乱数据。遮罩是支持的但开销不小能省则省。四、Web 播放器集成三步跑通第一个动画第 1 步安装播放器npm install lottie-web # 或 bower install bodymovin也可以直接从build/player/目录拿最新构建的lottie.js。第 2 步放一个容器并引入脚本div idanimation-container stylewidth:400px;height:400px;/div script srcjs/lottie.js/script第 3 步调用 loadAnimationlottie.loadAnimation({ container: document.getElementById(animation-container), renderer: svg, loop: true, autoplay: true, path: data.json // 也可以改用 animationData 直接传 JSON 对象 });path与animationData互斥loop可传true / false / 数字循环次数renderer三选一svg最贴近 AE 效果canvas适合大量粒子场景html走纯 CSS transform、能力最弱。跑通后可以照着 demo/adrock/index.html 的方式搭自己的页面。还有一种零 JS的加载方式给容器加classlottie和data-animation-pathanimation/属性然后调用lottie.searchAnimations()自动扫描适合页面上有多个动画位的情况。拿到实例后最常用的操作目的方法播放 / 暂停 / 停止play()/pause()/stop()调速度1 为正常setSpeed(1.5)跳到指定帧并停住goToAndStop(value, true)循环播放某一段playSegments([[12, 30]])销毁实例、清空 DOMdestroy()全局层面操作所有动画、设置渲染质量用lottie.play()、lottie.setQuality(high / medium / low)这类静态方法完整参数见 README.md 的 API 部分。五、性能优化与常见问题5 个坑1. 上线前必压缩data.json和lottie.js都开 gzip文件体积下降很明显官方 README 直接建议这么做。2. AE 工程做减法lottie-web 是实时渲染关键帧节点过多、或者画巨大形状只为了遮一小块区域都会拉低帧率。工程保持够用就好。3. 大动画首帧慢SVG 渲染器可以开惰性加载按需创建 DOM 元素rendererSettings: { progressiveLoad: true }4. Safari 里遮罩丢失页面用了base标签时Safari 可能出现遮罩失效在生成动画前调用lottie.setLocationHref(locationHref)即可。5. 同一份 JSON 反复 loadAnimation 出现抖动动画里带 Repeater 图层时传给animationData的对象要先深度克隆例如lodash.clonedeep否则多个实例之间状态会互相干扰。动画显示不出来时先做一件事把renderer从svg临时切到canvas试一次能快速区分是特性不支持还是数据/路径问题。六、小结记住三件事装完插件别漏脚本权限、导出前把图层转成形状、上线前把 JSON 和播放器都 gzip。下一步建议先在真实页面跑通一个动画再看 docs/json/ 里的 JSON 结构说明最后读播放器入口源码 player/js/main.js——到这一步lottie-web 你已经完全上手了。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/27 1:22:56 · 阅读 1.2k lottie-web 完整快速上手：3步把 After Effects 动画跑上网页
lottie-web 完整快速上手3步把 After Effects 动画跑上网页【免费下载链接】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 动画后开发端通常只有两个选择手写关键帧复刻或者收下体积大好几倍、放大就糊的 GIF。lottie-webBodymovin 生态的 Web 端换了一条路——把 AE 导出的 JSON 在浏览器里原生渲染成动画矢量清晰度还带完整的播放控制。本文按装插件 → 导出 JSON → 页面渲染的路线走一遍能操作鼠标的话20 分钟内可以搭好第一条动画。一、先花 30 秒看懂全流程动手之前先理清链路它只有 4 个节点设计在 After Effects 里做好动画在Window Extensions bodymovin面板中选中要导出的合成插件把图层、关键帧、遮罩等数据写成data.json含图片或 AI 图层时旁边还会输出一个images/目录项目里引入 lottie-web 播放器用lottie.loadAnimation()加载这份 JSON播放器用svg/canvas/html三种渲染器之一实时逐帧重绘。理解重点在第 4 步动画不是一段视频而是数据文件 实时计算。这解释了为什么它放大不糊、可以任意控制播放进度也解释了为什么动画复杂度会直接影响帧率——这部分放到第五章展开。JSON 数据结构的完整说明见官方文档docs/json/animation.json。二、AE 插件安装教程4 种方式任选其一插件本体有 4 条安装路线前两种适合绝大多数人后两种留给特殊环境。方式 1推荐商店一键安装在 Aescripts 或 Adobe Exchange 商店Creative Cloud 桌面端内搜索 Bodymovin 下载安装后它会直接出现在 AE 的扩展菜单里。Exchange 商店版本要求 CC 2014 及以上。方式 2Homebrew仅 macOSbrew tap danielbayley/adobe brew cask install lottie方式 3手动 ZXP 安装克隆仓库从/build/extension/里取bodymovin.zxp用 ZXP Installer 安装也可以按 Adobe 官方安装第三方扩展的说明手动完成git clone https://gitcode.com/gh_mirrors/lo/lottie-web方式 4手动拷贝到系统扩展目录适合想完全掌控安装细节的人先关闭 After Effects再把插件目录拷进 CEP 扩展路径——WindowsC:\Program Files (x86)\Common Files\Adobe\CEP\extensionsmacOS/Library/Application Support/Adobe/CEP/extensions/bodymovinmacOS 一条命令即可cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application Support/Adobe/CEP/extensions/bodymovin拷完用ls确认内容完整。如果 AE 还是不认需要开本地调试开关Windows 在注册表HKEY_CURRENT_USER\Software\Adobe\CSXS.6下加字符串键PlayerDebugMode值1macOS 则在~/Library/Preferences/com.adobe.CSXS.6.plist里加同样的键值。装完必做开启脚本权限无论哪种方式这一步都不能省否则插件渲染时写不出文件WindowsEdit Preferences Scripting Expressions勾选Allow Scripts to Write Files and Access NetworkmacOSAfter Effects Preferences Scripting Expressions勾同一项旧版 AE 里这个选项在General常规首选项中三、从 After Effects 导出动画 JSON5 步插件装好后导出流程是固定的打开 AE 项目Window Extensions bodymovin打开面板在面板的Compositions列表里勾选要导出的合成选输出目录注意同位置已存在的images文件夹会被覆盖别放错地方点Render在输出目录拿到data.json和配套的images文件夹。导出前有两点值得注意把图片/AI 图层转成形状图层对图层右键选Create Shapes from Vector Layers插件会以矢量数据导出文件体积和缩放质量都更好这些素材插件不支持图片序列、视频、音频以及图层缩放的负向拉伸负值会直接搞乱数据。遮罩是支持的但开销不小能省则省。四、Web 播放器集成三步跑通第一个动画第 1 步安装播放器npm install lottie-web # 或 bower install bodymovin也可以直接从build/player/目录拿最新构建的lottie.js。第 2 步放一个容器并引入脚本div idanimation-container stylewidth:400px;height:400px;/div script srcjs/lottie.js/script第 3 步调用 loadAnimationlottie.loadAnimation({ container: document.getElementById(animation-container), renderer: svg, loop: true, autoplay: true, path: data.json // 也可以改用 animationData 直接传 JSON 对象 });path与animationData互斥loop可传true / false / 数字循环次数renderer三选一svg最贴近 AE 效果canvas适合大量粒子场景html走纯 CSS transform、能力最弱。跑通后可以照着 demo/adrock/index.html 的方式搭自己的页面。还有一种零 JS的加载方式给容器加classlottie和data-animation-pathanimation/属性然后调用lottie.searchAnimations()自动扫描适合页面上有多个动画位的情况。拿到实例后最常用的操作目的方法播放 / 暂停 / 停止play()/pause()/stop()调速度1 为正常setSpeed(1.5)跳到指定帧并停住goToAndStop(value, true)循环播放某一段playSegments([[12, 30]])销毁实例、清空 DOMdestroy()全局层面操作所有动画、设置渲染质量用lottie.play()、lottie.setQuality(high / medium / low)这类静态方法完整参数见 README.md 的 API 部分。五、性能优化与常见问题5 个坑1. 上线前必压缩data.json和lottie.js都开 gzip文件体积下降很明显官方 README 直接建议这么做。2. AE 工程做减法lottie-web 是实时渲染关键帧节点过多、或者画巨大形状只为了遮一小块区域都会拉低帧率。工程保持够用就好。3. 大动画首帧慢SVG 渲染器可以开惰性加载按需创建 DOM 元素rendererSettings: { progressiveLoad: true }4. Safari 里遮罩丢失页面用了base标签时Safari 可能出现遮罩失效在生成动画前调用lottie.setLocationHref(locationHref)即可。5. 同一份 JSON 反复 loadAnimation 出现抖动动画里带 Repeater 图层时传给animationData的对象要先深度克隆例如lodash.clonedeep否则多个实例之间状态会互相干扰。动画显示不出来时先做一件事把renderer从svg临时切到canvas试一次能快速区分是特性不支持还是数据/路径问题。六、小结记住三件事装完插件别漏脚本权限、导出前把图层转成形状、上线前把 JSON 和播放器都 gzip。下一步建议先在真实页面跑通一个动画再看 docs/json/ 里的 JSON 结构说明最后读播放器入口源码 player/js/main.js——到这一步lottie-web 你已经完全上手了。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考