前言
上节我们讲述了Lottie开源库如何导入Android Studio但是,开源库是不断迭代的,所以我们也要及时更新,这方面可以通过官方得知GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native:
当然安卓如果想更新可以通过这个地方应用更新:
更新的问题解决后,我们来说说如何在安卓开发中使用它。
正篇
逻辑代码控制基础
播放动画
首先,上节我们已经讲述了如何在布局中使用,但在我们逻辑代码上也有控制逻辑,方便我们更好的控制动画,而不是xml上那几个属性:
第一步,先调用setAnimation()和playAnimation()方法去实现播放我们的动画
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等功能
或第三个方法:
就是使用我们国内的平台,访问由阿里提供的犸良平台,同样能创建动画并支持支付宝扫描预览。
作者比较菜,还不能去包揽UI的活,所以在家实际只能去使用第二个方法找现成的资源:Featured animations from our community (lottiefiles.com)点击下载,前面两个选项都行,后一种是更加节省控件提升效率的新版推荐方式,不过要钱,作者体验当然选第一个下载方式
下载好Lottie的JSON格式文件重命名成你想要的,然后在项目的app下的main文件夹创建assets文件夹和子文件夹lottie放入我们的json:
回归正题-逻辑控制方法说明
监听动画流程方法
这样我们就可以正常的调起动画了,此外还提供了监听动画事件的方法,这里代码是进度监听的方法:
vGif.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float progress = animation.getAnimatedFraction();//播放进度 // TODO: } });
我们可以使用addAnimatorListener()方法以监听动画开始、结束、取消、重复等事件:
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()方法去直接设置去动画哪个地方画面展示:
LottieAnimationView vGif = findViewById(R.id.lt_gift); // 代码设置动画文件 vGif.setAnimation("lottie/gift.json"); // 不需要调用playAnimation,可直接展示该进度的动画效果 vGif.setProgress(0.5f);
还能调用addLottieOnCompositionLoadedListener()方法监听JSON文件加载完成,知晓动画何时开始加载:
vGif.addLottieOnCompositionLoadedListener(new LottieOnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { //此时渲染了动画第一帧 } });
其他方法
这里再列举两个其他方法: 第一种,动画是否采用硬件加速,这个在绘制图片的时候应该就了解过,有些地方安卓硬件加速不太适配:
// 硬件加速开关(默认RenderMode.Automatic,采用硬件加速,而软件加速为RenderMode.SOFTWARE) vGif.setRenderMode(RenderMode.HARDWARE);
下面这个方法还是使用Lottie动画时比较容易使用到的,可以调用setAnimationFromUrl()方法使用url将JSON文件通过网络下载的方式加载动画,不过要考虑一些性能问题,贵在灵活可配置,也是点睛之笔:
// 将json文件下载到本地,再进行渲染,需要考虑耗时长的情况 vGif.setAnimationFromUrl("");
可配合网络url配置,不需要下载到本地:
此外,还可以使用LottieCompositionCache缓存机制,可以加速加载动画,不过作者还菜,目前还没看源码和各大博主的方法,所以仅在此提及
追随时尚,采用Kotlin写法
除了经典Java写法,这里再附上作者自己在学的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("");
效果展示
最后放一下效果展示:
怎么样,还不错吧!其实如果仅仅只是加载动画,上一节就够用(让UI忙碌的安卓Lottie动画渲染库(一) - 掘金 (juejin.cn)),毕竟放在XML布局上就可以正常使用了,还是非常好用的,就是有点费UI设计师。 另外要注意安卓xm布局中使用开源库要在整体布局的开头加一句:
xmlns:app="http://schemas.android.com/apk/res-auto"
不然使用app: 语句会报红哦!
总结
尽管Lottie使用方法很简单,但要说明这些方法的使用和学习,导致本篇文章很长,这里基本上将我网上所能找到都找了一遍,再结合源码阅读纠正,虽然可能有遗漏,但是结合作者体验,应该都是正确的,耗费了作者很多时间,但也方便了以后回顾以及继续学习的掘友们,希望大家能点点赞,多和作者交流沟通,指正作者的问题,感谢各位观看支持!