Lottie：轻松实现复杂动画效果
Category（分类）: Visualization Status: 已读
原文：Lottie - 轻松实现复杂的动画效果。 原文重点介绍 Android 端 API，本文保留其跨平台原理、资源格式和播放控制思路；具体依赖坐标与 API 版本较旧，请以 Lottie 官方仓库 文档为准。
一、Lottie 解决的问题
复杂动画过去常以 GIF、视频或开发手写 CSS/Canvas 的方式交付：前两者不易精细控制，后者让设计与开发反复沟通。Lottie 的工作流是：
After Effects 设计动画
→ Bodymovin 导出 JSON（及可选图片资源）
→ 各平台 Lottie 渲染器解析
→ Web / iOS / Android / React Native 等端播放
也就是说，设计师交付可描述动画层级与关键帧的 JSON，客户端按时间轴实时渲染，而不是播放一段不可交互的视频。
二、动画 JSON 的关键结构
Lottie JSON 可大致理解为四层信息：
| 层级 | 内容 |
|---|---|
| 结构信息 | 画布宽高、帧率、时长、起止帧、背景色等 |
| assets | 图片等外部资源的描述 |
| layers | 图层集合及每层的起止帧、变换关系 |
| shapes | 每个图层内的图形元素和动画属性 |
原文以 Android 的实现说明渲染链路：LottieComposition 负责解析 JSON 成动画数据对象，LottieDrawable 再将其绘制到 View。Web、iOS 等端的类名不同，但核心思路相同：解析组合（composition）→ 按帧更新图层 → 绘制。
三、动画资源可从哪里加载
Lottie 的使用方通常需要支持几种资源来源：
- 构建产物内的 JSON；
- 包内的图片/JSON/zip 资源；
- CDN 或业务接口返回的 JSON / zip；
- 已预加载或缓存的动画数据。
网络加载 JSON 时要特别注意：它本质上是一次 HTTP 请求，部署到 Vue/React 工程后必须确认最终静态资源路径、CDN CORS 策略与缓存策略。大动画不应无差别内联进主 bundle，否则会拖慢首屏。
四、播放能力的通用模型
无论平台，Lottie 运行时都围绕这些控制项：
| 能力 | 典型用途 |
|---|---|
| 自动播放与循环 | loading、空状态插画、持续装饰动效 |
| 播放 / 暂停 / 恢复 / 停止 | 由用户交互或页面状态驱动 |
| 播放速度与进度 | 跟随滚动、下载进度、状态机切换 |
| 指定起止帧 / 进度区间 | 将一个文件切成“打开”“关闭”等多个状态片段 |
| 事件监听 | 同步业务状态、统计播放完成或控制下一步流程 |
| 缓存 / 预加载 | 高频复用动画减少重复下载与解析 |
例如一个开关动效可将前半段视为“开”、后半段视为“关”，通过最小/最大帧限制播放区间，而非维护两份动画文件。
五、性能与设计协作注意点
- 先验证导出兼容性：After Effects 与 Bodymovin 不支持所有效果；遮罩、复杂蒙版、嵌入图片等往往比简单矢量路径更耗资源。
- 控制动画体积：检查 JSON、图片资源和字体，避免把多个页面不用的动画合并成一份大资源。
- 按需加载与释放：只在可见或即将可见时加载；组件卸载时销毁运行时实例，不能只靠 CSS 隐藏。
- 设定降级方案：弱性能设备、减少动态效果偏好（
prefers-reduced-motion）或资源失败时，展示静态首帧/备用图片。 - 设计交付要带验收信息：画布尺寸、循环策略、可交互帧段、深浅色背景和目标平台，避免仅交付“看起来能动”的文件。
六、资源与延伸
LottieFiles 提供动画浏览、预览和下载等服务，适合验证 JSON 的展示效果、寻找灵感；使用其中资源前需要确认其授权与是否包含外部素材。
本分类《Lottie 动画介绍与 React 封装》继续从 Web 端的 lottie-web API、组件封装和销毁时机展开。