Android(安卓)Lottie动画实战踩坑
Lottie简介
Lottie是一个iOS,Android和React Native库,可以实时渲染After Effects动画,允许应用程序像使用静态图像一样轻松使用动画。
为什么使用Lottie?
灵活的After Effects功能
Lottie目前支持实体,形状图层,蒙版,alpha遮罩,修剪路径和虚线图案。Lottie将定期添加新功能。
以更让人喜欢的方式操纵动画
Lottie动画可以前进、后退,并且最重要的是可以对动画进行编程以响应任何交互。
动画文件小
在应用中捆绑矢量动画,而不必担心多个维度或大文件大小。或者可以通过从JSON API加载动画文件来完全将动画文件与应用程序代码分离。
Android引入Lottie
使用准备
Lottie支持多平台,使用同一个JSON动画文件,可在不同平台实现相同的效果。Android 通过Airbnb的开源项目lottie-android实现,最低支持 API 16;
在项目的 build.gradle 文件添加依赖
dependencies { implementation 'com.airbnb.android:lottie:$lottieVersion'}
在项目的 build.gradle 文件添加依赖
- https://github.com/airbnb/lottie-android
- http://airbnb.io/lottie/android/android.html
核心类
-
LottieAnimationView
继承ImageView,是加载Lottie动画的默认和最简单的方法 -
LottieDrawable
与LottieAnimationView具有大多数相同的API,但可以在任何所需View上使用它。 -
LottieComposition
动画json数据的对象模型,通过LottieComposition,实现对动画的分解和序列化。
加载动画
Lottie动画可以从以下几处加载:
- 存放在
src/main/res/raw
下的json动画文件 - 存放在
src/main/assets
下的json文件 - 存放在
src/main/assets
下的zip文件 - 通过一个url获取到的json或者zip文件
- 一个json字符串,可以来自于任何地方,包括网络
- 一个输出json或者zip文件的InputStream
XML方式加载动画
最简单的使用方法是使用LottieAnimationView:
建议使用lottie_rawRes,因为可以通过R使用对动画的静态引用,而不是仅使用字符串名称。
From res/raw (lottie_rawRes) or assets/ (lottie_fileName)
编程方式加载动画
可以查看LottieAnimationView类的API进行编程方式播放动画,具体代码不再赘述
Lottie动画还支持更多特性:动画监听器、动画循环、缩放等此处不再赘述,有需要请参考:http://airbnb.io/lottie/#/android
踩坑(遇到的问题)
动画文件版本问题
UI首次给我物料时立即放到工程里试了一下,发现报错如下:
java.lang.IllegalStateException: Missing values for keyframe. at com.airbnb.lottie.animation.keyframe.FloatKeyframeAnimation.getValue(FloatKeyframeAnimation.java:16) at com.airbnb.lottie.animation.keyframe.FloatKeyframeAnimation.getValue(FloatKeyframeAnimation.java:8) at com.airbnb.lottie.animation.keyframe.BaseKeyframeAnimation.getValue(BaseKeyframeAnimation.java:125) at com.airbnb.lottie.animation.keyframe.TransformKeyframeAnimation.getMatrix(TransformKeyframeAnimation.java:113)
经过搜索发现了一个官方的issues:https://github.com/airbnb/lottie-android/issues/1177
有一个哥们回复如下:Lottie 3.0和Bodymovin 5.5有一些重要的json优化,可以节省json大小和解析速度的1/3。 但是,必须在3.0以上生效,否则就在bodymovin设置中启用“导出为旧格式”(Bodymovin为AE导出动画的插件)。
看了一下我们的版本果然为3.0一下(2.5.6),于是跟UI说明,重新导出了一份动画物料,问题解决。
zip动画文件多次播放崩溃
UI给我的是一个zip文件,由于Lottie也支持zip所以就直接把zip文件放到assets目录下适使用,第一次进入效果很好,但是退出Activity再次进来就会报错,错误信息如下:
java.lang.IllegalStateException: You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder at com.airbnb.lottie.manager.ImageAssetManager.bitmapForId(ImageAssetManager.java:107) at com.airbnb.lottie.LottieDrawable.getImageAsset(LottieDrawable.java:839) at com.airbnb.lottie.model.layer.ImageLayer.getBitmap(ImageLayer.java:68) at com.airbnb.lottie.model.layer.ImageLayer.drawLayer(ImageLayer.java:32) at com.airbnb.lottie.model.layer.BaseLayer.draw(BaseLayer.java:201) at com.airbnb.lottie.model.layer.CompositionLayer.drawLayer(CompositionLayer.java:100) at com.airbnb.lottie.model.layer.BaseLayer.draw(BaseLayer.java:201) at com.airbnb.lottie.LottieDrawable.draw(LottieDrawable.java:319)
很幸运的是这个bug我也找到了官方的issueshttps://github.com/airbnb/lottie-android/issues/1009,有一个committer回复在新版本已经修复了这个bug,修复到了3.0版本,看代码提交记录大概是bitmap回收的bug。由于我们的版本是2.5.6因此存在此bug,但是升级Lottie的成本比较大,UI又倾向于使用Lottie,这个问题很难办。抱着试一试的态度把zip解压了,放到assets目录下居然没有问题了。!
更多相关文章
- 【转】关于Android的.so文件你所需要知道的(二)
- Android(安卓)Studio目录结构浅析
- 帧动画和补间动画
- Android(安卓)OpenGL ES
- Android--数据持久化之内部存储、Sdcard存储
- 温馨提示:Android(安卓)的 XML 文件是是区分大小写的
- 玩转BeagleBoard xM——通过Repo下载Android(安卓)4.0 ICS源码
- Android基础—WebView(网页视图)基本用法
- Android(安卓)通过inputstream 加载非Drawable 文件夹下的 .9 pa