Lottie动画概述,android基础教程

下面是Json的文件结构在这里插入图片描述

Lottie 的Json在线校验网站:传送门

下图是它的解析过程:

大致就是把Json转化成Java Bean,然后适用Drawable进行绘制。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191023154542314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Jpa2thdGhld29

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

ybGQ=,size_16,color_FFFFFF,t_70)

Android Lottie Demo


下面来实际操作一下,用Android来写一个Lottie动画。

第一步 导入Lottie动画库

注:如果使用2.8以上的版本,Android要升级至AndroidX

implementation ‘com.airbnb.android:lottie:3.1.0’

第二步 将Lottie的Json文件放到 assets文件下

在这里插入图片描述

第三步 在XML或者代码中使用

//xml:

<com.airbnb.lottie.LottieAnimationView

android:id="@+id/lottie_view"

android:layout_width=“300dp”

android:layout_height=“300dp”

android:layout_centerInParent=“true”/>

//Activity

lottieView = findViewById(R.id.lottie_view);

lottieView.setAnimation(“genius-avatar.json”);

lottieView.loop(true);

lottieView.playAnimation();

效果如下:

在这里插入图片描述

解析原理


这里就不讲,因为通篇都是解析Json文件的。

但是我们可以看看 Lottie主要使用到的类和它们的作用:

在这里插入图片描述

首先,LottieDrawable会分出很多图层,然后用图层管理者 CompositionLayers去分别进行绘制。

绘制的时候根据时间,计算每个时间点的 关键帧。这个时候用到了我们在属性动画所学过的 KeyFrame 关键帧处理类

在这里插入图片描述

Lottie的优势


从它的概念,我们不难看出它有这一些优势,让我们在一些情况下选择它更明智:

  1. 性能上:

从我们去用它的代码上看,Android端的实现是基于Drawable,IOS端是基于Layer,最终都是对canvas的操作。所以 程序的操作就是 Lottie对Json进行解析,它使用的是Core Animation的Api进行渲染得到帧动画,比原生帧动画还原度高、性能更好。

所以整个流程下来,除开解析Json文件,并无太多的性能损耗。

经测试:在没有开启硬件加速的情况下,帧率、内存、CPU都比属性动画差,开启硬件加速后,性能就差不多

  1. 存储上:

因为是json的形式,所以相比于 动则几M的 GIF图,它完全可以取代。

  1. 灵活性:

在拿到Json后,我们甚至可以通过修改Json来修改动画的一些 颜色、路径等,一个动画在不同的界面能表现出不同的形式,所以它的更新是非常灵活的。

  1. API完整:

它也有自己的 播放、控制进度、暂停,还可以缓存、添加额外的原生UI等。

  1. 兼容:

Android: API16+

IOS : IOS8+ /MacOS 10.10+

WEB:调用Bodymovin提供的js库 — bodymovin.js。

  1. 对程序员很友好

把制作动画的任务转移到 UI兄弟上,以后写不出或者的动画,就可以喊一句:既然是你们ui设计的,那你们ui用Lottie来做啊。

程序这边做的只需导入+播放了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值