Lottie 一个神奇的动画库

" Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web! "
摘自官方介绍
Lottie 是 Airbnb 开源的动画库，能够支持 Android、iOS/MacOS 、React Native、Web 四个平台。只需要设计师使用Adobe After Effects（简称 AE） 设计出动画后， 使用Bodymovin插件将动画导出成JSON文件交给开发同学，开发同学就可以通过集成Lottie，在程序中几行代码就可以解析出json将动画呈现到界面，不需要再痛苦的计算动画元素移动的距离、播放的时间、出现的时机和位置，不需要痛苦一整天做出的东西再设计师来回拉着不停的调效果 ：）

Lottie 支持 Android API16及以上（"Lottie supports API 16 and above." 摘自官方介绍）。
Lottie 支持 iOS 8+ ,支持 MacOS 10.10+（" Lottie supports iOS 8+ and MacOS 10.10+." 摘自官方介绍）。

Lottie-android 的简单使用

1、首先在build.gradle 中添加如下代码：

  dependencies {
      compile 'com.airbnb.android:lottie:2.5.+'
  }

2、最简单的使用是直接在布局中添加：

TwitterHeart.json文件位于 app/src/main/assets 目录下，你也可以用下面的方式加载 assets目录下的json文件

    mLottieAnimationView = findViewById(R.id.activity_lottie_lav);
    mLottieAnimationView.setAnimation("TwitterHeart.json");
    mLottieAnimationView.loop(true);
    mLottieAnimationView.playAnimation();

json文件也可以放res/raw 目录下

 mLottieAnimationView.setAnimation(R.raw.TwitterHeart);

也可以从网络加载，方便在不发版的情况下替换动画（这个没有实验，栗子来自官方文档）：

"
LottieAnimationView animationView = ...
// This allows lottie to use the streaming deserializer mentioned above.
JsonReader jsonReader = new JsonReader(new StringReader(json.toString()))
animationView.setAnimation(jsonReader)
animationView.playAnimation
"

LottieAnimationView 中提供了控制动画播放、暂停、添加监听的方法

image.png

也可以使用LottieDrawable ，LottieDrawable 中也同样提供了控制动画播放、暂停、添加监听的方法

 final LottieDrawable drawable = new LottieDrawable();
    LottieComposition.Factory.fromAssetFileName(LottieActivity.this, "TwitterHeart.json", new OnCompositionLoadedListener() {
        @Override
        public void onCompositionLoaded(@Nullable LottieComposition composition) {
            drawable.setComposition(composition);
            drawable.playAnimation();
            drawable.loop(true);
            //mImageView.setImageDrawable(drawable); 使用ImageView 画面会模糊
            mLottieAnimationView.setImageDrawable(drawable);
        }
    });
}

Lottie-android 的简单分析

Lottie 使用起来很简单，主要就三个类 LottieAnimationView 、LottieDrawable 、LottieComposition。
LottieAnimationView 是一个extends AppCompatImageView 的控件，LottieComposition 是AE中Bodymovin的组合模型 ，LottieComposition 中提供fromJsonSync函数将json数据中的每一个layer解析并addLayer，最后将layers交个LottieDrawable 绘制 并提供一系列控制动画的方法，LottieAnimationView 中主要是操作 LottieDrawable 和LottieComposition。

可以看一下 LottieComposition 解析json的代码

fromJsonSync

LottieCompositionParser.parse部分

看一下 LottieDrawable 的draw ()，在draw()中用compositionLayer.draw()绘制layer，CompositionLayer是继承自BaseLayer ，draw()由BaseLayer 提供， draw()中调用 drawLayer()，drawLayer()是BaseLayer提供的抽象方法，CompositionLayer继承BaseLayer 实现该方法。

LottieDrawable draw()

BaseLayer draw()

CompositionLayer drawLayer()

可以看出 Lottie直接把动画数据放到drawable上了，动效的实现是drawable而不是多个view交互。

大概就这样吧~