Lottie与SvgaPlayer的一些简单使用,以及使用lottie做一个简单的tab切换时图标动画

最近闲来无事,看到别的App有不少炫酷的动画,特地逆向研究了一番,大致看到两类,一种是lottie开发的,一种是SVGA实现的。
大致效果如下:

Lottie与SvgaPlayer的一些简单使用,以及使用lottie做一个简单的tab切换时图标动画_第1张图片
lottie

lottie

Lottie与SvgaPlayer的一些简单使用,以及使用lottie做一个简单的tab切换时图标动画_第2张图片
SVGA

这两种动画实现极大的简化开发人员的工作量,但是需要有一个好的设计师,至少会入门AE AI AN 。
在使用场景方面lottie主要是一些加载动画,引导页动画底部icon切换动画等一些轻量级动画,而svga主要是一些主播中的打赏动画,就像官方放出的送一个飞机火箭等执行的一些动画。
功能性方面个人比较推荐lottie,一方面是他的设计种类多,他的lottie动画网站有大量的开放性设计提供使用,就算没有设计师,开发者也可以下载一些上面提供的素材做一部分炫酷的动画,另一方面是他官方app可以对做出来的动画进行调试,能对播放速度,动画大小,背景色及播放长度进行自定义,可扩展性更高一级。

1、lottie的动画使用:

implementation 'com.airbnb.android:lottie:3.0.6'

新版lottie已经适配了androidx,如果不想适配androidx的同学可以使用早一些的版本。

布局文件使用:


属性 作用
app:lottie_fileName 参数为动画资源,放在assets目录下,格式为json文件,导出json的AE格式后续会提到
app:lottie_loop 是否循环播放
app:lottie_autoPlay 是否自动播放
app:lottie_colorFilter 设置颜色
app:lottie_renderMode 渲染模式
app:lottie_speed 设置播放速度
app:lottie_url 设置url

渲染模式 主要分为以下三种

AUTOMATIC 自动模式
HARDWARE 硬件加速模式
SOFTWARE 软件加速加速模式

也可以使用lottieAnimationView.setMinFrame与lottieAnimationView.setMaxFrame来设置动画执行的最小与最大帧,这样可以实现引导页的动画执行顺序与暂停等。

如果动画所在页面滑动不流畅,可以设置这三种模式中的一种来调试动画。我使用的SOFTWARE模式在绝大部分机型上都没有卡顿现象,但使用HARDWARE模式,有一些复杂动画在执行的时候会出现滑动列表不流畅等性能问题。调试动画的帧率可以使用官方app查看。

代码中可以设置动画监听,在不同的动画状态搞事:

lottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
            }
            @Override
            public void onAnimationCancel(Animator animation) {
            }
            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });

如果想使用常驻动画,可以设置缓存强引用 animationView.setAnimation("data.json", LottieAnimationView.CacheStrategy.Strong);

其中CacheStrategy的值可以是Strong,Weak或者None,它们用来决定LottieAnimationView对已经加载并转换好的动画持有怎样形式的引用(强引用/弱引用)。

有的同学也会看到别的app为何有json文件和图片文件2种呢?json中还使用到了那种图片,单独设置lottie_fileName肯定是不行的,运行会出问题,结构目录如下:


Lottie与SvgaPlayer的一些简单使用,以及使用lottie做一个简单的tab切换时图标动画_第3张图片
assets文件下目录

Lottie与SvgaPlayer的一些简单使用,以及使用lottie做一个简单的tab切换时图标动画_第4张图片
json文件中的结构

你需要添加app:lottie_imageAssetsFolder="images/"来给lottie设置文件夹,这样动画就会找到资源图片。

2、SVGA的动画使用:

工程gradle中添加

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

app的gradle中添加

compile 'com.github.yyued:SVGAPlayer-Android:2.4.4'

SVGAPlayer也可以从本地 assets 目录,或者远端服务器上加载动画文件。


属性 作用
source: String 用于表示 svga 文件的路径,提供一个在 assets 目录下的文件名,或者提供一个 http url 地址
autoPlay: Boolean 默认为 true,当动画加载完成后,自动播放
loopCount: Int 默认为 0,设置动画的循环次数,0 表示无限循环
clearsAfterStop: Boolean 默认为 true,当动画播放完成后,是否清空画布
fillMode: String 默认为 Forward,可以是 ForwardBackwardForward 表示动画结束后,将停留在最后一帧Backward 表示动画结束后,将停留在第一帧。

缓存

SVGAParser 不会管理缓存,你需要自行实现缓存器。

设置 HttpResponseCache

SVGAParser 依赖 URLConnection, URLConnection 使用 HttpResponseCache 处理缓存。
添加代码至 Application.java:onCreate 以设置缓存。

val cacheDir = File(context.applicationContext.cacheDir, "http")
HttpResponseCache.install(cacheDir, 1024 * 1024 * 128)

想了解详细的Api可查看官方的提供的https://github.com/yyued/SVGAPlayer-Android/wiki/APIs

最后附上我做的一个动画gif,自然里面的资源都是来自网上或其他app的仅供学习研究:

效果图

以上开发人员可以实现自己的炫酷动画了,自然如果需要一些引导页的炫酷动画,只能求设计师做了,毕竟程序员本职工作还是写代码。

Lottie与SvgaPlayer的一些简单使用,以及使用lottie做一个简单的tab切换时图标动画_第5张图片
图片源自svga官网设计师工具区

你可能感兴趣的:(Lottie与SvgaPlayer的一些简单使用,以及使用lottie做一个简单的tab切换时图标动画)