LottieAndroid使用详解及源码解析，让你的应用加载动画变得轻而易举。
看源码的时候跟着我最下面的两张时序图慢慢走，一遍看不懂就再看一遍，别着急，多看几遍就能懂了。虽然这里不是用的最新框架源码，但是基本原理都是一致的，不影响你使用最新版本时候遇到问题，然后定位解决。
看懂源码有什么用？当你使用这个框架遇到一些奇怪的Bug的时候，有时候不一定是你的问题，可能是源码中的问题，追踪源码有利于你快速定位问题。我在使用的时候遇到过源码的问题，后来在GitHub的issue中看到有人提了，再后来的版本就修复了。
为了写好这篇文章，我花了一周多的时间，因为是给公司做分享，所以很多细节我是讲出来的，并没有写出来，因为要写的话会很多，但这篇文章基本上完全可以满足你对Lottie的使用和对源码的理解，接下来耐心看吧。
我们主要从以下四个方面来讲解：
一、Lottie简介
二、LottieAndroid的使用
三、LottieAndroid源码解析
四、可能遇到的问题会有哪些
一、Lottie简介
-
Lottie是什么？
Lottie是Airbnb开源的一个动画渲染库，同时支持Android、IOS、React Native和Web平台，Lottie目前只支持渲染播放After Effects动画。Lottie使用bobymovin(After Effects插件)到处的json数据作为动画数据源。使用Lottie可以让动画显示变得简单方便。
-
从动画制作到动画显示流程如下：
-
工作流程：
- 设计师使用Affer Effects制作动画并导出json文件，参考：Lottie动画社区
- 各端开发使用相应的LottieSDK实现动画效果，GitHub下载地址：Lottie Android，Lottie IOS，React Native，Web
-
注意事项：
设计师同学制作各个平台（Android、IOS、React Netive）动画时需要查看Lottie在不同平台支持的特性，否则制作出来的动画显示可能会有问题，设计同学制作动画参考：不同平台Lottie支持特性
-
为什么要使用Lottie？
-
先看看在没有Lottie之前我们是怎么实现相对复杂动画的：
- 使用GIF，占用空间大，有些动画显示效果不佳，需要适配分辨率，Android原生不支持GIF动画的显示。
- 使用帧动画，占用空间大，依然会遇到不同分辨率适配的问题。
- 组合式动画，通过大量代码实现复杂的动画效果。
-
使用Lottie可以解决的问题：
- 降低动画设计和开发成本
- 解决设计提供动画效果与实现不一致问题
- 占用空间更小
- 不同的手机分辨率不需要适配
-
-
Lottie适用于哪些场景？
- 启动(splash)动画：典型场景是APP logo动画的播放
- 上下拉刷新(refresh)动画：所有APP都必备的功能，利用 Lottie 可以做的更加简单酷炫了
- 加载(loading)动画：典型场景是网络请求的loading动画
- 提示(tips)动画：典型场景是空白页的提示
- 按钮(button)动画：典型场景如switch按钮、编辑按钮、播放按钮等按钮的
- 礼物(gift)动画：典型场景是直播类APP的高级动画播放
-
我们想要使用Lottie替代哪些动画？
- 首先并不是在APP中所有的动画都要用Lottie来替换
- 一些可以通过属性动画来实现的简单动画就不需要用Lottie来实现了
- 替代一些通过代码不好实现的动画效果
- 替代GIF动画和帧动画
二、LottieAndroid的使用
-
集成到项目中（以2.2.0版本为例）
-
添加依赖：compile 'com.airbnb.android:lottie:2.2.0'
Lottie版本号参考：Maven库查看Lottie各版本号
-
Gradle依赖修改：
最低版本：MIN_SDK_VERSION = 16
编译版本：COMPILE_SDK_VERSION = 25
所有的兼容包需要升级到版本号为25.3.1compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support:cardview-v7:25.3.1' compile 'com.android.support:design:25.3.1' compile 'com.android.support:recyclerview-v7:25.3.1' compile 'com.android.support:palette-v7:25.3.1' compile 'com.android.support:support-v4:25.3.1' -
如何查看Lottie各版本需要对应的AndroidSDK编译版本和兼容包版本号？
以Lottie2.2.0版本为例：mvnrepository lottie2.2.0
-
-
使用方法
-
Lottie基本用法查看官方文档
-
首先将json文件放到assets文件夹下：
可以直接放到assets目录下，或者在assets目录下创建一个二级目录放在二级目录下。 -
在布局中添加LottieAnimationView控件：
LottieAnimationView可以设置的属性如下：<com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="hello-world.json" app:lottie_loop="true" app:lottie_autoPlay="true" /> 如上图，如果json文件在assets子文件夹中，lottie_fileName="lottieani/stars.json" -
得到LottieAnimationView对象进行动画操作：
setAnimation()有三种方法，可以直接设置动画的Json对象，或者设置Json文件相对路径名，且支持设置缓存类型：LottieAnimationView animationView = (LottieAnimationView)findViewById(R.id.animation_view); // 布局中不指定文件可以在此设置，路径设置同布局文件 animationView.setAnimation("hello-world.json"); // 是否循环播放 animationView.loop(true); // 设置播放速率，例如：2代表播放速率是不设置时的二倍 animationView.setSpeed(2f); // 开始播放 animationView.playAnimation(); // 暂停播放 animationView.pauseAnimation(); // 取消播放 animationVIew.cancelAnimation(); // 设置播放进度 animationView.setProgress(0.5f); // 判断是否正在播放 animationView.isAnimating();playAnimation()有三种方法：支持三种缓存类型，不缓存、弱类型和强类型： -
添加动画监听
mAnimationView.addAnimatorListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { Log.d(TAG, "onAnimationStart : " + animation.getDuration()); } @Override public void onAnimationEnd(Animator animation) { Log.d(TAG, "onAnimationEnd"); } @Override public void onAnimationCancel(Animator animation) { Log.d(TAG, "onAnimationCancel"); } @Override public void onAnimationRepeat(Animator animation) { Log.d(TAG, "onAnimationRepeat"); } }); mAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //Log.d(TAG, "onAnimationUpdate : " + animation.getCurrentPlayTime()); } });
-
-
其他用法
-
自定义动画的速率和时长
ValueAnimator valueAnimator = ValueAnimator .ofFloat(0f, 1f) .setDuration(5000); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mAnimationView.setProgress((Float) animation.getAnimatedValue()); } }); valueAnimator.start(); -
给整个动画添加一个特定图层，或者一个图层的特定内容添加一个颜色过滤器
// 任何符合颜色过滤界面的类 final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.LIGHTEN); // 在整个视图中添加一个颜色过滤器 animationView.addColorFilter(colorFilter); //在特定的图层中添加一个颜色滤镜 animationView.addColorFilterToLayer("hello_layer", colorFilter); // 添加一个彩色过滤器特效“hello_layer”上的内容 animationView.addColorFilterToContent("hello_layer", "hello", colorFilter); // 清除所有的颜色滤镜 animationView.clearColorFilters(); -
在列表中添加动画，每个item循环播放该动画
如果按照下面写法会有什么问题？如果按照下面写法，即便是已经设置了lottieViewLive.loop(true)循环播放，item被划走再划回来动画依旧会停止播放。
<com.airbnb.lottie.LottieAnimationView android:id="@+id/lottieViewLive" android:layout_width="30dp" android:layout_height="30dp"/> // 在viewHolder中initView的时候开始动画 LottieAnimationView lottieViewLive = (LottieAnimationView) layout.findViewById(R.id.lottieViewLive); lottieViewLive.setAnimation("lottiejson/living.json"); // 循环播放动画 lottieViewLive.loop(true); lottieViewLive.playAnimation();为了解决上诉问题，只需要在布局中添加，属性app:lottie_autoPlay="true"；可以直接按照写法在xml布局中添加动画即可。为什么会这样？待会在源码解析部分讲解。
<com.airbnb.lottie.LottieAnimationView android:id="@+id/lottieViewLive" android:layout_width="30dp" android:layout_height="30dp" app:lottie_autoPlay="true" app:lottie_fileName="lottiejson/living.json" app:lottie_loop="true"/> -
从网络直接获取json数据显示动画(Lottie本身不提供网络请求)
为什么要使用下面方式，而不是从网络获取json数据后直接animationView.setAnimation(json)。主要是为了使用OnCompositionLoadedListener，防止从网络获取的json数据错误解析出来的composition为null。
LottieComposition.Factory.fromJson(getResources(), jsonObject, new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(@Nullable LottieComposition composition) { if (composition != null) { mAnimationView.setComposition(composition); mAnimationView.playAnimation(); } else { // showErrorView(); } } }); -
加载含有图片的复杂文件
有些动画比较复杂不是简单的线条、图块所能实现的，这样的动画通过AE插件bobymovin生成的文件除了有一个json文件外，还会有一些png图片。如何加载这样的动画呢？
① 加载本地含有图片的动画资源，json文件放在assets文件夹下，生成的png图片同样放在assets文件夹下（或者自己在assets文件夹下创建一个子目录，假如叫lottieimage）。
② 加载从网络获取的含有图片的动画资源，首先需要将资源下载到手机SD卡中// 代码这样写，需要设置图片的文件夹地址 mAnimationView.setImageAssetsFolder("lottieweaccept/images"); mAnimationView.setAnimation("lottieweaccept/WeAccept.json"); mAnimationView.playAnimation(); // 或者在布局文件中添加这句代码，指定图片路径 app:lottie_imageAssetsFolder="lottieweaccept/images"final String absolutePath = imagesDir.getAbsolutePath(); mAnimationView.setImageAssetDelegate(new ImageAssetDelegate() { @Override public Bitmap fetchBitmap(LottieImageAsset asset) { return BitmapFactory.decodeFile(absolutePath + File.separator + asset.getFileName()); } }); LottieComposition.Factory.fromInputStream(LottieViewActivity.this, inputStream, new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(@Nullable LottieComposition composition) { if (composition != null) { mAnimationView.setComposition(composition); mAnimationView.playAnimation(); } else { // doOtherThing(); } } });
-
-
三、源码解析
-
从Json到动画显示的实现思路
将复杂的图片使用图层表示，每一层表示不同的内容
-
根据动画需求可以只针对某一层做相应的平移、旋转、缩放等动画
-
Json文件中数据转成LottieComposition数据对象，LottieDrawable负责将数据绘制成drawable，LottieAnimationView负责将LottieDrawable显示出来。LottieAnimationView继承自AppCompatImageView，LottieDrawable继承自Drawable。
-
先看看生成的Json数据，参考这里：Lottie：让动画如此简单
-
如何加载json数据并显示图像的？
-
animationView.setAnimation("hello-world.json");
通过setAnimation()来看看，上面json数据到显示图像的过程。源码时序图如下（以2.2.0版本为例）：LottieAnimationView初始化的时候会首先创建LottieDrawable对象，private final LottieDrawable lottieDrawable = new LottieDrawable()。init()，进行初始化的时候，解析xml设置的属性。
setAnimation(String fileName)，加载Json文件。
通过异步加载，最终会调用到fromJsonSync()对Json文件进行解析。
解析结果通过onCompositionLoaded()回调到主线程，然后会将Json数据转换成LottieComposition对象。
lottieDrawable.setComposition()，将LottieComposition对象设置给LottieDrawable。
生成CompositionLayer对象，这个对象就是每一个图层的对象。
通过setImageDrawable(lottieDrawable)将图像显示出来，显示第一帧动画。
-
-
动画如何运行起来的？
-
animationView.playAnimation();
调用playAnimation()动画是如何动起来的，源码时序图如下（以2.2.0版本为例）：ValueAnimator实现的控制动画进度。
setProgress实现的显示具体进度动画。
LottieDrawable中的draw绘制图像，Canvas进行绘制。
-
-
为什么在列表中加载动画时设置了循环播放，item划走再划回来动画还是会停止播放？为什么添加app:lottie_autoPlay="true"才行？
-
我们来看看这两句代码，有没有什么问题？
setAnimation是异步加载json文件的，调用setAnimation之后直接调用playAnimation()源码是如何保证加载完数据之后再开始动画呢？最终会走到LottieDrawable类中，如下：// 异步加载json文件 animationView.setAnimation("hello-world.json"); animationView.playAnimation(); animationView.setSpeed(2f);
性能问题
-
性能和内存
- 如果没有mask和mattes，那么性能和内存非常好，没有bitmap创建，大部分操作都是简单的cavas绘制。
- 如果存在mattes，将会创建2～3个bitmap。bitmap在动画加载到window时被创建，被window删除时回收。所以不宜在RecyclerView中使用包涵mattes或者mask的动画，否则会引起bitmap抖动。除了内存抖动，mattes和mask中必要的bitmap.eraseColor()和canvas.drawBitmap()也会降低动画性能。对于简单的动画，在实际使用时性能不太明显。
- 如果在列表中使用动画，推荐使用缓存LottieAnimationView.setAnimation(String, CacheStrategy) 。
全屏适配参考
更新：添加2.5.1版本时遇到的问题
1、 编译版本需要 27
2、所有的suport包版本需要27.1.0
compile 'com.android.support:appcompat-v7:27.1.0'
3、如果有引入lifecycle，版本需要1.1.0
android.arch.lifecycle:extensions:1.1.0
android.arch.lifecycle:compiler:1.1.0
如果项目中引入了livedata并且lifecycle版本号不对，会报如下错误：
Error:Program type already present: android.arch.lifecycle.LiveData
参考：https://stackoverflow.com/questions/49056723/errorprogram-type-already-present-android-arch-lifecycle-livedata
com.firebaseui:firebase-ui-firestore:3.1.0 depends on android.arch.lifecycle:extensions:1.0.0-beta1. Switching to version 3.2.2 fixes the issue by using the Lifecycle 1.1 libraries that Support Library 27.1.0 are built upon.
