前言
我们都知道,安卓里面有三种基本的播放动画方式:
帧动画,属性动画,补间动画
今天介绍一种新的实现方式:Lottie动画
Lottie是爱彼迎开源的一个动画框架。可以支持iOS、Android 和 React Native ,
可实时渲染 After Effects 动画,让应用程序使用动画就像使用静态图像一样轻松。
这波博客主要介绍基本的使用,文末也会贴上相关的资料
导入方式
导入依赖的方式比较简单:
implementation 'com.airbnb.android:lottie:5.2.0'
我这里用的是5.2.0的版本
基本使用
Lottie动画支持XML配置和代码配置,如果要在xml里面写,就可以像这样:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animationView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="centerInside"
app:lottie_autoPlay="true"
app:lottie_fileName="anim/item_gift_jd_new_selected/index.json"
app:lottie_imageAssetsFolder="anim/item_gift_jd_new_selected/images"
app:lottie_loop="true" />
其实LottieAnimationView继承的也就是一个AppCompatImageView
常用的xml属性有:
lottie_fileName :在app/src/main/assets目录下的动画,以json文件名。
lottie_rawRes:存放在app/src/main/res/raw 目录下的json动画
app:lottie_rawRes,app:lottie_fileName这两个属性基本相似。
lottie_loop:动画是否循环播放,默认不循环播放。
lottie_autoPlay:动画是否自动播放,默认不自动播放。
lottie_imageAssetsFolder:动画所依赖的图片目录,在app/src/main/assets/目录下的子目录,该子目录存放所有图片。
lottie_colorFilter :设置动画的着色颜色
lottie_repeatCount :重复次数,当你设置-1的时候就代表相应的循环了!
lottie_scale :设置动画的比例
lottie_repeatMode: 设置动画的重复模式RESTART:重复、REVERSE:反向
当然,更多的动态配置还是可以在代码里写的,比如这样:
LottieAnimationView animationView1 = findViewById(R.id.animationView1);
animationView1.setImageAssetsFolder("anim/item_gift_jd_new_selected/images");
animationView1.setAnimation("anim/item_gift_jd_new_selected/index.json");
还有一些基本的API如下:
加载网络的资源
setAnimationFromUrl(String url)
设置循环次数
setRepeatCount(int count)
设置循环模式(LottieDrawable.INFINITE,LottieDrawable.RESTART,LottieDrawable.REVERS,默认RESTART)
setRepeatMode(int)
是否无限循环
loop(boolean loop)
设置最大帧和最小帧
(1.frame从0开始计算
2.播放的帧范围为:[minFrame, maxFrame),不包含第maxFrame帧)
setMinAndMaxFrame(int minFrame, int maxFrame)
播放
lottieAnimationView.playAnimation()
暂停播放
lottieAnimationView.pauseAnimation()
取消播放
lottieAnimationView.cancelAnimation()
重启动画
animationView.resumeAnimation();
设置X轴方向上的缩放比例,0f为不可见,1f原始大小 Ps.原setScale方法在2.0.0版本后已弃用
animationView.setScaleX(0.5f)
设置Y轴方向上的缩放比例
animationView.setScaleY(0.5f)
Lottie内部有两个缓存map(强引用缓存,弱引用缓存),在动画文件加载完成后会根据设置的缓存策略缓存动画,方便下次使用。
lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong) //强缓存
lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak) //弱缓存
LottieAnimationView.CacheStrategy.None) //默认
设置当前进度
lottieAnimationView.setProgress(progress)
强制缓存绘制数据
lottieAnimationView.buildDrawingCache()
获取当前绘制数据
Bitmap image = lottieAnimationView.getDrawingCache()
Lottie动画还提供了很多监听的api,下面继续介绍
常用监听方法
addLottieOnCompositionLoadedListener:动画加载完成监听
setFailureListener:动画加载失败回调
addAnimatorUpdateListener:动画进度监听回调
addAnimatorListener:同上,只不过上面是监听具体的值,这边是有四个回调方法(start,end,cance,repeat)
addAnimatorPauseListener:只关注暂停和恢复的回调
优缺点
优点:
1.由于将动画变成了json字符串,相比几M体积的gif图,等质量下的压缩率达到80%及以上。
2.支持云端动画资源加载,上线新的动画效果不需要发版
3.支持实时渲染 After Effects 动画,让 app 加载动画像加载图片一样简单。
4.因为Lottie是利用json文件生成动画,从而避免了不同分辨率、不同设备尺寸上面动画效果存在差异的问题。
5.拿到动画.json文件后,研发可以灵活的自行修复动画的颜色、路径等数据,自行扩展
6.拥有完整丰富的API,除了常规的播放、控制进度、暂停控制,还可以缓存、添加额外的原生UI
7.在未开启硬件加速的情况下,帧率、内存,CPU都比属性动画差,开启硬件加速后,性能差不多。
缺点:
1.Lottie尚不支持效果菜单中的表达式或任何效果。
2.使用alpha遮罩会影响性能。 如果你使用的是alpha遮罩或alpha倒置遮罩,遮罩的大小会对性能产生更大的影响。
3.Lottie还不支持阴影,颜色叠加或笔触等图层效果。