Lottie 动画
#### 三方框架之Lotti使用
Lottie 的使用
1、添加 Gradle 依赖
dependencies { compile 'com.airbnb.android:lottie:1.5.3'}
2、使用View
Lottie支持Jellybean(API 16)及以上。最简单的使用方法是LottieAnimationView
< com .airbnb.lottie.LottieAnimationView
android :id = “ @ + id / animation_view ”
android :layout_width = “ wrap_content ”
android :layout_height = “ wrap_content ”
app :lottie_fileName = “ hello-world.json ”
app :lottie_loop = “ true “
app :lottie_autoPlay = ” true “ />
}
或者从 代码中加载。 从 app / src / main / assets中的json资源:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
如果你想复用动画,比如在列表中的每个项目或者从网络请求加载JSONObject
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
...
Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {
animationView.setComposition(composition);
animationView.playAnimation();
});
然后控制动画执行或者对动画添加监听
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
// Do something.
}
...
animationView.setProgress(0.5f);
...
// 自定义动画的速度和持续时间
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
.setDuration(500);
animator.addUpdateListener(animation -> {
animationView.setProgress(animation.getAnimatedValue());
});
animator.start(); // 动画开始
...
animationView.cancelAnimation(); // 关闭
支持 After Effects 的功能
关键的插值器
- Linear Interpolation 线性插值器
- Bezier Interpolation 贝塞尔插值器
- Hold Interpolation 保持插值器
Rove Across Time
Spatial Bezier
固定变换
- Transform Anchor Point 锚点变换
- Transform Position 位置变换
- Transform Scale 伸缩比例变换
- Transform Rotation 旋转变换
- Transform Opacity 透明度变换
遮罩 (碉堡了!)
Path 路径
- Opacity 不透明度
- Multiple Masks (additive, subtractive, inverted) 多重多样的遮罩
Track
- Alpha Matte 透明度遮罩
Parenting
Multiple Parenting
Nulls
图层形状
- Rectangle (All properties) 矩形
- Ellipse (All properties) 椭圆
- Polystar (All properties) 北极星?什么鬼
- Polygon (All properties. Integer point values only.) 多边形
- Path (All properties) 路径
Anchor Point 锚点
Position 位置坐标
Scale 缩放
Rotation 旋转
Opacity 不透明
Group Transforms (Anchor point, position, scale etc) 合成变换
Multiple paths in one group 多路径合成
冲程(形状层,外层)
- Stroke Color 描边颜色
- Stroke Opacity 不透明描边
- Stroke Width 描边宽度
- Line Cap 压线帽
- Dashes 破折号
填充
- Fill Color 填充颜色
- Fill Opacity 填充不透明度
修剪路径
- Trim Paths Start
- Trim Paths End
- Trim Paths Offset
性能和内存
1、如果组合没有用到遮罩masks或mattes,那么性能和内存开销应该相当不错。没有创建位图bitmap,大多数操作都是简单的画布操作。
2、如果组合中有遮罩masks或mattes,将在合成的地方创建2-3个bitmap,当动画师徒添加到view时,bitmap由lotti自动创建,并在View删除时被回收。所以不建议在RecyclerView中使用带有遮罩masks或mattes的动画,可能会造成溢出。(后面看到git又把这一条更新掉了,索性还是贴上来吧)!后来看到Git更新为:如果组合有遮罩或遮罩,将使用屏幕外缓冲区,画面以外的缓冲区的使用和性能会有影响了。
3、如果在list中使用,建议在LottieAnimationView.setAnimation(String,CacheStrategy)中使用CacheStrategy,因此动画不必每次都反序列化。
Lottie 动画的更多相关文章
- Android之Lottie动画详解
文章大纲 一.Lottie介绍二.Lottie实战三.项目源码下载四.参考文章 一.Lottie介绍 1. 什么是Lottie Lottie是Android和iOS的移动库,用于解析Adobe ...
- 程序员也想改 Lottie 动画?是的!
一.前言 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,用过都说好.完全解耦开发人员和设计师,让设计师设计的动画,在程序中无缝还原,真是一旦拿 ...
- Lottie 动画里有图片怎么办?设计师小姐姐也能帮你减少开发量!
一.序 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整解决方案,设计师只需要使用 After Effectes (之后简称 AE)设计出动画之后,使用 Lotti ...
- [UWP]缓存Lottie动画帧
在上一篇博文<[UWP]在UWP平台中使用Lottie动画>中我简单介绍了一下LottieUWP项目以及如何使用它呈现Lottie动画,这篇文章里我们来讲点进阶的东西--缓存Lottie动 ...
- [UWP]在UWP平台中使用Lottie动画
最近QQ影音久违的更新了,因为记得QQ影音之前体验还算不错(FFmepg的事另说),我也第一时间去官网下载体验了一下,结果发现一些有趣的事情. 是的,你没看错,QQ影音主界面上这个动画效果是使用Lot ...
- 【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
作者 | 弗拉德 来源 | 弗拉德(公众号:fulade_me) Lottie动画 在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过 ...
- 在vue里添加好看的lottie动画 (^_^)
为什么用lottie ★~★ 1.能让你的程序不那么单调 2.能让一些有审美强迫症的同学好受一点 3.网上有丰富的资源 点我进入lottie资源网站 引入lottie库 (>.<) 在vu ...
- iOS 动画(基于Lottie封装)
一般app中都会带有动画,而如果是一些复杂的动画,不但实现成本比较高,而且实现效果可能还不能达到UI想要的效果,于是我们可以借助lottie来完成我们想要的动画. lottie动画1.gif ...
- Lottie在手,动画我有:ios/Android/Web三端复杂帧动画解决方案
为什么需要Lottie 在相对复杂的移动端应用中,我们可能会需要使用到复杂的帧动画.例如: 刚进入APP时候可能会看到的入场小动画,带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候,研 ...
随机推荐
- MySQL:Your password has expired. To log in you must change it using a client that supports expired passwords
MySQL:V5.6.37 安装后发现没远程权限,为了方便,就直接把hostname@root修改为%@root,密码修改为和localhost@root一样 然后尴尬的事情发生了,本地登陆正常,远程 ...
- Go语言中的map
map是一个集合,可以使用类似处理数组和切片的方式迭代map中的元素.但map是无序的集合.无序的原因是map的实现使用了散列表. map的创建并初始化主要是两种方式: 1.内置的make函数 2.使 ...
- centos配置小程序https和wss协议
用nginx做代理,conf.d下ssl.conf配置成https,wss在nginx.conf里http某块中配置 例代码如下: ssl.conf-->https server { liste ...
- Mudo C++网络库第二章学习笔记
线程同步的精要 并发有两种基本的模型: 一种是message passing(消息传递); 另一种是shared memory(共享内存); 在分布式系统中(有多台物理机需要通信), 运行在多台机器上 ...
- java 编程思想
博主介绍了很多Java的基础知识,很适合初学者. http://blog.csdn.net/iaiti/article/details/38260599
- 002_运维SOP
一. <1>SOP:运维工作的标准化 <2>回滚:代码回滚 <3>降级:是利用有限资源,保障系统核心功能高可用.有损的架构方法 <4>多活切换:多机房切 ...
- Redis高级特性介绍及实例分析
转自:http://www.jianshu.com/p/af7043e6c8f9 Redis基础类型回顾 String Redis中最基本,也是最简单的数据类型.注意,VALUE既可以是简单的St ...
- [swoole]swoole常见问题总汇
1.在daemon模式下Task异步任务写入文件需要采用绝对路径: 1.Task异步任务中操作数据库,如果仅仅只是在启动程序之初进行一次数据库链接,链接会在一定的时间后自动断开,应对这样的情况的最好办 ...
- JAVA覆写Request过滤XSS跨站脚本攻击
注:本文非本人原著. demo的地址:链接:http://pan.baidu.com/s/1miEmHMo 密码:k5ca 如何过滤Xss跨站脚本攻击,我想,Xss跨站脚本攻击令人为之头疼.为什么呢. ...
- Confluence 6 查看空间活动
空间活动信息是默认禁用(disabled by default)的.活动(Activity)的标没有显示,如果你的 Confluence Usage Stats 插件没有启用的.请查看下面的说明: ...