前言
我们都知道,安卓里面有三种基本的播放动画方式: 帧动画,属性动画,补间动画 今天介绍一种新的实现方式: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还不支持阴影,颜色叠加或笔触等图层效果。
相关资料
乐蒂文档 Android -Lottie加载动画喂饭指南 Lottie动画 轻松使用
|