我们主要从以下四个方面来讲解：
一、Lottie简介
二、LottieAndroid的使用
三、LottieAndroid源码解析
四、可能遇到的问题会有哪些
一、Lottie简介
-
Lottie是什么？
Lottie是Airbnb开源的一个动画渲染库，同时支持Android、IOS、React Native和Web平台，Lottie目前只支持渲染播放After Effects动画。Lottie使用bobymovin(After Effects插件)到处的json数据作为动画数据源。使用Lottie可以让动画显示变得简单方便。
-
从动画制作到动画显示流程如下：
-
工作流程：
-
注意事项：
-
为什么要使用Lottie？
-
先看看在没有Lottie之前我们是怎么实现相对复杂动画的：
-
使用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'
-
Gradle依赖修改：
compile '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编译版本和兼容包版本号？
-
-
使用方法
-
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
