無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
高品质动态设计已成为现代网页和移动应用程序的必要元素，但从设计工具实现动画传统上需要手动工程努力。设计师在 After Effects 中创建精美的动画，而开发人员需要花费数天时间用代码重现它们。Lottie 完全消除了这个差距，通过 JSON 导出原生呈现 After Effects 动画。
最初由 Airbnb 创建，后来由社区通过 LottieFiles 维护，Lottie 已成为跨平台动画传递的行业标准。网页版本 Lottie-web 将动画渲染为 SVG、Canvas 或 HTML 元素，产生清晰、可缩放的结果，完全符合设计师的意图。
工作流程非常简单：设计师在 After Effects 中创建动画，使用免费的 Bodymovin 插件将其导出为 JSON 文件，开发人员只需几行代码即可将该 JSON 加载到 Lottie 中。动画与分辨率无关，可通过编程控制，文件大小通常以 KB 为单位，而非 GIF 或视频的 MB。
Lottie 与其他动画格式相比如何？
在 Lottie 之前，网页动画格式各有重大的取舍。Lottie 结合了其前身的最佳特性，同时避免了它们的限制。
| 格式 | 文件大小 | 品质 | 可缩放性 | 交互性 | 浏览器支持 |
|---|---|---|---|---|---|
| Lottie（JSON） | 小（5-50 KB） | 完美矢量 | 是（SVG） | 完全控制 | 所有现代浏览器 |
| GIF | 大（500 KB - 5 MB） | 像素化 | 否 | 无 | 通用 |
| CSS 动画 | 小 | 良好 | 是 | 有限 | 现代浏览器 |
| 视频（MP4） | 中等 | 光栅 | 否 | 无 | 通用 |
| 精灵图 | 大 | 光栅 | 否 | 基本 | 通用 |
Lottie 结合小文件大小、矢量品质、编程控制和跨平台支持，使其成为 UI 动画、加载指示器、引导流程和交互式插图的首选格式。
graph LR
A[After Effects] -->|Bodymovin 插件| B[Lottie JSON]
B --> C[Lottie-web]
B --> D[Lottie-iOS]
B --> E[Lottie-Android]
B --> F[Lottie-React-Native]
C --> G[SVG / Canvas / HTML]
D --> H[Core Animation]
E --> I[Canvas API]
F --> J[原生桥接]
Lottie-web 的主要方法和事件有哪些？
该库提供了全面的 API，用于控制动画播放和响应动画事件。
| 方法 | 说明 | 示例 |
|---|---|---|
lottie.loadAnimation() | 加载并初始化动画 | loadAnimation({path: 'data.json', renderer: 'svg'}) |
animation.play() | 开始或继续播放 | animation.play() |
animation.pause() | 暂停在当前帧 | animation.pause() |
animation.stop() | 停止并重置到帧 0 | animation.stop() |
animation.goToAndStop() | 跳转到特定帧/时间 | animation.goToAndStop(30, true) |
animation.setSpeed() | 设置播放速度倍数 | animation.setSpeed(2) |
animation.setDirection() | 正向或反向 | animation.setDirection(-1) |
animation.destroy() | 清理资源 | animation.destroy() |
| 事件 | 触发时机 | 使用案例 |
|---|---|---|
complete | 动画完成 | 触发后续操作 |
loopComplete | 每次循环结束 | 更新计数器或状态 |
enterFrame | 每帧 | 与其他动画同步 |
segmentStart | 新片段开始 | 基于章节的动画 |
DOMLoaded | 元素渲染完成 | 启动交互处理器 |
Bodymovin 支持哪些 After Effects 功能？
Bodymovin 插件导出了 After Effects 功能的全面子集，但某些高级能力有限制。
| 功能类别 | 完全支持 | 部分 / 有限 |
|---|---|---|
| 形状图层 | 路径、填充、描边、渐变 | 复杂布尔运算 |
| 变换 | 位置、缩放、旋转、不透明度 | 3D 图层变换 |
| 蒙版 | 路径蒙版、Alpha 遮罩 | 带复杂形状的轨道遮罩 |
| 文本 | 基本文本、字体、字距 | 逐字符 3D 动画 |
| 效果 | 投影（有限） | 大多数原生 After Effects 效果 |
| 表达式 | 基本 JavaScript 表达式 | 复杂脚本 |
常见问题
什么是 Lottie？ Lottie 是 Airbnb 开发的开源动画库，能在网页、Android、iOS 和 React Native 平台上原生呈现 Adobe After Effects 动画。
Lottie-web 支持哪些渲染器？ Lottie-web 支持三种渲染器类型：‘svg’（默认）、‘canvas’和 ‘html’。
如何安装 Lottie-web？
可通过 npm 安装：npm install lottie-web，或直接从 CDN 加载。没有外部依赖。
Lottie 的主要方法有哪些？
包括 lottie.loadAnimation()、animation.play()、animation.stop()、animation.goToAndStop()、animation.setSpeed() 和 animation.destroy()。
什么是 Bodymovin？ 一个免费的 Adobe After Effects 扩展，将动画导出为与 Lottie 兼容的优化 JSON 文件。
延伸阅读
- Lottie-web GitHub 仓库 – 源代码、文档和示例
- LottieFiles 文档 – Lottie 动画和工具的社区平台
- Bodymovin After Effects 插件 – After Effects 导出扩展
- Lottie for Android – Android 渲染库
- Lottie for iOS – iOS 渲染库（Swift 和 Objective-C）
