上个月做一个产品介绍视频，设计师甩给我一段 AE 动画——一个 Logo 弹一下，三角形旋转成圆环，底部文案"啪"地飞进来。

我盯着 .aep 文件看了半天，After Effects 装都不想装，让设计导个 GIF？GIF 16 色，颜色全糊，让它导 MP4？体积 5MB 起步，发到客户那里还经常卡。

然后同事甩过来一个链接：lottie-web。我导了一下，文件 60KB，浏览器一打开，矢量清晰，放大不糊，关键是——没有 AE 我也能播。

今天就聊聊这个 3 万 Star 的老牌开源项目，以及它和 HyperFrames 怎么配合玩。

一、Lottie-web 是什么

GitHub：airbnb/lottie-web，目前 31,884 Stars / 2,921 Forks / 442 Watchers（2026-06-04 实时），MIT 协议，JavaScript 写的。它解决的核心问题就一句话：

把 After Effects 动画导出成 JSON，让网页（和 iOS、Android、React Native）能直接播放。

设计师在 AE 里做完动效，用 Bodymovin 插件一键导出 JSON，工程师把这个 JSON 喂给 lottie-web 就行，完全不用写 CSS 动画或者 Canvas 代码。

airbnb.io/lottie 是官方文档站，但 6 个月没更新了；社区重心已经迁到 lottiefiles.com。

二、核心架构

整个 Lottie 生态分三块：

设计师（AE 里做完动效）
    ↓ Bodymovin 插件（AE 端）
JSON 文件（几十到几百 KB）
    ↓ lottie-web / lottie-android / lottie-ios
浏览器 / 手机原生渲染

设计只做一次，工程对接零成本——这就是 Lottie 颠覆动画工作流的核心。

Bodymovin 是 AE 端的导出插件，免费就能装，aescripts.com 上有。Lottie-web 是播放引擎，负责把 JSON 解释成 SVG / Canvas / HTML。

三、三种渲染器

lottie.loadAnimation() 调用时要选一个 renderer，三种各有适用场景：

我的经验：默认选 SVG 就对了。Web 端 95% 的场景 SVG 渲染器够用，矢量保真、可缩放、DOM 可读。只有遇到粒子、毛玻璃、复杂遮罩这些 AE 特效时，才上 Canvas。

HTML 渲染器基本可以忽略——Lottie 官方自己也说"不推荐"。

四、安装与基础使用

安装

npm install lottie-web

或者用 CDN（最快的试验方式）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>

最简播放

<div id="anim" style="width:300px;height:300px"></div>
<script>
const anim = lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'  // Bodymovin 导出的 JSON 文件
});
</script>

path 和 animationData 二选一——前者传 URL，后者直接传 JSON 对象（适合把 JSON 内联进代码）。

五、动画控制 API

Lottie 实例有几个核心方法，做"非自动播放"场景必备：

踩坑提示：playSegments 用得很多——一个 5 秒的动效，可能只想要中间 1.5-2.5 秒的"主体呈现"段。

anim.playSegments([45, 75], true);  // 跳到 45 帧开始，75 帧结束

六、和 HyperFrames 结合：让 AE 动画变成"分镜"

这是今天的重点。

HyperFrames 是一个把 HTML/CSS/JS 转成视频的框架（前面几篇介绍过）。它有个原生适配器叫 lottie——意味着你可以把 Lottie 动画作为 HyperFrames 的一个"层"，在 timeline 的某个时间点出现、播完消失。

1. 注册到 window.__hfLottie

HyperFrames 通过这个全局数组找到 Lottie 实例，然后主动 seek 到指定时间。这是核心约定：

<div id="logo-lottie" class="lottie-layer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("logo-lottie"),
    renderer: "svg",
    loop: false,        // 关键：HyperFrames 不会自己 seek 循环
    autoplay: false,    // 关键：HyperFrames 接管播放控制
    path: "assets/logo-reveal.json"
  });

  window.__hfLottie = window.__hfLottie || [];
  window.__hfLottie.push(anim);
</script>

两个关键参数：
- autoplay: false：别自己开跑，HyperFrames 来控制
- loop: false：不要循环，HyperFrames 的 timeline 决定何时显示

2. 在 HyperFrames timeline 里调度

HyperFrames 的 adapter 内部用 goToAndStop(timeMs, false) seek Lottie：

// 概念示意：HyperFrames 内部怎么处理
for (const anim of window.__hfLottie) {
  anim.goToAndStop(currentTimelineMs, false);
}

你在 HyperFrames 那边写个 timeline，让 Lottie 动画在 3.5 秒 - 5.2 秒之间可见——HyperFrames 自动 seek 到对应时间点。这是确定性渲染的关键——同一段代码渲染 10 次，输出像素级一致。

3. 实际可用的三种模式

第一种最稳，因为 Lottie 动画在视频渲染时是否像素一致取决于 lottie-web 的实现。如果设计师对像素级一致性要求严，建议提前把 JSON 烘焙成帧序列。

七、注意事项（踩坑清单）

1. 不要在 render 阶段用远程 URL——path: "https://example.com/anim.json" 在 npx hyperframes render 时会失败。本地项目放 assets/ 下。
2. 先在浏览器里验证 JSON——AE 某些特效（3D 层、表达式）Bodymovin 不支持，导出来是空的。
3. 不要在加载完 Lottie 之后才 push 到 __hfLottie——HyperFrames 在 lint/validate 阶段就扫描这个数组，注册晚了找不到。
4. CDN 版本锁定具体小版本——别用 latest，5.12.2 / 5.13.0 行为稳定，5.x 早期版本有渲染 bug。
5. 容器尺寸固定——HyperFrames 不会 resize，CSS 写死 width: 100%; height: 100%，别用 auto。
6. 多个动画要全部 push——背景动画、图标动画、彩屑动画，每个实例都得 push 到 __hfLottie，HyperFrames 会 seek 所有。

八、dotLottie：.lottie 文件格式

lottiefiles（社区版官方）做了一个 .lottie 格式——把 JSON + 图片 + 字体打包成单个文件，用 dotLottie 播放器播放。

<canvas id="product-lottie" class="lottie-canvas"></canvas>
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
<script>
  const player = new DotLottie({
    canvas: document.getElementById("product-lottie"),
    src: "assets/product-flow.lottie",
    autoplay: false,
    loop: false,
  });
  window.__hfLottie.push(player);
</script>

好处：单个 .lottie 文件包含所有依赖（不像 lottie-web 需要 images/ 文件夹），分发更简单。HyperFrames 同样支持。

九、和 GSAP 动画对比

我之前用 GSAP 写过 Lottie 同等效果的动效。简单对比：

Lottie 的优势是设计交付——设计师做的动效，工程师不用翻译，直接播。GSAP 的优势是交互细节——比如鼠标 hover 时按钮弹性反馈，GSAP 更顺手。

十、什么时候用 Lottie

• Logo 揭示、加载动画、icon 微动效——Lottie 经典场景
• 产品介绍分镜——配合 HyperFrames，做"会动"的产品视频
• 空状态插画——404 页面、加载中的小动画
• 营销 H5——七夕、双 11 各种品牌活动页

什么时候别用 Lottie：
- 动效需要和用户交互强绑定（用 GSAP / Framer Motion）
- 视频级别的粒子效果（直接上视频或者 WebGL）
- 设计师没有 AE 能力（手写 CSS 动画可能更快）

写在最后

Lottie 不是一个"新"东西了——2015 年的项目，10 年沉淀下来，已经成为设计交付的隐性标准之一。它解决的是"设计师做的动效如何无损到工程师手里"这个老问题。

和 HyperFrames 结合后，AE 设计师的动效直接进入视频生产流程——这是最香的地方。前面几篇我写过 HyperFrames 实战踩坑 6 个坑，里面就提到 lottie 作为 timeline 元素是确定性渲染的好搭档。

你用过 Lottie 吗？把它和视频、H5、网页结合做过哪些有意思的东西？评论区聊聊。