揭秘Lottie动画的优劣及原理

前言

Lottie是目前应用十分广泛的动画框架。在周会汇报的时候，老板问能不能对Lottie进行优化，于是就有了下文对Lottie原理的研究。毕竟要进行优化，首先要深入了解原理嘛。

Lottie动画

Lottie实现

• Lottie通过读取json文件信息实现动画效果。
• json信息包括动画长度、宽度、动画资源、图层信息等，这些属性阐述了动画该做什么、该怎么做。
• json文件解析：

Lottie动画总体实现原理

• Lottie 先将动画 JSON 文件转换为 LottieComposition 数据对象。
• 继承 ImageView 的 LottieAnimationView 将数据对象 LottieComposition 和渲染能力委托给 LottieDrawable 处理。
• 在 LottieDrawable 中会将数据对象 LottieComposition 组建为具有 draw 能力的 BaseLayer，并在 LottieAnimationView 需要绘制时，调用自己和各个层级 BaseLayer 的渲染，从而达到动画效果。

下文将把Lottie原理细分为适配、绘制、动画原理，并辅以源代码进行阐述。

适配原理

• 对于普通图片，可能会需要2x，3x多份图片资源进行手机适配。
• 而Lottie本身已经自带了适配的功能：解析json文件时，读取动画的宽、高之后，会乘以手机的密度。在使用的时候判断Lottie动画适配后的宽高是否大于手机实际宽高，如果大于，Lottie会进行缩放。

绘制原理

1、 获取LottieComposition数据对象

//Raw 文件加载
LottieComposition.Factory.fromRawFile(this,R.raw.data, compositionListener);
//asset 文件加载
 LottieComposition.Factory.fromAssetFileName(this, "data.json", compositionListener);
//自定义文件目录加载
 LottieComposition.Factory.fromInputStream(new FileInputStream("/sdcard/data/data.json"), compositionListener);
复制代码

2、 从源码可以看到LottieComposition被传给了LottieDrawer。

publicvoidsetComposition(@NonNull LottieComposition composition){
    if (L.DBG) {
        Log.v(TAG, "Set Composition \n" + composition);
    }
    lottieDrawable.setCallback(this);
    
    this.composition = composition;
    boolean isNewComposition = lottieDrawable.setComposition(composition);
}
复制代码

3、 LottieDrawable通过buildComposition方法构造最外层的CompositionLayer。

public boolean setComposition(LottieComposition composition) {
       if (this.composition == composition) {
          return false;
       }
       clearComposition();
       this.composition = composition;
       buildCompositionLayer();
       animator.setComposition(composition);
       // ......
       }
       
       private void buildCompositionLayer() {
           compositionLayer = new CompositionLayer(
           this, LayerParser.parse(composition), composition.getLayers(), composition);
}
复制代码

4、构造CompositionLayer时，遍历LottieComposition数据对象中所有的Layer数据，并将其转换为BaseLayer图层对象。

public CompositionLayer(LottieDrawable lottieDrawable, Layer layerModel, List<Layer> layerModels,
                        LottieComposition composition) {
    super(lottieDrawable, layerModel);

    LongSparseArray<BaseLayer> layerMap = new LongSparseArray<>(composition.getLayers().size());
    BaseLayer mattedLayer = null;
    for (int i = layerModels.size() - 1; i >= 0; i--) {
        Layer lm = layerModels.get(i);
        BaseLayer layer = BaseLayer.forModel(lm, lottieDrawable, composition);
    }
}
复制代码

CompositionLayer与其他BaseLayer的关系类似于ViewGroup与View的关系。

5、 BaseLayer 的 draw 绘制过程中，会调用抽象方法 drawLayer，各个继承的子类会具体实现。

@SuppressLint("WrongConstant") @Override
publicvoiddraw(Canvas canvas, Matrix parentMatrix, int parentAlpha){
   if (!hasMatteOnThisLayer() && !hasMasksOnThisLayer()) {
      matrix.preConcat(transform.getMatrix());
      L.beginSection("Layer#drawLayer");
      drawLayer(canvas, matrix, alpha);
      L.endSection("Layer#drawLayer");
      recordRenderTime(L.endSection(drawTraceName));
      return;
   }
 }
复制代码

6、 如果Composition包含多个子图层，会遍历子图层，调用各自的draw方法进行绘制。

@OverridevoiddrawLayer(Canvas canvas, Matrix parentMatrix, int parentAlpha){
    L.beginSection("CompositionLayer#draw");
    canvas.save();
    newClipRect.set(0, 0, layerModel.getPreCompWidth(), layerModel.getPreCompHeight());
    parentMatrix.mapRect(newClipRect);
    for (int i = layers.size() - 1; i >= 0 ; i--) {
       boolean nonEmptyClip = true;
       if (!newClipRect.isEmpty()) {
          nonEmptyClip = canvas.clipRect(newClipRect);
       }
       if (nonEmptyClip) {
         BaseLayer layer = layers.get(i);
         layer.draw(canvas, parentMatrix, parentAlpha);
       }
    }
    canvas.restore();
    L.endSection("CompositionLayer#draw");
}
复制代码

动画原理

• 使用LottieAnimationView.playAnimaiton方法可以执行动画。
• 在animator执行过程中会逐层回调setprogress方法。
• 最终触发lottieDrawable的invalidateSelf方法，使lottieDrawable重新绘制。
• 这样随着animator的进行，lottieDrawable重新绘制，最终形成完整的动画。源码如下。

//LottieDrawable 
  public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    this.progress = progress;
    if (compositionLayer != null) {
      compositionLayer.setProgress(progress);
    }
  }

  //CompositionLayer
  @Override public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    super.setProgress(progress);
    progress -= layerModel.getStartProgress();
    for (int i = layers.size() - 1; i >= 0; i--) {
      layers.get(i).setProgress(progress);
    }
  }

//BaseLayer
  void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    //...
    for (int i = 0; i < animations.size(); i++) {
      animations.get(i).setProgress(progress);
    }
  }

//BaseKeyframeAnimation
  void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    if (progress < getStartDelayProgress()) {
      progress = 0f;
    } else if (progress > getEndProgress()) {
      progress = 1f;
    }

    if (progress == this.progress) {
      return;
    }
    this.progress = progress;

    for (int i = 0; i < listeners.size(); i++) {
      listeners.get(i).onValueChanged();
    }
  }

//BaseLayer
  @Override public void onValueChanged() {
    invalidateSelf();
  }

//BaseLayer
  private void invalidateSelf() {
    lottieDrawable.invalidateSelf();
  }
复制代码

Lottie的优劣

优点：

• 支持跨平台，开发成本较低，一套Lottie动画可以在Android/IOS/Web多端使用。
• 性能好，端上除了解析json，基本没有其他耗性能的操作；并且相比于需要存储较多图片的帧动画，Lottie可以节省比较多的内存空间。
• 可以从服务端配置URL实现，不需要APP发版就可以实现更新。

不足点：

• Lottie动画不能进行交互。
• Lottie动画端上也无法进行编辑。
• Lottie不支持加载文字。
• Lottie不支持压缩位图，如果使用png等位图，需要自行在tiny等压缩平台进行图片压缩、降低包体积。
• Lottie存在mask、matters 时，性能会受到较大影响。

mask（掩膜）：

用选定的图形或物体，对要处理的图像进行遮挡，控制图像的处理区域或处理过程。

Matte（前景蒙版）：

前背景分离的结果，是一个灰度图，灰度图上的每个像素点的灰度值代表原始图像每个像素属于前景的程度。
白色代表某一个像素属于前景。
黑色代表某个像素属于背景。

Mask和Matte的区别：

Mask是Matte的一种特例。
Mask只有两种透明度，1和0，即完全透明和完全不透明。Mask是为了去除合成的锯齿而设计，不过锯齿没了，合成痕迹明显，显得不真实。
Matte有很多层次的透明度。图像中每个像素都有自己的透明度，这些像素的透明度可以合成、融合，使图片看起来真实自然。

可以在源码中查看Mask、Matte的计算过程。

• 如果没有Mask或Matte，直接调用drawLayer返回。
• 如果存在Mask或Matte，需要先saveLayer，再调用drawLayer返回。
• saveLayer是一个耗时的操作，需要先分配、绘制一个offscreen的缓冲区，这增加了渲染的时间。

Lottie的使用

加载动画资源的方式

• src/main/res/raw 中的 json 动画。
• src/main/assets 中的 json 文件。
• src/main/assets 中的 zip 文件。
• json 或 zip 文件的 Url。
• json 或 zip 文件的 InputStream。
• json 字符串。

xml文件使用Lottie

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:lottie_rawRes="@raw/hello_world"
        // or
        app:lottie_fileName="hello_world.json"

        app:lottie_loop="true"
        app:lottie_autoPlay="true" />
复制代码

xml文件中Lottie各属性

代码中使用Lottie

LottieAnimationView animationView = ...

animationView.setAnimation(R.raw.hello_world);
// or
animationView.setAnimation(R.raw.hello_world.json);

animationView.playAnimation();
复制代码

代码中Lottie各属性

Lottie动态配置

lottieAnimationView.setAnimationFromUrl(url);
lottieAnimationView.playAnimation();
复制代码

更多技术文章欢迎关注公众号度熊君。