企业官网建设流程全解析

lottie-web 快速指南：1 个 JSON 文件，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

设计师交给你一段 After Effects 动画，你不必逐帧截图、也不必让前端手写关键帧。lottie-web 把 Bodymovin 插件导出的 JSON 文件直接在浏览器里渲染成 SVG、Canvas 或 HTML 元素，不转码、不丢帧，任意缩放都不失真。

设计师交付的动画为什么不用重做

逐帧、视频、GIF 三条老路的代价

传统做法要么让设计逐帧输出 PNG，要么导出 GIF 和视频。帧序列总体积大、丢掉了运动曲线；GIF 有色彩断层，动画稍长体积就失控；视频无法矢量缩放，播放中也难以跟用户交互。动画越复杂，开发重制的成本越高。

lottie-web 的位置

lottie-web 是 Airbnb 开源的动画渲染库：设计师在 AE 里调好关键帧后导出 JSON，浏览器读取这份数据把同样的运动原样重放。最终产物是一个几 KB 到几百 KB 的文本文件，运行时生成的是 DOM 绘制指令，没有一张位图资产。

动画 JSON 里到底装了什么

顶层字段与 AE 时间轴一一对应

动画文件的结构由 docs/json/animation.json 这份 schema 描述：fr是帧率，ip/op是以帧为单位的入点出点，w/h是合成宽高，layers是图层列表，assets存放图片与预合成资源，markers是时间轴标记。拿到一个陌生动画文件，看这几个字段就能判断它多长、多大、有哪些素材。

关键帧数据长什么样

图层里的形状属性统一用{a, k}结构存放：a为 1 表示带关键帧，k是关键帧数组，每项包含时间点t与数值s，配合i/o里的贝塞尔缓动控制加减速。位置、缩放、不透明度、路径控制点都按这套规则记录，渲染时只在相邻关键帧之间做插值。形状层完整结构见 docs/json/layers/shape.json。

从 JSON 到 SVG 的三步运行逻辑

先搭好 SVG 骨架

初始化时渲染器创建根svg元素，用合成的w/h设置viewBox，再按preserveAspectRatio决定缩放对齐方式，对应实现在 player/js/renderers/ 的 SVGRendererBase.js。之后每个图层映射为<g>分组与<path>、<image>等元素，渐变和滤镜放进<defs>供多处复用。

requestAnimationFrame 逐帧驱动

lottie-web 运行时不写 SMIL<animate>声明，而是每帧采样关键帧后直接更新 transform、路径d与填充色。好处是播放、暂停、变速、跳转到任意帧都只是修改"当前时间"这一个变量，交互控制比声明式动画灵活得多。帧调度在 player/js/animation/AnimationManager.js 里。

大动画怎么减少首帧压力

renderConfig.progressiveLoad让预合成分批构建，先画出主画面再补齐细节；hideOnTransparent会把完全不透明的图层直接隐藏，少做一次绘制。元素构建逻辑集中在 player/js/elements/。

3 步把动画跑起来

第 1 步：在 After Effects 里导出 JSON

安装 Bodymovin 插件，在扩展面板选中合成并点击 Render，得到 data.json；若动画含图片图层，会同时导出 images 文件夹。

第 2 步：引入库并创建容器

npm install lottie-web

第 3 步：一行 loadAnimation 起播

lottie.loadAnimation({ container: element, renderer: 'svg', loop: true, autoplay: true, path: 'data.json' });

返回的实例支持play、pause、setSpeed、goToAndStop等方法，做"点击播放到某帧停止"这类状态动画只需几行代码。完整可运行示例见 player/index.html。

落地效果与几条提醒

让动画更省内存的技巧

• 纯矢量动画优先用renderer: 'svg'；粒子多、路径上千的动画改用'canvas'，减少 DOM 节点数
• 需要展示首帧的长动画打开progressiveLoad，不需要的场景保持默认即可
• 页面切换前调用实例的destroy()，同页多实例时要逐个释放，避免泄漏

renderer 怎么选

'svg'适合绝大多数矢量场景，'html'仅支持 transform 与 opacity 但开销最低，'canvas'适合高复杂度的密集绘制。选型不确定时先用 svg 跑一遍，观察 DOM 规模和帧率再决定。JSON 动画加载完成后，把交互事件绑定到DOMLoaded回调上，可以避免动画还没就绪就被控制。

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