Lottie使用

一、简介

Lottie是Airbnb开源的一个动画渲染库，支持多平台，包括iOS、Android、React Native以及Web。
Lottie动画的制作流程如下：
设计师通用After Effects 制作动画，然后通过Bodymovin插件导出对应的json文件，给到每个端的研发，然后进行编译展示。

-w672

官网地址
GitHub地址

二、简单使用

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文件，原先是紫色的，增加上以上代码之后，整个就变成了红色。

-w229

-w254

注意，这种修改方式，只能使用在背景透明的动画上，如果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.开启硬件加速。默认是关闭的。

四、其他效率提升工具

1、JSON文件预览地址

五、参考链接

https://blog.csdn.net/weixin_37618354/article/details/84072783