Android开发Android开发Android开发经验谈

精致的动画库Lottie

2018-07-24  本文已影响16人  blingblingson

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 个桥梁对象：

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 FAQ?

4.1 Lottie的缩放规则

有关 Lottie 是如何自适应容器大小的暂不清楚，这里涉及较多矩阵等运算，有兴趣的可以翻看 LottieDraw.draw() 的源码

4.2 与其他加载方式的比较

  1. Lottie优点如下：
  1. Lottie性能问题：

4.3 Lottie的使用场景

  1. Lottie 不适用的两种场景：
  1. Lottie 非常适合像一段动画的播放这样的场景使用：
上一篇下一篇

猜你喜欢

热点阅读