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 布局文件中
<com.airbnb.lottie.LottieAnimationView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_autoPlay="true"
app:lottie_fileName="draw_rose.json"
app:lottie_loop="true"/>
它反对几个属性:
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