LottieAndroid使用详解及源码解析—轻而易举实现各种复

2017-10-11 本文已影响587人 Moninn

写在前面，对Android性能优化感兴趣的可以看我的这一篇文章：几乎是史上最全最实用的Android性能全面分析与优化方案研究（这篇文章是依托于我司产品手机迅雷做的十分实用性的分析，不同于网上的很多文章，这里就是告诉你该怎么定位性能问题，该怎么解决，以及原理是什么）

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可以让动画显示变得简单方便。
- 从动画制作到动画显示流程如下：
- 工作流程：
  1. 设计师使用Affer Effects制作动画并导出json文件，参考：Lottie动画社区
  2. 各端开发使用相应的LottieSDK实现动画效果，GitHub下载地址：Lottie Android，Lottie IOS，React Native，Web
- 注意事项：
  
  设计师同学制作各个平台（Android、IOS、React Netive）动画时需要查看Lottie在不同平台支持的特性，否则制作出来的动画显示可能会有问题，设计同学制作动画参考：不同平台Lottie支持特性
为什么要使用Lottie？
- 先看看在没有Lottie之前我们是怎么实现相对复杂动画的：
  1. 使用GIF，占用空间大，有些动画显示效果不佳，需要适配分辨率，Android原生不支持GIF动画的显示。
  2. 使用帧动画，占用空间大，依然会遇到不同分辨率适配的问题。
  3. 组合式动画，通过大量代码实现复杂的动画效果。
- 使用Lottie可以解决的问题：
  1. 降低动画设计和开发成本
  2. 解决设计提供动画效果与实现不一致问题
  3. 占用空间更小
  4. 不同的手机分辨率不需要适配
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.1
```
  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编译版本和兼容包版本号？
  
  以Lottie2.2.0版本为例：mvnrepository lottie2.2.0

使用方法

Lottie基本用法查看官方文档

首先将json文件放到assets文件夹下：
可以直接放到assets目录下，或者在assets目录下创建一个二级目录放在二级目录下。

在布局中添加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可以设置的属性如下：

得到LottieAnimationView对象进行动画操作：

 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();

setAnimation()有三种方法，可以直接设置动画的Json对象，或者设置Json文件相对路径名，且支持设置缓存类型：

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）。

 // 代码这样写，需要设置图片的文件夹地址
 mAnimationView.setImageAssetsFolder("lottieweaccept/images");
 mAnimationView.setAnimation("lottieweaccept/WeAccept.json");
 mAnimationView.playAnimation();
 
 // 或者在布局文件中添加这句代码，指定图片路径
 app:lottie_imageAssetsFolder="lottieweaccept/images"

② 加载从网络获取的含有图片的动画资源，首先需要将资源下载到手机SD卡中

 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版本为例）：
  1. LottieAnimationView初始化的时候会首先创建LottieDrawable对象，private final LottieDrawable lottieDrawable = new LottieDrawable()。init()，进行初始化的时候，解析xml设置的属性。
  2. setAnimation(String fileName)，加载Json文件。
  3. 通过异步加载，最终会调用到fromJsonSync()对Json文件进行解析。
  4. 解析结果通过onCompositionLoaded()回调到主线程，然后会将Json数据转换成LottieComposition对象。
  5. lottieDrawable.setComposition()，将LottieComposition对象设置给LottieDrawable。
  6. 生成CompositionLayer对象，这个对象就是每一个图层的对象。
  7. 通过setImageDrawable(lottieDrawable)将图像显示出来，显示第一帧动画。
动画如何运行起来的？
- animationView.playAnimation();
  调用playAnimation()动画是如何动起来的，源码时序图如下（以2.2.0版本为例）：
  1. ValueAnimator实现的控制动画进度。
  2. setProgress实现的显示具体进度动画。
  3. LottieDrawable中的draw绘制图像，Canvas进行绘制。
为什么在列表中加载动画时设置了循环播放，item划走再划回来动画还是会停止播放？为什么添加app:lottie_autoPlay="true"才行？

我们来看看这两句代码，有没有什么问题？
```
  // 异步加载json文件
  animationView.setAnimation("hello-world.json");
  animationView.playAnimation();
  animationView.setSpeed(2f);
```
setAnimation是异步加载json文件的，调用setAnimation之后直接调用playAnimation()源码是如何保证加载完数据之后再开始动画呢？最终会走到LottieDrawable类中，如下：

性能问题

性能和内存
- 如果没有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) 。

全屏适配参考

Lottie -- 轻松实现动态加载直播礼物动画

LottieAndroid使用详解及源码解析—轻而易举实现各种复

一、Lottie简介

二、LottieAndroid的使用

三、LottieAndroid源码解析

四、可能遇到的问题会有哪些

一、Lottie简介

二、LottieAndroid的使用

三、源码解析

性能问题

全屏适配参考

猜你喜欢

热点阅读