Lottie
前言
动画是我们日常开发中必不可少的一个要点,比如某个场景要实现打勾的效果,一开始你的设想可能是这样子的:
用代码实现起来可能还好,绘制圆圈,一段圆弧圆周运动,绘制一个打勾路径,结合动画实现,美滋滋。但是等到设计师出图的那一天,是这样的:
看了效果图,内心有一句话不知道当不当讲
但是不要慌,你能不能想到竟然有这么一个库,可以让设计师"帮你实现动画效果"!没错,它就是今天的主角——Lottie。Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能解析 Adobe After Effects 视频制作软件导出的动画,并且在代码中能通过api直接调用这些生成的动画文件,完美实现动画效果,Lottie在这种时候就是救世主级别的存在了。
Lottie官网:https://lottiefiles.com/
如何使用
看了效果,我们看下如何在Android中快速使用这个库实现各种炫酷动画。
1.导入Lottie库
在app的gradle中导入如下依赖:
dependencies { compile 'com.airbnb.android:lottie:2.2.0'}
- 最新版本可查看GitHub地址:https:///airbnb/lottie-android
注意:Lottie只支持Api16以上,如果项目中minSdkVersion小于16会报错。
2.导入动画文件
Lottie加载动画是靠解析Json文件来实现的,所以需要设计师从After Effect等软件中制作好动画并生成一个Json文件,文件的内容大概是下面这个样子:
json示意图
尽管看起来很复杂,但这都是通过软件生成的,我们只需要将其导入到项目中即可。由于Lottie默认是读取工程的Assets目录,所以我们将Json文件放到src/main/assets目录下。
3.使用姿势
1)静态方式
Lottie库提供了一个LottieAnimationView控件,它本质是一个ImageView,可直接在布局文件中声明:
这里列举了有几个lottie的基本属性
- lottie_fileName 调用的Json文件名
- lottie_loop 是否开启循环动画
- lottie_autoPlay 是否开启自动播放
当然lottie还有很多其他的属性,例如:
- lottie_repeatCount 动画重复次数
- lottie_repeatMode 动画重复模式
- lottie_scale 放大倍数
这里就不一一列举了,运行后效果如下:
2)动态方式
Lottie也支持在代码中动态调用接口:
LottieAnimationView lottieAnimationView = findViewById(.anim_view); lottieAnimationView.setAnimation("anim.json"); lottieAnimationView.loop(true); lottieAnimationView.playAnimation();
3)监听动画进度
Lottie同样提供了监听动画的接口,而且还是我们熟悉的ValueAnimator
lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { // 判断动画加载结束 Log.d("Lottie