Lottie for Android：一个解放开发者双手的动画神

作者: Android小Y | 来源:发表于2019-03-22 01:44 被阅读78次

Lottie

前言

动画是我们日常开发中必不可少的一个要点，比如某个场景要实现打勾的效果，一开始你的设想可能是这样子的：

用代码实现起来可能还好，绘制圆圈，一段圆弧圆周运动，绘制一个打勾路径，结合动画实现，美滋滋。但是等到设计师出图的那一天，是这样的：

看了效果图，内心有一句话不知道当不当讲

但是不要慌，你能不能想到竟然有这么一个库，可以让设计师"帮你实现动画效果"！没错，它就是今天的主角——Lottie。Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能解析 Adobe After Effects 视频制作软件导出的动画，并且在代码中能通过api直接调用这些生成的动画文件，完美实现动画效果，Lottie在这种时候就是救世主级别的存在了。

Lottie官网：https://lottiefiles.com/

lottie效果图.gif

如何使用

看了效果，我们看下如何在Android中快速使用这个库实现各种炫酷动画。

1.导入Lottie库

在app的gradle中导入如下依赖：

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

最新版本可查看GitHub地址：https://github.com/airbnb/lottie-android

注意：Lottie只支持Api16以上，如果项目中minSdkVersion小于16会报错。

2.导入动画文件

Lottie加载动画是靠解析Json文件来实现的，所以需要设计师从After Effect等软件中制作好动画并生成一个Json文件，文件的内容大概是下面这个样子：

json示意图

尽管看起来很复杂，但这都是通过软件生成的，我们只需要将其导入到项目中即可。由于Lottie默认是读取工程的Assets目录，所以我们将Json文件放到src/main/assets目录下。

3.使用姿势

1）静态方式

Lottie库提供了一个LottieAnimationView控件，它本质是一个ImageView，可直接在布局文件中声明：

<com.airbnb.lottie.LottieAnimationView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="anim.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

这里列举了有几个lottie的基本属性

lottie_fileName 调用的Json文件名

lottie_loop 是否开启循环动画

lottie_autoPlay 是否开启自动播放

当然lottie还有很多其他的属性，例如：

lottie_repeatCount 动画重复次数

lottie_repeatMode 动画重复模式

lottie_scale 放大倍数

这里就不一一列举了，运行后效果如下：

lottie demo效果图.gif

2）动态方式

Lottie也支持在代码中动态调用接口：

 LottieAnimationView lottieAnimationView = findViewById(R.id.anim_view);
 lottieAnimationView.setAnimation("anim.json");
 lottieAnimationView.loop(true);
 lottieAnimationView.playAnimation();

3）监听动画进度

Lottie同样提供了监听动画的接口，而且还是我们熟悉的ValueAnimator

lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // 判断动画加载结束
                Log.d("Lottie", "" + valueAnimator.getAnimatedFraction());
            }
});

4）加载动画优化

Lottie的性能比属性动画略逊一筹，不过支持开启硬件加速：

lottieAnimationView.useHardwareAcceleration(true);

Lottie支持对动画的缓存，会在动画加载完成后将其缓存为强缓存和弱缓存

lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Strong);    //强缓存
lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Weak);      //弱缓存

其内部是维护了两个HashMap：

private static final Map<String, LottieComposition> STRONG_REF_CACHE = new HashMap<>();
private static final Map<String, WeakReference<LottieComposition>> WEAK_REF_CACHE =
      new HashMap<>();
public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
    //......
    if (cacheStrategy == CacheStrategy.Strong) {
      STRONG_REF_CACHE.put(animationName, composition);
    } else if (cacheStrategy == CacheStrategy.Weak) {
      WEAK_REF_CACHE.put(animationName, new WeakReference<>(composition));
    }
    //.....
}

原理解析

我们从LottieAnimationView的playAnimation()这个方法看下Lottie的动画流程：

public void playAnimation() {
    lottieDrawable.playAnimation();
    enableOrDisableHardwareLayer();
}

这里调用了一个lottieDrawable的playAnimation()，而lottieDrawable是一个LottieDrawable：

LottieDrawable
LottieDrawable继承于Drawable，Lottie的动画都是在这个LottieDrawable里绘制的，它里面维护了一个LottieValueAnimator(继承于ValueAnimator)，我们调用的loop或者playAnimation之类的方法其实本质上都是调用了它里面这个属性动画的Api：

public void loop(boolean loop) {
    animator.setRepeatCount(loop ? ValueAnimator.INFINITE : 0);
}
private void playAnimation(boolean setStartTime) {
    if (compositionLayer == null) {
      lazyCompositionTasks.add(new LazyCompositionTask() {
        @Override public void run(LottieComposition composition) {
          playAnimation();
        }
      });
      return;
    }
    long playTime = setStartTime ? (long) (progress * animator.getDuration()) : 0;
    animator.start();
    if (setStartTime) {
      animator.setCurrentPlayTime(playTime);
    }
}

那么它是怎么通过这个属性动画去实现绘制的呢？在LottieDrawable的构造方法里，设置了属性动画的监听器，然后将进度传给setProgress：

public LottieDrawable() {
    animator.setRepeatCount(0);
    animator.setInterpolator(new LinearInterpolator());
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override public void onAnimationUpdate(ValueAnimator animation) {
        if (systemAnimationsAreDisabled) {
          animator.cancel();
          setProgress(1f);
        } else {
          setProgress((float) animation.getAnimatedValue());
        }
      }
    });
}
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    this.progress = progress;
    if (compositionLayer != null) {
      compositionLayer.setProgress(progress);
    }
}

可以看到动画过程中会不断触发setProgress，setProgress中调用了CompositionLayer的setProgress，然后再通过CompositionLayer把进度传递到各个图层：

@Override 
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    super.setProgress(progress);
    if (timeRemapping != null) {
      long duration = lottieDrawable.getComposition().getDuration();
      long remappedTime = (long) (timeRemapping.getValue() * 1000);
      progress = remappedTime / (float) duration;
    }
    if (layerModel.getTimeStretch() != 0) {
      progress /= layerModel.getTimeStretch();
    }

    progress -= layerModel.getStartProgress();
    for (int i = layers.size() - 1; i >= 0; i--) {
      layers.get(i).setProgress(progress);
    }
}

各个图层收到通知之后，再处理后回调给LottieDrawable：

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();
    }
}

@Override 
public void onValueChanged() {
    invalidateSelf();
}
private void invalidateSelf() {
    lottieDrawable.invalidateSelf();
}

LottieDrawable收到这些图层的通知就会调用invalidateDrawable来不断刷新自己：

@Override 
public void invalidateSelf() {
    final Callback callback = getCallback();
    if (callback != null) {
      callback.invalidateDrawable(this);
    }
}

以上是Lottie动画绘制的逻辑，时序图如下：

Lottie时序图

那么Lottie是怎么将这些Json数据跟动画关联起来的呢？After Effect制作动画的原理是将动画分为很多个图层，且每个图层有各自的细节动画，这样叠加合成最终的效果。那么Lottie也是同理，分为很多个图层(Layer)，我们看下Json的外层结构如下：

{
    "v": "4.6.0",               //bodymovin的版本
    "fr": 24.291553280921,     //帧率
    "ip": 0,                    //起始关键帧
    "op": 84.0029442951,     //结束关键帧
    "w": 100,                   //动画宽度
    "h": 100,                   //动画高度
    "ddd": 0, 
    "assets": [...]             //资源信息
    "layers": [...]             //图层信息
}

Lottie会通过Json里的数据，解析出动画需要的关键帧信息，并且还有各个图层的动画数据，我们依旧是由表及里，从LottieAnimationView的setAnimation()开始看：

public void setAnimation(String animationName) {
    setAnimation(animationName, defaultCacheStrategy);
}
public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
    //...省略部分代码
    compositionLoader = LottieComposition.Factory.fromAssetFileName(getContext(), animationName,
        new OnCompositionLoadedListener() {
          @Override public void onCompositionLoaded(LottieComposition composition) {
            if (cacheStrategy == CacheStrategy.Strong) {
              STRONG_REF_CACHE.put(animationName, composition);
            } else if (cacheStrategy == CacheStrategy.Weak) {
              WEAK_REF_CACHE.put(animationName, new WeakReference<>(composition));
            }

            setComposition(composition);
          }
    });
}

通过工厂模式从LottieComposition的Factory里读取我们Asset中的Json文件，并且将其转换为LottieComposition对象，那么看下LottieComposition:

static LottieComposition fromJsonSync(Resources res, JSONObject json) {
      Rect bounds = null;
      float scale = res.getDisplayMetrics().density;
      int width = json.optInt("w", -1);
      int height = json.optInt("h", -1);

      if (width != -1 && height != -1) {
        int scaledWidth = (int) (width * scale);
        int scaledHeight = (int) (height * scale);
        bounds = new Rect(0, 0, scaledWidth, scaledHeight);
      }

      long startFrame = json.optLong("ip", 0);
      long endFrame = json.optLong("op", 0);
      float frameRate = (float) json.optDouble("fr", 0);
      String version = json.optString("v");
      String[] versions = version.split("[.]");
      int major = Integer.parseInt(versions[0]);
      int minor = Integer.parseInt(versions[1]);
      int patch = Integer.parseInt(versions[2]);
      LottieComposition composition = new LottieComposition(
          bounds, startFrame, endFrame, frameRate, scale, major, minor, patch);
      JSONArray assetsJson = json.optJSONArray("assets");
      parseImages(assetsJson, composition);
      parsePrecomps(assetsJson, composition);
      parseFonts(json.optJSONObject("fonts"), composition);
      parseChars(json.optJSONArray("chars"), composition);
      parseLayers(json, composition);
      return composition;
}

LottieComposition其实就相当于Json和我们动画属性的一个转换器，将我们的Json数据解析成我们需要的内存数据，然后根据数据创建出一个或多个图层，再结合我们刚才分析的属性动画，实现最终各种酷炫的效果。

总结

Lottie是一个强大的动画库，许多代码实现比较复杂或者难以实现的动画，通过Lottie都能轻易实现，开发效率大大提高，并且后期万一要更换动画，同样十分方便。又或者可以将动画Json通过网络下发，实现动态更换客户端的动画效果。

参考

Lottie，让动画如此简单

GitHub：GitHub-ZJYWidget
CSDN博客：IT_ZJYANG
简书：Android小Y
在 GitHub 上建了一个集合炫酷自定义View的项目，里面有很多实用的自定义View源码及demo，会长期维护，欢迎Star~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手给个Star，谢谢~

关注Android 技术小栈，更多精彩原创

Lottie for Android：一个解放开发者双手的动画神

前言

如何使用

1.导入Lottie库

2.导入动画文件

3.使用姿势

1）静态方式

2）动态方式

3）监听动画进度

4）加载动画优化

原理解析

总结

参考

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android进阶之路

Android开发

Android开发经验谈

Android开发

Android技术知识

安卓面试

Android开发

Android