Lottie动画概述
这里东Copy,西Copy一下 Lottie 的特点。
学习的blog有:Lottie调研小结
Lottie的基本用法及原理分析
添加链接描述
Lottie的概念
原生的动画效果有时候写起来会非常的复杂,要考虑到很多兼容和效果。Lottie动画专门为了解决这种烦恼而产生的。
(注:不仅是Lottie可以做到,另外一种库也可以做到将动画分成一帧一帧展示,它就是 android-gif-drawable
库,不过他适用的平台只有Android)
Lottie就是一个开源动画库,它的属性是这样的:
- 首先,它的编写平台并不是专门的程序IDE,而是绘图软件
AE(After Effects)
,所以绘制的工作就从程序员手上交给了美工的兄弟。美工在AE上完成动画后,将 输出 通过AE上的插件,转化成Json格式
。这就有点像SVG矢量图,它既可以是个svg格式的图片,又可以变成 代码的形式让程序进行操控其属性(颜色、路径等等)。(附SVG讲解:Android自定义控件开发入门与实战(7)SVG动画) - 因为转化成了Json格式,所以 它变得更加 轻便了 ,并且可以使用的平台也会变多,一套Json代码可以
Android、IOS、RN、Web
平台都可以使用Lottie动画。
Lottie的制作流程如下:
Lottie Json在Java中的形象
下面是Json的文件结构
:
Lottie 的Json在线校验网站:传送门
下图是它的解析过程:
大致就是把Json转化成Java Bean,然后适用Drawable进行绘制。
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.LottieAnimationViewandroid: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的优势
从它的概念,我们不难看出它有这一些优势,让我们在一些情况下选择它更明智:
- 性能上:
从我们去用它的代码上看,Android端的实现是基于Drawable,IOS端是基于Layer,最终都是对canvas的操作。所以 程序的操作就是 Lottie对Json进行解析,它使用的是Core Animation
的Api进行渲染得到帧动画,比原生帧动画还原度高、性能更好。
所以整个流程下来,除开解析Json文件,并无太多的性能损耗。
经测试:在没有开启硬件加速的情况下,帧率、内存、CPU都比属性动画差,开启硬件加速后,性能就差不多 - 存储上:
因为是json的形式,所以相比于 动则几M的 GIF图,它完全可以取代。 - 灵活性:
在拿到Json后,我们甚至可以通过修改Json来修改动画的一些 颜色、路径等,一个动画在不同的界面能表现出不同的形式,所以它的更新是非常灵活的。 - API完整:
它也有自己的 播放、控制进度、暂停,还可以缓存、添加额外的原生UI等。 - 兼容:
Android: API16+
IOS : IOS8+ /MacOS 10.10+
WEB:调用Bodymovin提供的js库 — bodymovin.js。 - 对程序员很友好
把制作动画的任务转移到 UI兄弟上,以后写不出或者的动画,就可以喊一句:既然是你们ui设计的,那你们ui用Lottie来做啊。
程序这边做的只需导入+播放了。
Lottie的不足
- 据说AE那边 专门导出 Json格式的插件
Bodymovin
还是有些问题的。部分AE效果无法导出 - 部分json解析后效果在移动端上 表现并不是很好。这还是因为 lottie对Json的支持并不是特别完善。
适用场景
虽然是个动画,但也不是每个地方都能用,其实它就跟GIF一样,是在特殊的情况下使用
- 酷炫的 App展示页(SplashActivity)
- 加载时的 过场(就是如果不想用简单的转菊花圈圈,就可以使用这样的酷炫动画)
- 修饰
比如一个 用来展示某种东西的View,你在它的上一层加一个Lottie动画,就变得更加的突出。
Lottie动画概述相关推荐
- 程序员也想改 Lottie 动画?是的!
一.前言 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,用过都说好.完全解耦开发人员和设计师,让设计师设计的动画,在程序中无缝还原,真是一旦拿 ...
- android jason动画,Android 动画之Lottie动画使用
Android 动画之Lottie动画使用 一:简介 Lottie是Airbnb开源的一套跨平台的完整解决方案,设计师只需要使用After Effects(简称AE)设计动画之后,使用Lottic提供 ...
- flutter 动画json_Flutter 50: 图解动画小插曲之 Lottie 动画
和尚在一年前整理过一点 Lottie 在 Android 中的应用,现在 Flutter 也有相关的插件帮助我们快速简单的应用场景复杂的 Lottie 动画: 和尚在官网查询之后发现官网推荐了两个开源 ...
- lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量
lottie 动画 A quick getting started guide 快速入门指南 I recently took on a project where the team wanted to ...
- 在VUE中使用Lottie动画
Lottie简介 官方介绍:Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations ...
- Lottie 动画导出为 GIF/MP4 以及与 QML 集成演示
获取 Lottie 动画文件 lottiefiles 是一个很好的网站, 从上面可以下载到别人分享的 lottie 动画文件. 我们可以下载到多种格式, 下面分别讲解每个格式的下载和适用情景. 下载 ...
- 记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要 最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
- 前端实现lottie动画
前端实现lottie动画 ul通过AE生成的json文件 ,前端通过lottie实现动画简单快捷 <div class="box"></div> 引入 &l ...
- Jetpack Compose 中使用 Lottie 动画
从事 Android 开发的 都知道 airbnb 的 Lottie 库,如今它也支持在 Jetpack Compose 中使用了. http://airbnb.io/lottie/#/android ...
最新文章
- 企业中常用的几种文件传输方法介绍
- 自定义Flume拦截器,并将收集的日志存储到Kafka中(案例)
- Android---- 获取当前应用的版本号和当前android系统的版本号
- elf 取路径_c – 获取主要可执行文件的ELF标题
- 控制台输入一个整数,取该整数的各位数,判断其是否能被该整数整除,能则返回true,不能则返回false
- CCNA笔记之第十四节:RIP协议(1)
- Hegic Q1报告:TVL接近6000万美元,日交易量达2200万美元创新高
- 华铭智能属于芯片概念吗_华铭智能:子公司1个亿参股边缘计算独角兽九次方大数据!...
- VMware系统运维(十一)部署虚拟化桌面 Horizon View 5.2 HTML ACCESS安装
- html5直线逆时针旋转45,逆时针旋转45°后的图形.PPT
- 十进制计算机算法,计算机知识--二进制,十进制,十六制算法
- Carryon 数数字
- Latest for Mac 0.7.3 应用更新管理器
- vPro平台再进化:专为商务而生,助力企业数字化大时代
- python之matplotlib 3.2.1之spines不显示右侧和顶端的坐标轴
- 冯东阳:解读纯文本链接到底算不算外链
- 一般试卷的纸张大小是多少_试卷,考试试卷是多大的纸
- excel组合汇总_Excel汇总20150202
- 抖音上超火的3D立体动态相册表白特效(29)
- 使用 SAXReader.read() 获取xml 失败