lottie-android 框架使用及源码解析

安卓动画

最近业务太多，好久没更新。。花了两个晚上研究了一些lottie框架的实现，学到了一些思路，有机会可以把view绘制深入学习一下，ok开始。

https://github.com/airbnb/lottie-android

Lottie，Airbnb开源的一个牛逼的动画框架，绚丽的动画效果令人瞠目。

Example2.gif

没错这在以往的意识来看是根本不可能实现的动画效果，那么究竟它是如何实现的呢？

初探

打开LottieSample工程，并将它运行起来，首页就可以看到上图中间的这个动画效果，而代码实现更是简单到没朋友。

xml：

Paste_Image.png

java代码：

Paste_Image.png

没错就是初始化了一个LottieAnimationView并且调用playAnimation()方法，就出现了上图的动画效果，这里注意到在xml初始化参数中有个lottie_fileName参数，传了一个貌似是json文件路径，而在assets的Logo目录下，确实有个LogoSmall.json文件，打开一看懵逼了，完全看不懂。

原来这个json文件的内容不是手写的，而是软件生成的，设计师可以使用Adobe的 After Effects(简称 AE)工具制作这个动画，在AE中安装一个叫做Bodymovin的插件，使用这个插件可以将动画效果生成一个json文件，而这个json文件通过LottieAnimationView解析并最终生成绚丽的动画效果展示在我们面前。

使用方法

Lottie supports API 14 and above，要求4.0以上

依赖

dependencies {  
  compile 'com.airbnb.android:lottie:1.5.1'
}

使用方法一：初始化一个LottieAnimationView

只接受这三个参数，语意清楚就不多解释了。

也可以通过java代码设置

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);

setAnimation有三个方法

Paste_Image.png

其中String是fileName，是在assets目录下的文件，CacheStrategy表示缓存策略，

Paste_Image.png

代表使用何种策略进行存储，默认为None即不存储，而使用时会优先从内存缓存中命中读取，从而减小IO开销。

JSONObject直接传入一段json数据，可以通过网络获取一段json进行解析处理。

使用方法二：使用LottieComposition

Paste_Image.png

在LottieComposition中提供了三种from方法，可以接受assets文件名、json对象、流对象三种参数，Sync表示同步，但是却是包可见方法，并不能被外部调用。

LottieComposition.fromJson(getResources(), jsonObject, new LottieComposition.OnCompositionLoadedListener() {
    @Override
    public void onCompositionLoaded(LottieComposition composition) {
        animationView.setComposition(composition);
        animationView.playAnimation();
    }
});

外部调用时只提供异步方法，使用AsyncTask进行异步调用，将JsonObject的解析处理过程放在异步线程处理，并将解析生成的LottieComposition对象回调主线程，因为这个json对象可能有上百k之大，所以整个处理过程的复杂度和耗时还是很高的，所以不要在ui线程中解析处理。

一点想法：

我们可以通过请求的方式获取json对象，并将解析的过程放在网络请求的异步线程中处理，使用反射调用同步方法，将调用放在异步线程中执行，这样就可以将整个过程请求和解析的过程封装在一起。

注意点：

LottieAnimationView内部有个LottieDrawable对象，setComposition方法实质上是将LottieComposition应用到LottieDrawable上，官方readme上有这样一段说明

Paste_Image.png

但应该是后面改过，LottieDrawable是包可见的，外部无法调用到，并且在LottieDrawable类注释上有这样一段描述。

Paste_Image.png

推荐使用LottieAnimationView而不是直接使用LottieDrawable，因为LottieDrawable的回收LottieAnimationView帮你做了，而自己操作LottieDrawable需要考虑的回收调用。

Paste_Image.png

所以仅推荐以上两种用法，不推荐直接使用Drawable的方式除非一定需要。

源码解析

好了，说完用法，要来看看到底这个过程发生了什么。

有两个重要的过程

一、json文件解析成LottieComposition的过程

所有的文件解析过程都会走到LottieComposition下的fromJsonSync方法，返回一个LottieComposition对象，中间都是对jsonObject的解析过程，将jsonObject中的信息解析到LottieComposition对象中。

static LottieComposition fromJsonSync(Resources res, JSONObject json) {
  LottieComposition composition = new LottieComposition(res);

  ···

  try {
    JSONArray jsonLayers = json.getJSONArray("layers");
    for (int i = 0; i < jsonLayers.length(); i++) {
      Layer layer = Layer.fromJson(jsonLayers.getJSONObject(i), composition);
      addLayer(composition, layer);
    }
  } catch (JSONException e) {
    throw new IllegalStateException("Unable to find layers.", e);
  }

  ····

  return composition;
}

这段代码就是把jsonobject中的数据赋值给LottieComposition对象变量，看下图LottieComposition的变量。

Paste_Image.png

bounds代表边界，start和end代表开始和结束时间，duration为时长，scale为为density。Layer就是图层的概念，里面存放的是图层的数据，在循环遍历jsonLayers生成Layer对象时调用了fromJson方法，同样的也是解析和赋值过程。

static Layer fromJson(JSONObject json, LottieComposition composition) {
  Layer layer = new Layer(composition);

  ····

  return layer;
}

Paste_Image.png

以上为Layer类中的变量，除了基础变量外，会看到红框中的变量，这些变量是跟动画相关的参数，都是AnimatableValue的实现类。

AnimatableValue的继承关系如图，看样子是控制颜色、scale、path等基础动画的。

Paste_Image.png

那么生成的LottieComposition对象可以理解成一个包含所有图层动画信息的对象，等下看看这些变量是如何被使用的。

二、生成LayerView树

生成的LottieComposition是通过LottieDrawable的setComposition方法将动画信息进行设置的，核心调用方法为buildLayersForComposition。

private void buildLayersForComposition(LottieComposition composition) {
  ···
  LongSparseArray layerMap = new LongSparseArray<>(composition.getLayers().size());
  List layers = new ArrayList<>(composition.getLayers().size());
  LayerView maskedLayer = null;
  for (int i = composition.getLayers().size() - 1; i >= 0; i--) {
    Layer layer = composition.getLayers().get(i);
    LayerView layerView;
    if (maskedLayer == null) {
      layerView =
          new LayerView(layer, composition, getCallback(), mainBitmap, maskBitmap, matteBitmap);
    } else {
      ···
      layerView =
          new LayerView(layer, composition, getCallback(), mainBitmapForMatte, maskBitmapForMatte,
              null);
    }
    layerMap.put(layerView.getId(), layerView);
    if (maskedLayer != null) {
      maskedLayer.setMatteLayer(layerView);
      maskedLayer = null;
    } else {
      layers.add(layerView);
      if (layer.getMatteType() == Layer.MatteType.Add) {
        maskedLayer = layerView;
      }
    }
  }

  for (int i = 0; i < layers.size(); i++) {
    LayerView layerView = layers.get(i);
    addLayer(layerView);
  }

  for (int i = 0; i < layerMap.size(); i++) {
    long key = layerMap.keyAt(i);
    LayerView layerView = layerMap.get(key);
    LayerView parentLayer = layerMap.get(layerView.getLayerModel().getParentId());
    if (parentLayer != null) {
      layerView.setParentLayer(parentLayer);
    }
  }
}

将之前解析出来的Layers数据倒序遍历并生成同等数量的LayerView，将LayerView通过addLayer方法添加到layers列表里面，这段代码执行完，就生成了一个LayerView的树状结构，以LottieDrawable为根节点（LottieDrawable也是继承自AnimatableLayer，跟LayerView相同）。

void addLayer(AnimatableLayer layer) {
  layer.parentLayer = this;
  layers.add(layer);
  layer.setProgress(progress);
  invalidateSelf();
}

在LayerView的构造器中有个方法：

private void setupForModel() {
  setBackgroundColor(layerModel.getSolidColor());
  setBounds(0, 0, layerModel.getSolidWidth(), layerModel.getSolidHeight());

  setPosition(layerModel.getPosition().createAnimation());
  setAnchorPoint(layerModel.getAnchor().createAnimation());
  setTransform(layerModel.getScale().createAnimation());
  setRotation(layerModel.getRotation().createAnimation());
  setAlpha(layerModel.getOpacity().createAnimation());

  setVisible(layerModel.hasInAnimation(), false);

  List