Lottie进阶和原理分析

简介

Lottie是aribnb发布的开源库，它可以将AE制作的动画在Android、iOS和RN代码中渲染出来。

Lottie的功能及其强大，只需要设计师使用AE设计动画，用bodymovin导出，那么我们只需要简单的几行代码，就能实现非常复杂的动画效果。

LottieAnimationView继承自ImageView，通过当前时间绘制canvas显示到界面上。这里有两个关键类：LottieComposition 负责解析json描述文件，把json内容转成Java数据对象；LottieDrawable负责绘制，把LottieComposition转成的数据对象绘制成drawable显示到View上。顺序如下：

核心类：

• LottieAnimationView继承自 ImageView ，并且是加载 Lottie 动画的默认和最简单的方法。
• LottieDrawable与 LottieAnimationView 有大部分相同的 API，但你可以在任何你想要的视图上使用它。
• LottieComposition是动画的无状态model。只要你需要，此文件就可以安全地缓存，并且可以在drawable/view之间自由重用。
• LottieCompositionFactory允许您从多个输入创建 LottieComposition。这就是setAnimation(...)API 在后台使用LottieDrawable和LottieAnimationView使用的内容。工厂方法也与这些类共享相同的缓存。

参考文档

airbnb.io/lottie/#/an…

Lottie的使用方法

加载动画资源的方式：

• src/main/res/raw 中的 json 动画
• src/main/assets 中的 json 文件
• src/main/assets 中的 zip 文件
• src/main/assets中的dotLottie文件(*将Lottie的所有资源打包为一个.lottie文件，有兴趣可查看相关文档)
• json 或 zip 文件的 Url
• json 字符串
• json 或 zip 文件的 InputStream

xml中使用方法

（不再赘述）

xml文件中Lottie的各属性

属性	功能
lottie_fileName	设置播放动画的json文件名称
Lottie_rawRes	设置播放动画的json文件资源
Lottie_autoPlay	设置动画是否自动播放（默认为FALSE）
Lottie_loop	设置动画是否循环（默认为FALSE）
Lottie_repeatMode	设置动画的重复模式（默认为restart）
lottie_repeatCount	设置动画的重复次数（默认为-1）
Lottie_cacheStrategy	设置动画的缓存策略（默认为weak）
Lottie_colorFilter	设置动画的着色颜色（优先级最低）
Lottie_scale	设置动画的比例（默认为1f)
Lottie_progress	设置动画的播放进度
Lottie_imageAssetsFolder	设置动画依赖的图片资源文件地址

代码中使用Lottie

LottieAnimationView animationView = ...
​
animationView.setAnimation(R.raw.hello_world);
// or
animationView.setAnimation(R.raw.hello_world.json);
​
animationView.playAnimation(); 

缓存动画

默认情况下，所有Lottie动画都使用LRU缓存算法进行缓存，所有从raw或者assets文件夹加载出的动画都将默认创建缓存Key，其他API需要设置缓存key。如果需要对同一个动画并行触发多个动画请求，后续请求将加入现有任务，因此只会被解析一次。

全局配置

Lottie 有一些全局配置选项。默认情况下不需要，但它可用于：

• 从网络加载动画时，使用你自己的网络堆栈而不是 Lottie 的内置堆栈。
• 为从网络获取的动画提供您自己的缓存目录，而不是使用 Lottie 的默认目录 ( cacheDir/lottie_network_cache)。
• 启用 systrace 进行调试。

要设置它，在应用程序初始化期间的某个地方，包括：

Lottie.initialize(
    LottieConfig.Builder()
      .setEnableSystraceMarkers(true)
      .setNetworkFetcher(...)
      .setNetworkCacheDir(...)
  ） 

注：systrace是Android自带的性能分析工具，详情可以查看文档

Android Systrace 系列文章

循环

Lottie可以通过setRepeatMode和setRepeatCount设置循环播放模式，或者通过在xml中设置 lottie_loop="true"

你同样可以循环动画中的某一段内容，通过调用 setMinFrame, setMaxFrame, or setMinAndMaxFrame，包括帧、进度（从 0.0 到 1.0）或标记名称（在 After Effects 中指定）。

Lottie适配

Lottie 将 After Effects 中的所有 px 值转换为设备上的 dps，以便在设备上以相同大小呈现所有内容。这意味着，*Lottie本身已经自带了适配功能， *与其在 After Effects 中制作 1920x1080 的动画，不如在 After Effects 中制作 411x731px，大致对应于当今大多数手机的 dp 屏幕尺寸。

但是，如果您的动画尺寸不合适，您有两种选择：

0.ImageView scaleType* LottieAnimationView 是一个包装好的ImageView，它支持centerCrop, centerInside，fitXY所以你可以像使用imageview一样使用此属性。
1.Scaling Up/Down* LottieAnimationView和LottieDrawable两者都有一个setScale(float)API，您可以使用它来手动放大或缩小动画。这很少有用，但在某些情况下可能有用。如果您的动画执行缓慢，请务必查看有关性能的文档。但是，请尝试结合 scaleType 缩小动画。这将减少 Lottie 每帧渲染的数量，特别是Lottie有大的mask或matters，这将特别有用。### 高级用法：动态修改属性

你可以在程序运行时动态更新Lottie属性，这可用于多种目的：

• 主题（白天、黑夜或任意主题）
• 响应成功或错误等事件
• 对动画的单个部分进行动画处理以响应事件
• 响应设计时未知的View大小或者其他属性

理解AE（After Effects）

要了解如何在 Lottie 中更改动画属性，首先应该了解动画属性是如何存储在 Lottie 中的。动画属性存储在模仿 After Effects 信息层次结构的数据树中。在 After Effects 中，Composition是一个集合Layers，每个集合都有自己的时间线。Layer对象具有字符串名称，它们的内容可以是图像、形状图层、填充、描边或任何可绘制的内容。After Effects 中的每个对象都有一个名称。Lottie可以使用这些对象和属性的名称通过KeyPath找到它们。

Lottie json文件的属性含义

• lottie的最外层结构：

{
  "v": "5.8.0",  //bodymovin的版本
  "fr": 60,      //帧率
  "ip": 0,       //起始关键帧
  "op": 102,     //结束关键帧
  "w": 1350,     //动画宽度
  "h": 800,      //动画高度
  "nm