Lottie——强大的动画渲染框架
概述
Airbnb开源的强大的动画框架,适用于Android,IOS,React Native和Web。可以使用AE导出的JSON格式的动画,并解析为原生动画效果。
特点:
跨平台 —— 一份动画效果,多平台通用。
多种方式导入动画效果 —— 可从assets,sdcard,网络加载动画资源,支持动态更新。
原生实现
之前在Android中要实现相对复杂的动画效果一般有三种方式:
1.帧动画,在程序中添加N张动画图片,通过帧动画实现动画效果,缺点是图片太多导致apk过大。
2.Gif,使用动画gif实现动画效果,但是android原生对gif支持不好,而且比较占用系统资源,在低性能设备上效果较差。
3.通过自定义控件和图片实现,通过复杂的动画实现逻辑,实现效果。缺点实现方式繁琐,代码封装性通常不好,动画效果稍微变更,就需要大量的修改实现逻辑。
优势
Lottie相对于原生的动画实现方式的优势:
1.需要很少的图片资源就可以实现复杂的动画效果,甚至不需要图片资源。
2.平台兼容性好,不需要做平台和分辨率的适配工作。
3.可以很方便的加载动画文件,甚至可以实现动态更新。
4.只需要从AE导出动画Json文件即可实现动画效果,极大的减少了开发的工作量。
Lottie在Android的使用
GitHub和官方文档
GitHub:https://github.com/airbnb/lottie-android
官方文档:http://airbnb.io/lottie/#/android
动画广场:https://lottiefiles.com/marketplace/animators?page=1
众多动画师开源了大量的动画效果。
添加依赖
dependencies {implementation 'com.airbnb.android:lottie:$lottieVersion'
}
lottieVersion版本以官网和GitHub上发布的版本为准,需要注意的是:
Lottie 2.8.0 and above only supports projects that have been migrated to androidx. For more information, read Google’s migration guide.
2.8.0及更高版本只支持配合androidx使用。
核心类
- LottieAnimationView extends ImageView and is the default and simplest way to load a Lottie animation.
- LottieDrawable has most of the same APIs as LottieAnimationView but you can use it on any View you want.
- LottieComposition is the stateless model repesentation of an animation. You can create one with LottieCompositionFactory and set it on a LottieDrawable or LottieAnimationView.
简单总结一下就是:
LottieAnimationView 继承ImageView封装了一下播放Lottie动画的方法,可以简便的实现Lottie动画效果。
LottieDrawable Lottie动画的Drawable封装类,可以在需要播放动画的View上使用。
LottieComposition 可以简单理解为Lottie Json文件对应的实体类。
LottieCompositionFactory Lottie对象的工厂类,用于构建Lottie对象。可以从assets、sdcard和网络加载json文件、json zip和json String等数据构建Lottie对象。
使用
XML
<com.airbnb.lottie.LottieAnimationViewandroid:id="@+id/lottie_view"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/btn5"app:lottie_autoPlay="true"//设置assets文件夹位置,默认assets根目录app:lottie_imageAssetsFolder="lottie/"//从src/main/assets中加载动画文件app:lottie_fileName="test.json"app:lottie_loop="true"//从src/main/res/raw中加载动画文件app:lottie_rawRes="@raw/test"//从网络连接中加载动画文件app:lottie_url="https://assets7.lottiefiles.com/packages/lf20_Hy2FuX.json" />
Lottie中针对从网络链接获取动画文件做了封装,可以很方便的从网络加载动画效果。
代码
LottieAnimationView的使用:
//设置assets文件目录
lottieAnimationView.setImageAssetsFolder("lottie");
//设置assets下的动画文件
lottieAnimationView.setAnimation("test.json");
//设置网络url
lottieAnimationView.setAnimationFromUrl("https://assets7.lottiefiles.com/packages/lf20_Hy2FuX.json");
//开始播放
lottieAnimationView.playAnimation();
设置动画监听:
lottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}
});lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {}
});
LottieCompositionFactory和LottieDrawable就不展开讲了使用都比较简单,看API文档基本都能理解。
详细使用看官方介绍:http://airbnb.io/lottie/#/android
Lottie——强大的动画渲染框架相关推荐
- 第二章 核心动画渲染框架
虽然核心动画的图层和Cocoa的视图在很大程度上没有一定的相似性,但是他们两者最大的区别是,图层不会直接渲染到屏幕上. 在模型-视图-控制器(model-view-controller)概念里面NSV ...
- Android动画渲染过程及原理(matrix),matrix动画,动画优化
-- 矩阵(Matrix), Matrix动画 矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合,最早来自于方程组的系数及常数所构成的方阵.在物理学中,矩阵于电路学.力学.光学和量子物理中都 ...
- Android Framework 窗口子系统 (08)窗口动画之动画系统框架
该系列文章总纲链接:专题分纲目录 Android Framework 窗口子系统 本章关键点总结 & 说明: 导图是不断迭代的,这里主要关注➕ 左上角 Android 窗口动画系统部分(因为导 ...
- iOS之深入探究动画渲染降帧
一.为什么要对动画降帧? 众所周知,刷新频率越高体验越好,对于 iOS app 的刷新频率应该是越接近越 60fps 越好,主动给动画降帧,肯定会影响动画的体验.但是另一方面,我们也知道动画渲染的过程 ...
- DirectX12(D3D12)基础教程(十七)——让小姐姐翩翩起舞(3D骨骼动画渲染【1】)
目录 1.前言 2.本章代码简要说明 1.前言 经过了一系列比较枯燥的命令行式的"外篇"系列教程后,这一篇起回归主干,继续我们的D3D12之旅,本章就利用已经学习的assimp ...
- iOS 视图,动画渲染机制探究
腾讯Bugly特约作者:陈向文 终端的开发,首当其冲的就是视图.动画的渲染,切换等等.用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅.UI就是 App 的门面,它的体验 ...
- 三维动画渲染用什么软件好?
三维渲染是通过计算机应用程序把 3D 模型生成图像(照片级真实感或非照片级真实感)的自动化过程, 三维动画渲染是动画制作过程的最后一步,该过程将各种视觉效果应用于最终模型,例如阴影.纹理.灯光反射和运 ...
- Android 炫酷动画APP,21 款炫酷动画开源框架,照亮你的APP
原标题:21 款炫酷动画开源框架,照亮你的APP 2017年安卓巴士全球开发者论坛-上海站 前言 最近对应用的UI视觉效果突然来了兴致,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对 ...
- 硬盘大涨价?CG动画渲染师:云存储更香了
杨净 边策 发自 凹非寺 量子位 报道 | 公众号 QbitAI 挖矿的现在连硬盘都不放过了. 一块大容量硬盘涨价超过了100%,做视频的朋友现在是叫苦不迭. u1s1(有一说一),云存储现在好像有点 ...
最新文章
- salt-api https证书报错解决方法
- hashmap转红黑树的阈值为8_面试必问的HashMap,一次彻底帮你搞定HashMap源码
- LYVC揭秘硅谷核心基金圈投资游戏规则
- redis 本机链接服务端命令
- Spring : Spring 事务控制 设置手动回滚 TransactionAspectSupport
- java笔试面试题(五)
- 活动目录的介绍:深入浅出Active Directory系列(一)
- 未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。
- mysql-connector-java 5.1.13,Java连MySQL,mysql-connector-java-5.1.13-bin.jar究竟要怎
- 240.搜索二维矩阵II
- 支持simnow模拟,特别适合炒单使用的CTP期货交易终端(看穿式)
- linux串口结构termios,struct termios结构体—Linux串口.doc
- Ripple相关资源汇总
- 服务器中的软件如何备份文件夹在哪里找,PS的自动备份文件保存位置在哪里?
- 30天自制操作系统笔记--Day01
- 怎么计算java对象的大小?
- Android 百度地图 SDK v3.0.0 (四) 引入离线地图功能
- Kong插件开发向导
- Linux内存管理(二)
- 打印机显示:错误,正在打印
热门文章
- C/C++之cstring头文件
- Portapack应用开发教程(十八)NavTex接收 B
- 018 cisco 3560 MAC地址绑定
- 高校竞赛排行榜---大学生能参加哪些比赛你都知道吗? (适合各个专业)了解 还是 错过 ?
- tcp硬件校验和rxtx开启是啥意思_一文读懂 TCP/IP 网络模型
- 2022-2028全球及中国即时定位与地图构建机器人行业研究及十四五规划分析报告
- 灰色关联度分析excel步骤_技术 | 基于灰色关联与粗糙依赖度的甘肃兰州市区泥石流危险性评价...
- 2019高教社杯全国大学生数学建模竞赛论文展示
- qt 编译器 调试器
- idea Java doc生成 配置