最近闲来无事,看到别的App有不少炫酷的动画,特地逆向研究了一番,大致看到两类,一种是lottie开发的,一种是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肯定是不行的,运行会出问题,结构目录如下:
你需要添加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 ,可以是 Forward 、 Backward 。Forward 表示动画结束后,将停留在最后一帧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的仅供学习研究:
以上开发人员可以实现自己的炫酷动画了,自然如果需要一些引导页的炫酷动画,只能求设计师做了,毕竟程序员本职工作还是写代码。