#### 三方框架之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 动画的更多相关文章

  1. Android之Lottie动画详解

    文章大纲 一.Lottie介绍二.Lottie实战三.项目源码下载四.参考文章   一.Lottie介绍 1. 什么是Lottie   Lottie是Android和iOS的移动库,用于解析Adobe ...

  2. 程序员也想改 Lottie 动画?是的!

    一.前言 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,用过都说好.完全解耦开发人员和设计师,让设计师设计的动画,在程序中无缝还原,真是一旦拿 ...

  3. Lottie 动画里有图片怎么办?设计师小姐姐也能帮你减少开发量!

    一.序 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整解决方案,设计师只需要使用 After Effectes (之后简称 AE)设计出动画之后,使用 Lotti ...

  4. [UWP]缓存Lottie动画帧

    在上一篇博文<[UWP]在UWP平台中使用Lottie动画>中我简单介绍了一下LottieUWP项目以及如何使用它呈现Lottie动画,这篇文章里我们来讲点进阶的东西--缓存Lottie动 ...

  5. [UWP]在UWP平台中使用Lottie动画

    最近QQ影音久违的更新了,因为记得QQ影音之前体验还算不错(FFmepg的事另说),我也第一时间去官网下载体验了一下,结果发现一些有趣的事情. 是的,你没看错,QQ影音主界面上这个动画效果是使用Lot ...

  6. 【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画

    作者 | 弗拉德 来源 | 弗拉德(公众号:fulade_me) Lottie动画 在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过 ...

  7. 在vue里添加好看的lottie动画 (^_^)

    为什么用lottie ★~★ 1.能让你的程序不那么单调 2.能让一些有审美强迫症的同学好受一点 3.网上有丰富的资源 点我进入lottie资源网站 引入lottie库 (>.<) 在vu ...

  8. iOS 动画(基于Lottie封装)

    一般app中都会带有动画,而如果是一些复杂的动画,不但实现成本比较高,而且实现效果可能还不能达到UI想要的效果,于是我们可以借助lottie来完成我们想要的动画.   lottie动画1.gif   ...

  9. Lottie在手,动画我有:ios/Android/Web三端复杂帧动画解决方案

      为什么需要Lottie 在相对复杂的移动端应用中,我们可能会需要使用到复杂的帧动画.例如: 刚进入APP时候可能会看到的入场小动画,带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候,研 ...

随机推荐

  1. mysql数据库卸载和安装

    背景: 由于之前一个项目中用的数据库版本是免安装的mysql5.5.36,但是后来经过第三方测试公司测试出该数据库存在很多漏洞需要升级数据库才能解决.所以觉得将数据库更换为mysql-5.7.21-w ...

  2. python第三天,字符串续

    字符串类型 在python中字符串类型可以用 成对单引号,如:'你好,中国.': 也可以用成对双引号,如:"厉害了,我滴国".代码如下: 通过.title(),可以将一段话的首字母 ...

  3. laravel 关闭 csrf 验证 TokenMismatchException

    csrf验证失败 注释掉kernel.php 的 csrf 行代码

  4. [转] 如何轻松愉快地理解条件随机场(CRF)?

    原文链接:https://www.jianshu.com/p/55755fc649b1 如何轻松愉快地理解条件随机场(CRF)?   理解条件随机场最好的办法就是用一个现实的例子来说明它.但是目前中文 ...

  5. .net中的设计模式---单例模式

    .net设计模式: Net设计模式实例之单例模式( Singleton Pattern)  一 : 单例模式的简介:(Brief Introduction) 单例模式(Singleton Patter ...

  6. dubbo源码分析14——DubboProtocol的export方法分析

    走到了这一步也挺不容易的,把之前的暴露入口代码再列出来回顾一下: //配置为none不暴露 if (! Constants.SCOPE_NONE.toString().equalsIgnoreCase ...

  7. lua io.read()

    io.read(...) 从文件中读取内容,还有另外一种写法就是 file:read() 后面可以跟的读取方式有: (1) "n"  读取一个数字,这是唯一一个返回数字而不是字符串 ...

  8. ebs 12.1.1打中文补丁

    环境变量设置 oracle 用户,应用env环境变量 . /u01/app/db/tech_st/11.1.0/PROD_erpapp1.env alias s='sqlplus / as sysdb ...

  9. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  10. 使用Eclipse进行Makefile项目

    最近在MCU on Eclipse网站上看到Erich Styger所写的一篇有关在Eclipse中使用Makefile创建项目的文章,文章讲解清晰明了非常不错,所以呢没人将其翻译过来供各位同仁参考. ...