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 把动画导出成一个 JSONlottie-web 播放器在浏览器原生渲染。跟着步骤走10 分钟让第一个动画在你的页面上跑起来。快速认清项目定位它把 Adobe After Effects 动画经 Bodymovin 插件导出为 JSON再由播放器在浏览器原生解析渲染不再依赖 GIF 或视频。面向前端与动效开发配套 Android、iOS、React Native、Windows 端实现一套 JSON 多端通用。内置 svg / canvas / html 三种渲染器构建配置rollup.config.js一次产出 13 个构建产物覆盖全量版、轻量版和单渲染器版。当前版本 5.12.2MIT 协议npm 包名lottie-web。相比手动画动画或切图它直接复用 AE 工程设计改稿后重新导出即可不需要二次还原。 环境自检开始前的 3 件事检查项要求在哪确认浏览器端依赖已装 npm或 bower从源码构建另需 Node.jsnpm -vAfter EffectsAdobe Creative Cloud 2014 及以上版本AE 关于面板AE 脚本权限「允许脚本写入文件和访问网络」已勾选编辑 首选项 脚本与表达式权限没开后面导出会静默失败务必先勾上。旧版 AE 该项在「常规」首选项里。最快安装装播放器与 AE 插件装 Web 播放器。在目标前端项目根目录执行npm install lottie-web装完node_modules/lottie-web出现即成功习惯 bower 的话一行bower install bodymovin也可。装 Bodymovin 插件。去 Aescripts 商店下载最新 zxp用 ZXP Installer 安装。装完打开 AE「窗口 扩展」里能看到 bodymovin。备选Creative Cloud 商店搜 Bodymovin 一键装要求 CC 2014 及以上。开脚本权限。Windows编辑 首选项 脚本与表达式勾选「允许脚本写入文件和访问网络」macOSAfter Effects 首选项 脚本与表达式勾同一项。勾选后导出 JSON 才允许写盘。导出第一个动画。AE 里打开「窗口 扩展 bodymovin」在 Compositions 标签选中要导出的合成指定 Destination Folder点 Render。完成后目标目录出现data.json动画里用了图片或 AI 图层时会多一个images文件夹。注意别用同名目录覆盖已有导出。导出第一个动画并在浏览器跑起来新建一个 HTML引入播放器、放一个容器、调用loadAnimation这就是最小可运行示例div idbox stylewidth:400px;height:400px;/div script srclottie.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 加classbodymovin和data-bm-pathdata.json也行仓库里的 示例页 就是这么写的。⚡ 避坑清单3 个高频报错AE 里看不到 bodymovin 菜单检查项zxp 是否落到了 CEP 扩展目录WindowsC:\Program Files (x86)\Common Files\Adobe\CEP\extensionsmacOS/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 个动作让动画更轻上 gzipREADME 明确建议对动画 JSON 和播放器都开 gzip生产环境体积能明显下降。降曲线精度lottie.setQuality(medium)把贝塞尔曲线段数从默认 200 段降到 50 段low为 10 段也可传大于 1 的自定义数字部分动画低到 2 都看不出差别。按需加载 DOMsvg 渲染器可传rendererSettings: { progressiveLoad: true }元素多时初始化更快。素材转形状AE 里对 AI/PSD 图层右键「Create shapes from Vector Layers」导出为矢量避免拖出一堆images文件。探索生态与资源官方站点与文档airbnb.io/lottieFAQ、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 项目引用参数不飘红。导出跑不通的动画可邮件作者反馈hernantorrisigmail.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考