美文网首页Android好文收录Android Tips程序员
LottieAndroid使用详解及源码解析—轻而易举实现各种复

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

作者: Moninn | 来源:发表于2017-10-11 18:53 被阅读587次

    写在前面，对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基本用法查看官方文档

        1. 首先将json文件放到assets文件夹下：

          可以直接放到assets目录下，或者在assets目录下创建一个二级目录放在二级目录下。

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

        3. 得到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()有三种方法： 支持三种缓存类型，不缓存、弱类型和强类型：

        4. 添加动画监听

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

      • 其他用法

        1. 自定义动画的速率和时长

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

        2. 给整个动画添加一个特定图层，或者一个图层的特定内容添加一个颜色过滤器

           // 任何符合颜色过滤界面的类
 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();

        3. 在列表中添加动画，每个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"/>

        4. 从网络直接获取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();
         }
     }
 });

        5. 加载含有图片的复杂文件

          有些动画比较复杂不是简单的线条、图块所能实现的，这样的动画通过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) 。

    全屏适配参考

    相关文章

      网友评论

      • Vva的猫:你这博客写的很详细，也蛮好的，唯一觉得不够完美的是，如果能对应加上个动态效果图就更好了，至少让我知道用了这个框架能做出个啥样的东西吧😁😁
        Moninn:@l仗剑走天涯 说的有道理，回头加上

      本文标题：LottieAndroid使用详解及源码解析—轻而易举实现各种复

      本文链接：https://www.haomeiwen.com/subject/giywyxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      Android好文收录

      Android Tips

      程序员

      Android开发

      Android开发经验谈

      Android进阶之路

      Android知识

      Android进阶

      关于我们|服务条款|联系我们|LottieAndroid使用详解及源码解析—轻而易举实现各种复|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！