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

相关文章
|
4天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
29 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
前端开发 Linux C#
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
115 10
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
3月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
62 2
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
3月前
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
746 6
|
3月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
107 0
|
4月前
|
Android开发 UED
Android 中加载 Gif 动画
【10月更文挑战第20天】加载 Gif 动画是 Android 开发中的一项重要技能。通过使用第三方库或自定义实现,可以方便地在应用中展示生动的 Gif 动画。在实际应用中,需要根据具体情况进行合理选择和优化,以确保用户体验和性能的平衡。可以通过不断的实践和探索,进一步掌握在 Android 中加载 Gif 动画的技巧和方法,为开发高质量的 Android 应用提供支持。
|
4月前
|
安全 Java 网络安全
Android远程连接和登录FTPS服务代码(commons.net库)
Android远程连接和登录FTPS服务代码(commons.net库)
61 1

热门文章

最新文章

  • 1
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
  • 2
    UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    移动端UI名词 - AxureMost
  • 5
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 6
    unity判断鼠标在不在UI上
  • 7
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 8
    Android历史版本与APK文件结构
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    14
  • 2
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    28
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 4
    Android历史版本与APK文件结构
    121
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 7
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    60
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121