android：Lottie--让Android动画更优雅

一、 Lottie简介

Lottie是什么？

Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative，利用json文件的方式快速实现动画效果的库。
Lottie项目地址：https://github.com/airbnb/lottie-android

为什么要用Lottie？

在回答这个问题之前，附上官网上几张Lottie实现的图例。

官网lottie图例
官网lottie图例

要实现这些特效，大概有以下几种方式:

1.使用帧动画。但是一个动画需要添加很多张图片，apk体积必然变大，并且还要根据不同的尺寸进行适配。

2. 用 Gif。但是使用Gif 占用空间较大，同样需要为各种屏幕尺寸、分辨率做适配，同时原生Android本身是不支持gif直接展示的。
3. 编码加图片辅助。这种方式繁琐并且不易维护，稍作修改就要推倒重新来过。
4. Android 5.x 之后提供了对 SVG 的支持，通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画，但是问题和前2个类似。

那么，现在有一个方案，不使用大量图片，甚至零图片，不占空间，不占内存，不需要适配，且易于维护，简单而且方便。我们有何理由不投入它的怀抱呢？

二、 Lottie简单使用

AE怎么实现？

Lottie的AE实现是通过Bodymovin插件，作为开发人员，你要做的就是把链接Lottie- 让Android动画实现更简单砸到UI设计师妹子36C的事业上，然后坐等她输出给你一个json文件即可。
PS：咱的UI设计师是个36C的妹纸~

那么，Android程序员如何实现？

1.在build.gradle中添加依赖

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

2.layout文件中添加

<com.airbnb.lottie.LottieAnimationView
     android:id="@+id/lottie_view"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     app:lottie_fileName="test.json"
     app:lottie_loop="true"
     app:lottie_autoPlay="true" />

3.将36C设计师妹纸给你的 json文件放入app/src/main/assets目录中，lottie_fileName属性值中对应填写该 json文件的文件名（包括后缀）。

然后，下面就是见证奇迹的时刻。

没有一张图片，没有一个gif，但是动画效果出来了！就是这么简单，就是这么暴力！

三、Lottie进阶

1. 除了直接在xml文件中使用，Lottie还支持从assets目录中直接读取 json文件、json字符串的方式、stream流等方式。

Lottie进阶使用

2. Lottie还支持从网络获取 json文件，动态更新动画。

     private void loadUrl(String url) {
        Request request = new Request.Builder().url(url).build();
        OkHttpClient client = new OkHttpClient();
        client.newCall(request).enqueue(new Callback() {
            @Override public void onFailure(Call call, IOException e) {}
            @Override public void onResponse(Call call, Response response) throws IOException {
                try {
                    JSONObject json = new JSONObject(response.body().string());
                    LottieComposition.Factory
                            .fromJson(getResources(), json, new OnCompositionLoadedListener() {
                                @Override
                                public void onCompositionLoaded(LottieComposition composition) {
                                    lottieAnimationView.setComposition(composition);
                                    lottieAnimationView.playAnimation();
                                }
                            });
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });
    }

四、总结

Lottie是不是很酷炫，又轻松，且酷炫？！那么，还在等什么呢？赶紧用起来吧。