Lottie Android：设计师交付动画，开发直接用

Lottie Android：设计师交付动画，开发直接用

Airbnb 开源的 Lottie Android 拿到了 35k+ Star：

Lottie Android 是一个移动端动画库，解析 Adobe After Effects 导出的 JSON 动画文件（通过 Bodymovin 插件），然后在 Android 上原生渲染。

过去做一个 App 动效，设计师出完稿，开发要手动用代码逐帧还原，耗时且容易走样。Lottie 把这条链路缩短了：设计师在 After Effects 里做完动画，导出 JSON，开发直接加载播放，效果和设计稿一致。

支持的平台

Lottie 不只服务于 Android，同一套 JSON 文件可以在多个平台渲染：

• iOS
• React Native
• Web
• Windows

一份动画资源，全平台复用，不需要针对每个端单独开发。

接入方式

Gradle 是唯一支持的构建方式，添加一行依赖即可：

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

项目还提供了 Lottie-Compose 版本，适配 Jetpack Compose：

dependencies {
  implementation 'com.airbnb.android:lottie-compose:$lottieVersion'
}

Lottie 2.8.0 及以上版本要求项目已迁移到 AndroidX。

基本用法

在布局 XML 中使用 LottieAnimationView：

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/my_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

也可以通过代码控制播放：

lottieView.setAnimation(R.raw.my_animation)
lottieView.playAnimation()

动画文件来源支持 raw 资源、assets 目录，也可以从网络 URL 加载。

支持的动画特性

Lottie 对 After Effects 动画的覆盖面相当全：

• 基本图形（矩形、圆形、路径）
• 关键帧动画、表达式
• 遮罩和蒙版
• 混合模式
• 图片资源嵌入
• 文本图层
• 多图层合成

基本上设计师在 After Effects 里能做的常规操作，Lottie 都能正确渲染。对于一些高级特效（如 3D 图层、某些插件效果），需要确认兼容性。

实际应用场景

Lottie 在生产环境中的使用已经非常普遍：

• App 启动页动画
• 下拉刷新动效
• 页面转场过渡
• 按钮交互反馈
• 空状态插画动画
• 引导页动效

相比帧动画（逐帧图片序列）和属性动画（代码手写），Lottie 的优势在于体积小、设计师可独立迭代、跨平台一致。

项目维护

Lottie 由 Airbnb 团队在业余时间维护。项目在 Google Play 上提供了示例应用，可以直接体验各种动画效果。文档和 FAQ 托管在 airbnb.io/lottie。

目前 Lottie 在 Android、iOS、Web、React Native 和 Windows 五个平台都有对应的仓库，社区活跃度高，持续迭代中。

文档和 FAQ 托管在 airbnb.io/lottie。

目前 Lottie 在 Android、iOS、Web、React Native 和 Windows 五个平台都有对应的仓库，社区活跃度高，持续迭代中。