Lottie运行流程分析

1. Lottie是什么?

Airbnb 开源的跨平台动画库，适用于 iOS、Android、React Native 和 Web 等平台，它可以解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画，允许应用程序像使用静态图像一样轻松使用动画

2. 如何使用?

2.1 基本用法

lottie-android 有两种引入方式：

1. xml方式

2. 编程方式

LottieAnimationView animationView = ...

animationView.setAnimation(R.raw.hello_world);
// or
animationView.setAnimation(R.raw.hello_world.json);

animationView.playAnimation();

2.2 更多API

lottie 提供了多种对动画的操作：

playAnimation() //播放动画
pauseAnimation()    //暂停动画
setMinFrame()   //设置起始帧
setMaxFrame()   //设置结束帧
setRepeatCount()    //设置重复次数
setSpeed()  //设置播放速度

此外，lottie 也提供一系列监听：

addAnimatorListener()   //start、end、cancel、repeat回调
addAnimatorUpdateListener() //update回调

其他平台及用法参考官方文档

3. Lottie实现原理?

3.1 整体关系图

从上面不难看出，主要有 3 个桥梁对象：

• LottieAnimationView：门面对象，对外暴露统一的调用接口，我们通过它轻松实现各种动画效果
• LottieComposition：负责解析 json 描述文件，把 json 内容转成 Java 数据对象
• LottieDrawable：负责绘制，把 LottieComposition 转成的数据对象绘制成 Drawable 并显示到 View 上

LottieComposition 及其往左是数据侧。AE 动画的组成和 PS 很相似，整个动画用一个 LottieComposition 对象来承装，一个动画又包含了若干个图层 Layer，在图层上我们可以进行一些操作 AnimatableTransform，图上的 o r p a s 分别表示 5 种变换 opacity、rotate、position、anchor、scale

这里还有一个概念叫关键帧，我们都知道动画的单位是帧，动画运行的本质就是微分，即预先设定初始值和目标值，在一段时间内不断改变这个值向目标靠近，这个初始值和目标值就可以认为是关键帧，当然在这之间也是能够插入多个关键值的，这样就会有多个关键帧了

LottieDrawable 及其往右是渲染侧。数据侧的对象只是存储了数据，Lottie 会将这些数据转换成具备渲染能力的对象，这里他们是有对应关系的，如：CompositionLayer 和 LottieComposition，BaseLayer 和 Layer，TransformKeyframeAnimation 和 AnimatableTransform，KeyframeAnimation 和 Keyframe，而 LottieDrawle 就是一张画布，它拥有一个 Canvas，当我们开始播放动画，这些图层便一层一层的在 Canvas 上进行绘制，随着时间（progress）的推进，各图层不断根据当前进度计算新的状态值，并重复绘制过程，图像便动了起来

3.2 主线运行流程

1. json文件内容
动画的数据模型从 AE 到我们代码中会经历如下几个变化：

从上面可以看出，动画的数据模型中总有下面的包含关系：

这里再借用一张图，看看 json 文件中都描述了些什么内容：

上图一些关键项后面都带了解释。这里第一部分是 json 文件的外层结构，主要是 layers 这个数组包含了所有的图层信息，layers 中的 ks 中包含了所有的变换信息，也就是上面一直提到的 o r p a s 变换

2. 动画运行流程
知道了 json 内容的含义，接下来再来看看动画是怎么运行的，下面是 Lottie 的运行流程图：

整个的执行逻辑大致是这样的：

1. 通过 Factory.fromJsonSync 将 json 文件解析成为 LottieComposition
2. 根据 LottieComposition 中的数据来构造具备渲染能力的 CompositionLayer
3. 启动 ValueAnimator 去不断监听动画进度，一旦进度改变就回调更新函数
4. 各个图层根据当前进度（progress）计算自身新的状态
5. LottieDrawable 将它持有的 Canvas 传给各图层进行绘制，最终显示到 View 上

4. Lottie Q&A?

4.1 与其他加载方式的比较

• 视图动画。 无法真正改变 view 的属性，只有视觉上的效果
• 属性动画。 难以完成设计师给出的一些精美复杂的动画效果
• gif 视频。 体积是 json 的两倍以上，存在交互障碍，并且以固定大小渲染，无法按比例放大以匹配大型和高密度屏幕
• png 序列。 需要大量的图片素材，文件大小通常是 json 大小的 30-50 倍，动画播放时会占用很多内存，也无法按比例放大

1. Lottie优点如下：

• 100% 还原设计师给出的各种复杂动画效果
• 简单的实现、控制动画的播放，开发效率大大提高
• 可动态配置下发，实时替换动画效果

2. Lottie性能问题：

• Mask 和 mattes（蒙板和遮罩）对动画性能会有较大影响，不宜在列表中使用包含 mask 或 mattes 的动画
• 列表中使用动画，要使用缓存 LottieAnimationView.setAnimation(String, CacheStrategy)，避免内存抖动
• Lottie 中 ImageLayer 对图片的解码是在主线程的，并且没有对 Bitmap 重用，可以自己将图片解码的逻辑迁移到子线程，并增加对 Bitmap 的缓存来提高性能

4.2 Lottie的使用场景

1. Lottie 不适用的两种场景：

• 给 View 本身添加动画（如：从右下角到移动到页面中，并逐渐放大的过渡效果）
• 动画中有动态内容（如：需要显示一个数量，多少来自数据库/网络）

2. Lottie 非常适合像一段动画的播放这样的场景使用：

• json 文件的大小比 gif 文件小很多
• 能够非常方便的控制动画播放，如：速率、范围