一、简介
Lottie是Airbnb开源的一个动画渲染库,支持多平台,包括iOS、Android、React Native以及Web。
Lottie动画的制作流程如下:
设计师通用After Effects 制作动画,然后通过Bodymovin插件导出对应的json文件,给到每个端的研发,然后进行编译展示。
二、简单使用
1、依赖引入
build.gradle 增加以下配置,最新版本号可在官网获取。或者从
https://mvnrepository.com/
这个地址可以找到maven库里面每个开源库所有的版本号。
implementation 'com.airbnb.android:lottie:2.0.0'
2、使用
在代码里面创建一个LottieAnimationView
对象,然后使用setAnimation
设置存放在assets
目录下的JSON文件,然后运行就可以看到对应的动画效果了。
public class LoadingView extends FrameLayout {
private LottieAnimationView lottieAnimationView;
public LoadingView(@NonNull Context context) {
super(context);
lottieAnimationView = new LottieAnimationView(getContext());
LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1000);
layoutParams.gravity = Gravity.CENTER;
addView(lottieAnimationView, layoutParams);
lottieAnimationView.setAnimation("LottieLogo1.json");
lottieAnimationView.setRepeatCount(ValueAnimator.INFINITE);
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
lottieAnimationView.playAnimation();
}
}
这里有个小细节需要注意一点,如果遇到首次播放不了的情况,可以将playAnimation
的调用,放在onAttachedToWindow
的下面,具体原因后面解释。
三、进阶用法
多样的数据源
- a、从raw文件夹获取:
src/main/res/raw
; - b、从
src/main/assets
加载zip文件; - c、从一个指向json文件或者zip文件的url;
- d、从网络返回的json字符串;
- e、从
InputStream
获取到的json文件或者zip文件;
带来的好处就是,根据根据诉求可以动态进行改变。
代码变色
lottie提供了三个改变颜色的API,
addColorFilter();
addColorFilterToLayer();
addColorFilterToContent();
- addColorFilter
调用LottieAnimationView的addColorFilter
方法,即可修改对应的颜色。
lottieAnimationView.addColorFilter(new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP));
譬如,官方demo 里面的HamburgerArrow.json
文件,原先是紫色的,增加上以上代码之后,整个就变成了红色。
注意,这种修改方式,只能使用在背景透明的动画上,如果lottie动画本身就自带了背景色,那这种方式并不适用。因为
addColorFilter
的实现原理是为每一层都加上了colorfilter,对应的源码如下:
@Override public void addColorFilter(@Nullable String layerName, @Nullable String contentName,
@Nullable ColorFilter colorFilter) {
for (int i = 0; i < layers.size(); ++i) {
final BaseLayer layer = layers.get(i);
final String name = layer.getLayerModel().getName();
if (layerName == null) {
layer.addColorFilter(null, null, colorFilter);
} else if (name.equals(layerName)) {
layer.addColorFilter(layerName, contentName, colorFilter);
}
}
}
会连背景色也被替换成为红色。导致看不出动画效果。
addColorFilterToLayer
为了解决上面提到的问题,lottie提供了另外一个apiaddColorFilterToLayer
,可以在指定的layer上增加对应的colorfilter.addColorFilterToContent
进一步的,通过addColorFilterToContent
可以给对应的layer的content,增加对应的色值。
setSpeed
设置播放速度,譬如如果设置了2,就是普通不设置场景下的2倍速度进行播放。
setProgress
设置开始播放的进度。第一次播放的时候,从整体进度的百分之多少开始执行动画,如果是loop的方式,只会影响第一次的进度。
设置动画监听
lottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {}});
性能提升
1、Lottie动画如果包含遮罩、阴影或者蒙版,在性能会有所下降;如果必须使用遮罩,务必让其覆盖最小的区域。
2.在列表中使用lottie动画,要使用缓存,避免内存抖动
3.开启硬件加速。默认是关闭的。
四、其他效率提升工具
五、参考链接
https://blog.csdn.net/weixin_37618354/article/details/84072783