编辑文档 - Lottie 让 AE 动画直接搬上网页：3 万 Star 的开源宝藏怎么用

标题

工具栏

点击或拖拽上传图片

支持 PNG, JPG, GIF, WebP 格式

内容 (Markdown 格式)

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

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

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

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

---

## 一、Lottie-web 是什么

GitHub：[airbnb/lottie-web](https://github.com/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 代码**。

| 时间线 | 里程碑 |
|--------|--------|
| 2015-02 | Airbnb 第一次提交代码 |
| 2017 | 跨平台爆火，Airbnb 把它作为设计交付标准 |
| 2024 | v5.13.0 发布，目前 master 分支最新 |
| 2025-09 | 最后一次主分支提交，仓库活跃度在下降（848 个 open issues）|

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。

| 工具 | 角色 | 谁用 |
|------|------|------|
| Bodymovin | AE 端导出 | 设计师 |
| lottie-web | Web 端播放 | 工程师 |
| lottie-ios / android | 移动端 | App 工程师 |

## 三、三种渲染器

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

| 渲染器 | 性能 | 矢量保真 | 适合场景 |
|--------|------|----------|----------|
| **SVG** | 中等 | 完整矢量 | 通用网页、动效、Logo |
| **Canvas** | 最快 | 栅格化 | 复杂动画、粒子、滤镜 |
| **HTML** | 最慢 | DOM 节点 | 需要 CSS 操作的特殊场景 |

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

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

## 四、安装与基础使用

### 安装

```bash
npm install lottie-web
```

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

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

### 最简播放

```html
<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 实例有几个核心方法，做"非自动播放"场景必备：

| 方法 | 作用 |
|------|------|
| `play()` / `pause()` / `stop()` | 播放控制 |
| `setSpeed(n)` | 调整速度，1 是正常 |
| `goToAndStop(value, isFrame)` | 跳到指定时间/帧停下 |
| `goToAndPlay(value, isFrame)` | 跳到指定时间/帧继续 |
| `setDirection(1 / -1)` | 正反方向 |
| `playSegments(segments, forceFlag)` | 播片段（比如动画只播 1-2 秒那段）|
| `destroy()` | 销毁实例，释放内存 |

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

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

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

这是今天的重点。

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

### 1. 注册到 `window.__hfLottie`

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

```html
<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：

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

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

### 3. 实际可用的三种模式

| 模式 | 适用场景 | 实现方式 |
|------|----------|----------|
| **Lottie 动画作为静态帧** | Logo 揭示、动态图标 | 把 JSON 转成 24 帧静态截图，HyperFrames 调帧 |
| **Lottie 动画作为 timeline 元素** | 完整动效作为分镜一 | `window.__hfLottie` 注册，timeline 控制 |
| **Lottie + HyperFrames 元素叠加** | 复杂分镜：背景 Lottie + 前景文字/图片 | 多个 layer 组合，HyperFrames 做合成 |

第一种最稳，**因为 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 播放器播放。

```html
<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 |
|------|--------|------|
| 设计交付 | AE 一键导出 | 工程师手写 |
| 文件体积 | 几十 KB | 看代码量 |
| 复杂动效 | AE 能做就能播 | 工程师能写就能播 |
| 可控性 | 受限于 Bodymovin 支持范围 | 完全自由 |
| 适合人群 | 设计主导 | 工程师主导 |

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、网页结合做过哪些有意思的东西？评论区聊聊。

摘要

标签多个标签用逗号分隔

分类