Airbnb-Lottie-android

动画相信大家都不陌生，在 App 开发过程中，适当的使用动画可以提升用户体验，使我们的产品锦上添花，对于一些简单的动画，我们很容易就能实现，但是对于一些比较复杂的动画，实现起来就比较麻烦了
比如：

这些可不是简单的移动、缩放、旋转就搞得定的，可能有些人思考了之后大概有以下实现思路：

1. 使用 Gif，这种方式当然可行，但是使用 Gif 占用空间较大，而且需要为各种屏幕尺寸、分辨率做适配，因为 Android 没有提供原生 Gif 的 api 支持，所以这种方案还会遇到兼容性问题；

2.使用帧动画，这种方式还不如使用 Gif，一般来说使用帧动画占用空间比 Gif 还要大的多，而且一样要做多屏幕分辨率的适配，不过不会遇到兼容性问题；

3.使用视频，这种方式当然可以，但是一般来说宣传片才用的上视频，一般的动画远不需要用视频才能实现的，未免有些大材小用了，而且占用空间依然很大

就没有更好的实现方式了么？

当然有，Android 5.x 之后提供了对 SVG 的支持，通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画，兼容性是一个问题，不过整个实现流程非常麻烦，每次全新实现一个动画都得重头来过，最最关键的是，如果一个公司下的 App，iOS 也要实现一套一样的动画，资源的占用就显得过大了。

而 Airbnb 开源的这个项目完美的解决以上难题，我们来看下整个流程是什么样的。

一般设计师会用 Adobe 旗下的 After Effects （简称 AE）来做个动画出来，设计师用 AE 做个动画比工程师用代码去实现一个动画要快的多的多，调整起来也很方便，之后 AE 上有一款插件叫做 Bodymovin，这个插件也比较屌，可以直接根据 AE 上的动画文件导出 json 文件，这个 json 文件描述了该动画的一些关键点的坐标以及运动轨迹，之后我们在项目中引用 Lottie 开源库

build.gradle file:

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

lottie 支持 Jellybean (API 16) 及以上。

在布局文件中:

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

或者你可以在代码里动态的加载

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

ps:我们的 xxx.json 文件只需要放在 app/src/main/assets 目录下就 ok 了

这个方法将加载文件并在后台解析动画，解析完成即开始异步渲染。

如果你想复用动画比如列表的每个item中或者从网络请求一个JSONObject：

     LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
     ...
     LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -> {
         animationView.setComposition(composition);
         animationView.playAnimation();
     });

然后你就可以控制动画并添加listener了：

    animationView.addAnimatorUpdateListener((animation) -> {
        // Do something.
    });
    animationView.playAnimation();
    ...
    if (animationView.isAnimating()) {
        // Do something.
    }
    ...
    animationView.setProgress(0.5f);
    ...
    // Custom animation speed or duration.
    ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
        .setDuration(500);
    animator.addUpdateListener(animation -> {
        animationView.setProgress(animation.getAnimatedValue());
    });
    animator.start();
    ...
    animationView.cancelAnimation();

在底层LottieAnimationView使用LottieDrawable来渲染动画，如果你需要，你可以直接使用drawable：

    LottieDrawable drawable = new LottieDrawable();
    LottieComposition.fromAssetFileName(getContext(), "Alarm.json", (composition) -> {
        drawable.setComposition(composition);
    });

有了这个库，我们可以充分发挥我们的想象力，很简单方便的就实现了一套很酷炫的动画，最重要的是，这个库是跨平台的，支持 Android、iOS 以及 ReactNative，共用一套 json 动画描述文件。

其实 Facebook 前段时间开源了一个类似的库叫做 Keyframes，也是跨平台的，但是 Littie 比 Keyframes 支持的特性更多，而且据 Airbnb 官方博客介绍，以后对让这个库支持更多的特性与功能，不得不说，真乃良心！

最后，这个库的开源地址在这里：

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