让UI忙碌的安卓Lottie动画渲染库(二)

简介: 上节我们讲述了Lottie开源库如何导入Android Studio但是,开源库是不断迭代的,所以我们也要及时更新

前言

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

相关文章
|
10月前
|
Android开发 开发者
Android利用SVG实现动画效果
本文介绍了如何在Android中利用SVG实现动画效果。首先通过定义`pathData`参数(如M、L、Z等)绘制一个简单的三角形SVG图形,然后借助`objectAnimator`实现动态的线条绘制动画。文章详细讲解了从配置`build.gradle`支持VectorDrawable,到创建动画文件、关联SVG与动画,最后在Activity中启动动画的完整流程。此外,还提供了SVG绘制原理及工具推荐,帮助开发者更好地理解和应用SVG动画技术。
478 30
|
10月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
649 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
10月前
|
API Android开发 开发者
Android颜色渐变动画效果的实现
本文介绍了在Android中实现颜色渐变动画效果的方法,重点讲解了插值器(TypeEvaluator)的使用与自定义。通过Android自带的颜色插值器ArgbEvaluator,可以轻松实现背景色的渐变动画。文章详细分析了ArgbEvaluator的核心代码,并演示了如何利用Color.colorToHSV和Color.HSVToColor方法自定义颜色插值器MyColorEvaluator。最后提供了完整的源码示例,包括ColorGradient视图类和MyColorEvaluator类,帮助开发者更好地理解和应用颜色渐变动画技术。
317 3
|
6月前
|
存储 消息中间件 人工智能
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
415 4
|
10月前
|
Android开发 开发者
Android SVG动画详细例子
本文详细讲解了在Android中利用SVG实现动画效果的方法,通过具体例子帮助开发者更好地理解和应用SVG动画。文章首先展示了动画的实现效果,接着回顾了之前的文章链接及常见问题(如属性名大小写错误)。核心内容包括:1) 使用阿里图库获取SVG图形;2) 借助工具将SVG转换为VectorDrawable;3) 为每个路径添加动画绑定属性;4) 创建动画文件并关联SVG;5) 在ImageView中引用动画文件;6) 在Activity中启动动画。文末还提供了完整的代码示例和源码下载链接,方便读者实践操作。
479 65
|
10月前
|
XML Java Maven
Android线条等待动画JMWorkProgress(可添加依赖直接使用)
这是一篇关于Android线条等待动画JMWorkProgress的教程文章,作者计蒙将其代码开源至GitHub,提升可读性。文章介绍了如何通过添加依赖库使用该动画,并详细讲解了XML与Java中的配置方法,包括改变线条颜色、宽度、添加文字等自定义属性。项目已支持直接依赖集成(`implementation 'com.github.Yufseven:JMWorkProgress:v1.0'`),开发者可以快速上手实现炫酷的等待动画效果。文末附有GitHub项目地址,欢迎访问并点赞支持!
295 26
|
10月前
|
XML Android开发 数据格式
Android中SlidingDrawer利用透明动画提示效果
本文介绍了在Android中使用`SlidingDrawer`实现带有透明动画提示效果的方法。通过XML布局配置`SlidingDrawer`的把手(handle)和内容(content),结合Activity中的代码实现动态动画效果。最终实现了交互性强、视觉效果良好的滑动抽屉功能。
139 1
Android中SlidingDrawer利用透明动画提示效果
|
10月前
|
XML Java Android开发
Android 动画之帧动画 + 补间动画 + 属性动画
本文介绍了Android开发中的三种动画类型:帧动画、补间动画和属性动画。帧动画通过依次播放一系列静态图片实现动态效果,支持Java代码与XML两种实现方式。补间动画基于起始和结束位置自动生成过渡效果,涵盖透明度、位移、旋转、缩放及组合动画等多种形式,并可搭配插值器优化动画过程。属性动画则通过改变对象属性实现动画,支持透明度、位移、旋转、缩放及组合动画,灵活性更高且适用于更复杂的场景。文中提供了详细的代码示例,帮助开发者快速上手。
488 15
|
9月前
|
JavaScript 前端开发 开发者
09.HarmonyOS Next数据驱动UI开发:ForEach与动态渲染完全指南(上)
在现代前端开发中,数据驱动UI已成为主流开发范式。HarmonyOS Next的ArkTS语言和声明式UI框架完美支持这一理念,使开发者能够以更高效、更直观的方式构建复杂应用。
259 1
|
10月前
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
172 0
Android自定义view之围棋动画(化繁为简)