Lottie

定义

Lottie 是面向 Android、iOS、Web 和 Windows 等平台的矢量动画库，其作用是读取以 Bodymovin JSON 格式导出的 After Effects 动画数据，并在目标设备上本地绘制播放^[1]。它本身不是一个可视化编辑软件，而是一组解析与渲染实现，配套的设计导出环节由 After Effects 插件完成^[2]。

在 Lottie 出现之前，设计稿中的复杂帧动画通常要由工程师用平台各自的动画接口逐帧复现，或退而使用 GIF、PNG 序列等位图方案。Lottie 把动画以结构化文本的形式交付，使同一份素材可以在多个平台上渲染出接近一致的效果^[2]。

原理

其工作流程分为设计与渲染两段。设计师在 After Effects 中完成动画后，通过 Bodymovin 插件把工程文件中的图层、关键帧、路径等参数写成 JSON 文本；客户端引入对应平台的 Lottie 库后，解析这份 JSON 并生成矢量绘制指令，最终由平台自身的图形接口绘制到屏幕上^[2]。

渲染时使用的坐标变换与图形描述可以概括为形变矩阵与贝塞尔路径的组合。每个图层的位置、缩放、旋转与锚点合成为一次仿射变换，路径锚点则由三次贝塞尔曲线定义：$B(t)=(1-t)^3P_0+3(1-t)^2tP_1+3(1-t)t^2P_2+t^3P_3$。在 Web 端这些指令通常经 SVG 或 Canvas 输出，必要时可由 WebAssembly 承载渲染以提高效率。

作为一种基于 JSON 的动画格式，其数据量与图形复杂度而非像素数量相关，因此动画文件通常只有几 KB 到几十 KB，且矢量特性使其可以任意放大而不损失清晰度^[1]。

发展历程

2015 年，Hernan Torrisi 开发了运行在 After Effects 中的动画插件 Bodymovin，可用 JSON 描述 AE 动画，并把它开源到 GitHub，同时提供了首个基于 JavaScript 的网页播放器^[2]。

2016 年，Airbnb 的工程师与动画师在此基础上扩展出 Android、iOS 和 React Native 版本，使其能够解析 JSON 并在移动设备上渲染动画；2017 年，Airbnb 正式推出该项目并定名为 Lottie，围绕 GitHub 形成了社区^[2]。Lottie 之名取自德国剪影动画先驱 Charlotte Lotte Reiniger 的中间名，用以纪念这位动画先驱^[1]。

此后该方案逐步扩展到更多平台，Web 端衍生出 lottie-web 等实现，Xamarin、NativeScript、Qt、Skia、Vue、Angular 等环境也出现了相应的播放实现^[2]。围绕动画素材的托管与协作，还出现了 LottieFiles 等服务，并推动了 dotLottie 打包格式与统一运行时的发展。

Android 平台方面，Lottie 2.8.0 及以上版本要求项目已迁移至 androidx；随着 Jetpack Compose 的流行，项目也提供了 Lottie-Compose 的稳定版本^[3]。

应用

Lottie 主要用于界面动效，典型场景包括应用启动时的入场动画、加载与刷新指示、图标点击反馈、选项卡切换等轻量交互动画^[2]。

由于动画数据来自网络或本地资源文件，开发者可以像引用一张图片那样调用整段动画，并在运行时调整颜色、位置等可关键帧化的属性，也可以控制播放、循环、变速与倒放^[4]。部分界面框架还封装了 Lottie 组件，例如 Semi Design 提供的封装内部即基于 lottie-web 渲染，省去了手动管理容器与动画生命周期的工作^[5]。

在网页端，Lottie 常用于营销页与产品官网的矢量动效；在移动端，它与位图素材结合使用的情况也较为常见^[2]。

局限

Lottie 以 JSON 描述动画，其表达能力受限于 After Effects 特性到 Lottie 格式的映射范围，并非所有 AE 功能都能被转换。表达式、文本、部分图层样式与大多数特效在官方说明中被列为不支持或支持有限^[6]。

具体而言，3D 图层、摄像机与灯光、调整图层、投影与发光等图层样式，以及模糊、扭曲等生成类特效均无法导出；复杂的表达式不会被求值，而是需要在导出前烘焙为关键帧^[6]。蒙版与遮罩的使用也有代价，遮罩区域越大对性能的影响越明显，设计时应尽量缩小其范围^[7]。

此外，Lottie 主要面向矢量图形，尽量避免使用位图；若 Illustrator 图层未转换为形状图层，导出后会被当作位图处理^[7]。属性动画与体量较大的动画在各端的渲染表现也可能不一致，不同平台实现的细节差异需要通过预览与测试来提前发现。

参见

• Adobe After Effects —— Lottie 动画的设计与原始导出环境。

• Bodymovin —— 将 After Effects 动画导出为 JSON 的插件，Lottie 依赖其输出格式。

• Airbnb —— 将 Lottie 项目开源并推广的机构。

• 矢量图形 —— Lottie 动画所依托的图形表示方式。

• dotLottie —— 在 Lottie JSON 基础上发展出的打包格式。

• 可缩放矢量图形 —— 与 Lottie 同属矢量渲染技术体系的网页图形标准。