Lottie 中文文档——矢量动画跨平台解决方案

Lottie：把设计动效直接搬上产品

Lottie 是 Airbnb 开源的矢量动画渲染库。它解决了一个长期痛点：设计师在 After Effects 里精心制作的动效，工程师需要一行一行手写代码才能在 App 和网页里复刻出来——不仅耗时，而且跨平台表现很难一致。Lottie 的方案很直接：After Effects 用 Bodymovin 插件导出 JSON，各平台 SDK 原生解析并渲染，设计师产出什么，用户就看到什么。

但 Lottie 不只是那 5 个开源 SDK。经过多年演进，围绕它形成了一整套动效工作流生态：

• 设计端：Bodymovin 插件让 After Effects 可以一键导出兼容的 JSON；Lottie Creator 让不会 After Effects 的设计师也能在浏览器里从零创作。
• 云端：LottieFiles 提供动效市场、托管 CDN、在线预览编辑、团队协作，甚至定价方案。
• 格式：dotLottie 把多段动画、关联资源、主题皮肤、交互状态机打包成一个 .lottie 文件，比原始 JSON 小约 80%。
• 平台：Android、iOS、Web、React Native、Windows，各端有对应的原生渲染引擎。

产品档案

结构导览

本文站按「工作流」组织内容，从设计制作到多端集成一路排开，你可以按需跳转：

• Lottie 定位与生态全景 —— Lottie 是什么、解决什么问题、和 GIF/SVG/AVD 的区别、哪些知名产品在用。
• AE + Bodymovin 动效制作管线 —— 设计师从 After Effects 到导出 JSON 的完整管线，包含表达式烘焙、图层兼容等常见坑。
• Lottie Creator 浏览器端制作 —— 不想装 AE？Lottie Creator 让你在浏览器里用关键帧、AI Copilot、状态机制作可交互动效。
• LottieFiles 云端平台 —— 动效市场、托管 CDN、在线预览、团队协作，LottieFiles 把 Lottie 从工具变成了平台。
• Web 端 SDK 与嵌入 —— lottie-web 安装、HTML 嵌入、React 集成、播放控制。
• Android 原生集成 —— Gradle 引入、LottieAnimationView、Jetpack Compose、动态属性、性能调优。
• iOS 与跨端方案 —— Swift Package Manager / CocoaPods 安装、React Native 跨端、Windows 支持。
• dotLottie 打包格式 —— 为什么要 dotLottie、文件结构、状态机和 Motion Tokens。
• 故障排查 —— AE 导出失败、渲染异常、性能卡顿、跨平台表现不一致。

典型场景

Lottie 最常见的几个使用场景：

1. 引导页 / Loading 动画 —— 纯矢量、文件小、可循环，比 GIF 清晰且体积可控。
2. 空状态 / 成功提示 —— 一段精心设计的动效比一张插图更有情绪感染力。
3. 可交互组件 —— 按钮点击、下拉刷新、支付成功等状态切换，dotLottie 状态机可以直接在设计端完成，开发端零代码接入。
4. 产品演示 —— 跨平台一致的品牌动效，一次设计到处复用。