1. Lottie是什么?
Airbnb 开源的跨平台动画库，适用于 iOS、Android、React Native 和 Web 等平台，它可以解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画，允许应用程序像使用静态图像一样轻松使用动画
2. 如何使用?
2.1 基本用法
lottie-android 有两种引入方式：
1. xml方式
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_rawRes="@raw/hello_world"
// or
app:lottie_fileName="hello_world.json"
// Loop indefinitely
app:lottie_loop="true"
// Start playing as soon as the animation is loaded
app:lottie_autoPlay="true" />
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 的运行流程图：
整个的执行逻辑大致是这样的：
- 通过 Factory.fromJsonSync 将 json 文件解析成为 LottieComposition
- 根据 LottieComposition 中的数据来构造具备渲染能力的 CompositionLayer
- 启动 ValueAnimator 去不断监听动画进度，一旦进度改变就回调更新函数
- 各个图层根据当前进度（progress）计算自身新的状态
- LottieDrawable 将它持有的 Canvas 传给各图层进行绘制，最终显示到 View 上
4. Lottie FAQ?
4.1 Lottie的缩放规则
有关 Lottie 是如何自适应容器大小的暂不清楚，这里涉及较多矩阵等运算，有兴趣的可以翻看 LottieDraw.draw() 的源码
4.2 与其他加载方式的比较
- 视图动画。 无法真正改变 view 的属性，只有视觉上的效果
- 属性动画。 难以完成设计师给出的一些精美复杂的动画效果
- gif 视频。 体积是 json 的两倍以上，存在交互障碍，并且以固定大小渲染，无法按比例放大以匹配大型和高密度屏幕
- png 序列。 需要大量的图片素材，文件大小通常是 json 大小的 30-50 倍，动画播放时会占用很多内存，也无法按比例放大
- Lottie优点如下：
- 100% 还原设计师给出的各种复杂动画效果
- 简单的实现、控制动画的播放，开发效率大大提高
- 可动态配置下发，实时替换动画效果
- Lottie性能问题：
- Mask 和 mattes（蒙板和遮罩）对动画性能会有较大影响，不宜在列表中使用包含 mask 或 mattes 的动画
- 列表中使用动画，要使用缓存 LottieAnimationView.setAnimation(String, CacheStrategy)，避免内存抖动
- Lottie 中 ImageLayer 对图片的解码是在主线程的，并且没有对 Bitmap 重用，可以自己将图片解码的逻辑迁移到子线程，并增加对 Bitmap 的缓存来提高性能
4.3 Lottie的使用场景
- Lottie 不适用的两种场景：
- 给 View 本身添加动画（如：从右下角到移动到页面中，并逐渐放大的过渡效果）
- 动画中有动态内容（如：需要显示一个数量，多少来自数据库/网络）
- Lottie 非常适合像一段动画的播放这样的场景使用：
- json 文件的大小比 gif 文件小很多
- 能够非常方便的控制动画播放，如：速率、范围
网友评论