Android 动画之Lottie动画使用
一:简介
Lottie是Airbnb开源的一套跨平台的完整解决方案,设计师只需要使用After Effects(简称AE)设计动画之后,使用Lottic提供的Bodymovin插件将设计好的动画导出成JSON格式,就可以直接iOS,Android和React Native之上,无需关心中间的实现细节。
二:Android下使用Lottie
1.添加依赖在app下的build.gradle下添加
//lottie
implementation 'com.airbnb.android:lottie:3.4.4'
2.把动画的JSON文件,放在app/src/main/assets目录下
JSON字符串的最外层的结构
{
"v": "4.6.0", //bodymovin的版本
"fr": 29.9700012207031, //帧率
"ip": 0, //起始关键帧
"op": 141.000005743048, //结束关键帧
"w": 800, //动画宽度
"h": 800, //动画高度
"ddd": 0,
"assets": [...] //资源信息
"layers": [...] //图层信息
}
3.最简单的使用是直接使用LottieAnimationView,LottieAnimationView 直接继承自 AppCompatImageView在Layout布局文件中
它支持几个属性:
lottie_fileName:播放动画的json文件
lottie_loop:是否循环播放,默认为false
lottie_autoPlay:是否加载完之后,自动播放,默认是false
或者代码中实现
LottieAnimationView lottieAnimationView=findViewById(R.id.animation_view);
lottieAnimationView.setAnimation("heart.json");
lottieAnimationView.loop(true);
lottieAnimationView.playAnimation();
3.1添加一个动画监听
lottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
Log.d("aa","动画开始");
}
@Override
public void onAnimationEnd(Animator animation) {
Log.d("aa","动画结束");
}
@Override
public void onAnimationCancel(Animator animation) {
Log.d("aa","动画取消");
}
@Override
public void onAnimationRepeat(Animator animation) {
Log.d("aa","动画每一次调用执行属性动画");
}
});
3.2动画里有图片,不仅是画上去的,还有些图片资源使用本地的图片资源,可以使用setImageAssetsFolder("/images");
这个是加载资产目录assets下images目录的图片
设置一个 Lottie 动画中使用到的图片文件夹的相对路径,并确保他们和 bodymovin 插件输出的用到的图片文件名称,保持不变
3.3从网络上下载图片
lottieAnimationView.setImageAssetDelegate(new ImageAssetDelegate() {
@Nullable
@Override public Bitmap fetchBitmap(LottieImageAsset asset) {
return null;
}
});
3.4缓存
//Lottie内部有两个缓存map(强引用缓存,弱引用缓存),在动画文件加载完成后会根据设置的缓存策略缓存动画,方便下次使用。
lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong); //强缓存
lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak); //弱缓存
3.5硬件加速,解决lottie卡顿问题
lottieAnimationView.useHardwareAcceleration(true);
LottieFiles网站https://lottiefiles.com/
Github路径:https://github.com/airbnb/lottie-android/tree/v3.4.4