Lottie 是什么——Airbnb 开源的矢量动画跨平台解决方案
一个开源库，解决设计与开发之间的鸿沟
Lottie 的核心目标很简单：让设计师在 After Effects 里做的动效，原样出现在每一个平台的用户界面上。在 Lottie 出现之前，这件事的标准流程是：
- 设计师在 After Effects 里完成动效。
- 导出 GIF 或 PNG 序列——体积大、清晰度随屏幕像素密度缩水、不可缩放。
- 或者工程师从头手写动画代码——iOS 用 Core Animation，Android 用 Property Animator，Web 用 CSS/JS，三套逻辑各自维护、表现难以一致。
Lottie 的解法是在中间加一层 JSON 格式作为"动效语言"：
- 设计端：After Effects 通过 Bodymovin 插件导出 JSON（设计师操作，无需写代码）。
- 开发端：各平台的 Lottie SDK 原生解析这份 JSON，实时绘制矢量动画（渲染引擎用平台原生 API，性能好）。
这样一来，设计师产出什么，SDK 就渲染什么——跨平台行为一致、动效文件是矢量所以可以任意缩放、JSON 体积通常比 GIF 小 3~6 倍。
Lottie 与传统方案的根本不同
| 维度 | GIF / PNG 序列 | 手写代码动画 | Lottie |
|---|---|---|---|
| 来源 | 录制/导出像素帧 | 工程师手写 | 设计工具导出矢量数据 |
| 文件大小 | 大（像素级） | 无额外文件 | 小（通常 < 50KB） |
| 可缩放 | 否，会糊 | 是 | 是，矢量渲染 |
| 跨平台一致性 | 天然一致（像素相同） | 各平台代码不同、行为可能有差 | 天然一致（同 JSON 同渲染逻辑） |
| 交互能力 | 无 | 任意 | 通过 API 控制播放/暂停/跳转 |
| 性能 | 差（解码像素） | 好（原生动画引擎） | 好（原生 Canvas/SVG/View 渲染） |
不只一个库：Lottie 是一套生态
Lottie 名字既指那个最初的 Android/iOS 开源库，也指围绕它长出来的整套动效交付体系：
- 开源 SDK：lottie-android、lottie-ios（含 macOS/tvOS/visionOS）、lottie-web、lottie-react-native、lottie-windows。社区还维护了 Flutter、Xamarin、Unity 等跨端封装。
- 设计工具链：Bodymovin（AE 导出插件）、Lottie Creator（浏览器端在线制作）、Lottie Sketch Export、Haiku。
- 云端平台：LottieFiles 提供社区市场、文件托管与 CDN、在线预览与跨平台测试、团队协作工作区。
- 高级格式：dotLottie（.lottie），把多段 JSON + 关联图片 + 状态机 + 主题皮肤打包成一个压缩文件。
使用门槛
Lottie 的使用门槛分两端：
- 设计师端：会 After Effects 就能用 Bodymovin 导出，没有 AE 也可以直接上 Lottie Creator 从零创作。学习成本主要在"哪些 AE 特性 Lottie 支持、哪些不支持"。
- 开发端：引入 SDK → 把 JSON 放到资源目录或 URL → 用一行代码创建 LottieAnimationView / lottie.loadAnimation() 就能播放。进阶玩法包括动态改颜色、绑定数据、状态机交互等。