让UI忙碌的安卓Lottie动画渲染库（二）

语言: CN / TW / HK
时间 2023-01-03 13:15:06

theme: condensed-night-purple

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情，希望大家多多支持，帮忙点个赞，谢谢！

前言

上节我们讲述了Lottie开源库如何导入Android Studio但是，开源库是不断迭代的，所以我们也要及时更新，这方面可以通过官方得知GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native：

image.png 当然安卓如果想更新可以通过这个地方应用更新：

image.png

image.png

更新的问题解决后，我们来说说如何在安卓开发中使用它。

正篇

逻辑代码控制基础

播放动画

首先，上节我们已经讲述了如何在布局中使用，但在我们逻辑代码上也有控制逻辑，方便我们更好的控制动画，而不是xml上那几个属性：\ 第一步，先调用setAnimation()和playAnimation（）方法去实现播放我们的动画 Java LottieAnimationView vGif = findViewById(R.id.lt_gift); // 代码设置动画文件 vGif.setAnimation("lottie/gift.json"); // 开始播放动画，首次播放会有短暂延迟，因为加载动画文件需要时间 vGif.playAnimation();

题外话-JSON动画文件的获取方法

上述代码中用到的gift.json文件需要UI设计师去提供，当然可能UI设计师也不知道怎么去做，也有可能我们是在家中学习，没有UI设计师帮你做JSON动画文件，所以下面先插个话题。\ UI设计师或是在家实践的掘友们可以通过三种方式获取到我们Lottie库可用的JSON动画文件:\ 第一个方法步骤如下：先从AE导出Json文件，Lotti 解析Json文件后调Core Animation的API绘制渲染，这个办法适合会使用AE的专业UI设计师。\ 如果不会AE，那就可以用第二个方法：\ 访问由DesignBarn公司推出的Lottie动画社区，查找我们需要的动画，不仅可以下载还支持编辑、预览、生成GIF等功能\ 或第三个方法:\ 就是使用我们国内的平台，访问由阿里提供的犸良平台，同样能创建动画并支持支付宝扫描预览。

image.png

image.png 作者比较菜，还不能去包揽UI的活，所以在家实际只能去使用第二个方法找现成的资源： Featured animations from our community (lottiefiles.com) 点击下载，前面两个选项都行，后一种是更加节省控件提升效率的新版推荐方式，不过要钱，作者体验当然选第一个下载方式 image.png 下载好Lottie的JSON格式文件重命名成你想要的，然后在项目的app下的main文件夹创建assets文件夹和子文件夹lottie放入我们的json：

image.png image.png

回归正题-逻辑控制方法说明

监听动画流程方法

这样我们就可以正常的调起动画了，此外还提供了监听动画事件的方法,这里代码是进度监听的方法： Java vGif.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float progress = animation.getAnimatedFraction();//播放进度 // TODO: } }); 我们可以使用addAnimatorListener()方法以监听动画开始、结束、取消、重复等事件： ```Java vGif.playAnimation(); //播放 vGif.pauseAnimation(); //暂停 vGif.cancelAnimation(); //取消 vGif.getDuration(); //获取动画时长 vGif.addAnimatorListener(new Animator.AnimatorListener() { //添加动画监听 @Override public void onAnimationStart(Animator animation) {

  }

  @Override
  public void onAnimationEnd(Animator animation) {

  }

  @Override
  public void onAnimationCancel(Animator animation) {

  }

  @Override
  public void onAnimationRepeat(Animator animation) {

  }
});

```

设置动画进度方法

我们可以调用setProgress()方法去直接设置去动画哪个地方画面展示： Java LottieAnimationView vGif = findViewById(R.id.lt_gift); // 代码设置动画文件 vGif.setAnimation("lottie/gift.json"); // 不需要调用playAnimation，可直接展示该进度的动画效果 vGif.setProgress(0.5f); 还能调用addLottieOnCompositionLoadedListener()方法监听JSON文件加载完成，知晓动画何时开始加载： Java vGif.addLottieOnCompositionLoadedListener(new LottieOnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { //此时渲染了动画第一帧 } });

其他方法

这里再列举两个其他方法： 第一种，动画是否采用硬件加速，这个在绘制图片的时候应该就了解过，有些地方安卓硬件加速不太适配：

image.png

image.png Java // 硬件加速开关（默认RenderMode.Automatic,采用硬件加速，而软件加速为RenderMode.SOFTWARE） vGif.setRenderMode(RenderMode.HARDWARE); 下面这个方法还是使用Lottie动画时比较容易使用到的，可以调用setAnimationFromUrl()方法使用url将JSON文件通过网络下载的方式加载动画，不过要考虑一些性能问题，贵在灵活可配置，也是点睛之笔： Java // 将json文件下载到本地，再进行渲染，需要考虑耗时长的情况 vGif.setAnimationFromUrl(""); 可配合网络url配置，不需要下载到本地：

image.png

此外，还可以使用LottieCompositionCache缓存机制，可以加速加载动画，不过作者还菜，目前还没看源码和各大博主的方法，所以仅在此提及

追随时尚，采用Kotlin写法

除了经典Java写法，这里再附上作者自己在学的Kotlin写法，自己写的，没有校验，如有不规范之处望请指教： ```Kotlin val vGif : LottieAnimationView = findViewById(R.id.lt_gift); vGif.setAnimation("lottie/gift.json") vGif.addAnimatorUpdateListener { animation -> var progress = animation.animatedFraction;//播放进度 //TODO: }

vGif.playAnimation() //播放

vGif.pauseAnimation() //暂停

vGif.cancelAnimation() //取消

vGif.duration //获取动画时长

vGif.addAnimatorListener(object : Animator.AnimatorListener { //添加动画监听 override fun onAnimationStart(animation: Animator) {} override fun onAnimationEnd(animation: Animator) {} override fun onAnimationCancel(animation: Animator) {} override fun onAnimationRepeat(animation: Animator) {} })

// 不需要调用playAnimation，可直接展示该进度的动画效果 vGif.progress = 0.5f;

vGif.addLottieOnCompositionLoadedListener { //此时渲染了动画第一帧 }

// 硬件加速开关（默认RenderMode.Automatic,采用硬件加速，而软件加速为RenderMode.SOFTWARE） vGif.renderMode = RenderMode.HARDWARE;

// 将json文件下载到本地，再进行渲染，需要考虑耗时长的情况 vGif.setAnimationFromUrl(""); ```

效果展示

最后放一下效果展示:

tutieshi_608x1080_9s.gif 怎么样，还不错吧！其实如果仅仅只是加载动画，上一节就够用（让UI忙碌的安卓Lottie动画渲染库（一） - 掘金 (juejin.cn)），毕竟放在XML布局上就可以正常使用了，还是非常好用的，就是有点费UI设计师。 另外要注意安卓xm布局中使用开源库要在整体布局的开头加一句： XML xmlns:app="http://schemas.android.com/apk/res-auto" image.png 不然使用app: 语句会报红哦！

总结

尽管Lottie使用方法很简单，但要说明这些方法的使用和学习，导致本篇文章很长，这里基本上将我网上所能找到都找了一遍，再结合源码阅读纠正，虽然可能有遗漏，但是结合作者体验，应该都是正确的，耗费了作者很多时间，但也方便了以后回顾以及继续学习的掘友们，希望大家能点点赞，多和作者交流沟通，指正作者的问题，感谢各位观看支持！

「」
「」