Lottie动画概述，文末有彩蛋

---

原生的动画效果有时候写起来会非常的复杂，要考虑到很多兼容和效果。Lottie动画专门为了解决这种烦恼而产生的。

（注：不仅是Lottie可以做到，另外一种库也可以做到将动画分成一帧一帧展示，它就是 android-gif-drawable 库，不过他适用的平台只有Android）

Lottie就是一个开源动画库，它的属性是这样的：

1. 首先，它的编写平台并不是专门的程序IDE，而是绘图软件AE(After Effects)，所以绘制的工作就从程序员手上交给了美工的兄弟。美工在AE上完成动画后，将 输出 通过AE上的插件，转化成 Json格式。这就有点像SVG矢量图，它既可以是个svg格式的图片，又可以变成 代码的形式让程序进行操控其属性（颜色、路径等等）。（附SVG讲解：Android自定义控件开发入门与实战（7）SVG动画）

2. 因为转化成了Json格式，所以 它变得更加 轻便了 ，并且可以使用的平台也会变多，一套Json代码可以 Android、IOS、RN、Web平台都可以使用Lottie动画。

Lottie的制作流程如下：

Lottie Json在Java中的形象

---

下面是Json的文件结构：

Lottie 的Json在线校验网站：传送门

下图是它的解析过程：

大致就是把Json转化成Java Bean，然后适用Drawable进行绘制。

Android Lottie Demo

---

下面来实际操作一下，用Android来写一个Lottie动画。

第一步 导入Lottie动画库

注：如果使用2.8以上的版本，Android要升级至AndroidX

implementation ‘com.airbnb.android:lottie:3.1.0’

第二步 将Lottie的Json文件放到 assets文件下

*第三步 在XML或者代码中使用

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

//xml：

android:id="@+id/lottie_view"

android:layout_width=“300dp”

android:layout_height=“300dp”

android:layout_centerInParent=“true”/>

//Activity

lottieView = findViewById(R.id.lottie_view);

lottieView.setAnimation(“genius-avatar.json”);

lottieView.loop(true);

lottieView.playAnimation();

效果如下：

解析原理

---

这里就不讲，因为通篇都是解析Json文件的。

但是我们可以看看 Lottie主要使用到的类和它们的作用：

首先，LottieDrawable会分出很多图层，然后用图层管理者 CompositionLayers去分别进行绘制。

绘制的时候根据时间，计算每个时间点的 关键帧。这个时候用到了我们在属性动画所学过的 KeyFrame 关键帧处理类

Lottie的优势

---

从它的概念，我们不难看出它有这一些优势，让我们在一些情况下选择它更明智：

1. 性能上：

从我们去用它的代码上看，Android端的实现是基于Drawable，IOS端是基于Layer，最终都是对canvas的操作。所以 程序的操作就是 Lottie对Json进行解析，它使用的是Core Animation的Api进行渲染得到帧动画，比原生帧动画还原度高、性能更好。