Lottie动画概述

本文链接： https://blog.csdn.net/rikkatheworld/article/details/102701043

这里东Copy，西Copy一下 Lottie 的特点。
学习的blog有：Lottie调研小结
 Lottie的基本用法及原理分析
 添加链接描述

Lottie的概念

原生的动画效果有时候写起来会非常的复杂，要考虑到很多兼容和效果。Lottie动画专门为了解决这种烦恼而产生的。
（注：不仅是Lottie可以做到，另外一种库也可以做到将动画分成一帧一帧展示，它就是 android-gif-drawable 库，不过他适用的平台只有Android）

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

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

//xml：
 <com.airbnb.lottie.LottieAnimationView
        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的优势

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

性能上：
从我们去用它的代码上看，Android端的实现是基于Drawable，IOS端是基于Layer，最终都是对canvas的操作。所以程序的操作就是 Lottie对Json进行解析，它使用的是Core Animation的Api进行渲染得到帧动画，比原生帧动画还原度高、性能更好。
所以整个流程下来，除开解析Json文件，并无太多的性能损耗。
经测试：在没有开启硬件加速的情况下，帧率、内存、CPU都比属性动画差，开启硬件加速后，性能就差不多
存储上：
因为是json的形式，所以相比于动则几M的 GIF图，它完全可以取代。
灵活性：
在拿到Json后，我们甚至可以通过修改Json来修改动画的一些颜色、路径等，一个动画在不同的界面能表现出不同的形式，所以它的更新是非常灵活的。
API完整：
它也有自己的播放、控制进度、暂停，还可以缓存、添加额外的原生UI等。
兼容：
Android: API16+
IOS : IOS8+ /MacOS 10.10+
WEB：调用Bodymovin提供的js库 — bodymovin.js。
对程序员很友好
把制作动画的任务转移到 UI兄弟上，以后写不出或者的动画，就可以喊一句：既然是你们ui设计的，那你们ui用Lottie来做啊。
程序这边做的只需导入+播放了。

Lottie的不足

据说AE那边专门导出 Json格式的插件 Bodymovin 还是有些问题的。部分AE效果无法导出
部分json解析后效果在移动端上表现并不是很好。这还是因为 lottie对Json的支持并不是特别完善。

适用场景

虽然是个动画，但也不是每个地方都能用，其实它就跟GIF一样，是在特殊的情况下使用

酷炫的 App展示页（SplashActivity）
加载时的过场（就是如果不想用简单的转菊花圈圈，就可以使用这样的酷炫动画）
修饰
比如一个用来展示某种东西的View，你在它的上一层加一个Lottie动画，就变得更加的突出。