Lottie是什麼？

炫酷動畫圖譜網站：https://www.lottiefiles.com/，直接下載使用

Lottie是Airbnb開源的一個支援 Android、iOS 以及 ReactNative，利用json檔案的方式快速實現動畫效果的庫。這麼看可能很難理解，接下來我將詳細的講解如何使用。
Lottie專案地址：https://github.com/airbnb/lottie-android

首先先無恥的把我自己寫的demo程式和原始碼放上來。

Lottie如何使用？

一、Lottie能幹什麼？

在回答Lottie能幹什麼之前，我們先想下如下的動畫如何實現？

我想大概有幾種方式:
使用幀動畫。這種方式固然可行，但是一個需要動畫新增很多張圖片，勢必會導致apk體積變大，並且還要根據不同的尺寸進行適配。

• 用 Gif。但是使用 Gif 佔用空間較大，而且需要為各種螢幕尺寸、解析度做適配，並且Android本是不支援gif直接展示的。
• 用程式碼加圖片輔助。如之前寫的 仿照駕校一點通歡迎頁，這種方式繁瑣並且每更新一次都需要重新寫很多程式碼。
• Android 5.x 之後提供了對 SVG 的支援，通過 VectorDrawable、AnimatedVectorDrawable 的結合可以實現一些稍微複雜的動畫，但是問題和前2個類似。

那麼有沒有什麼方式是即可以方便的實現動畫效果，又可以不用考慮適配的問題，而且Android、ios還可以相容呢?

Lottie就是支援Android, iOS, 和React Native,並且只需簡單的程式碼就可以實現複雜動畫效果的庫

二、Lottie在Android端怎麼用？

假設我們要做一個緩衝資料時的一個loading動畫，不用Lottie之前你們公司的美工一般都會給一個gif動畫效果和一些切好的一幀一幀的圖片。現在不需要這麼操作了，只要你們公司的美工做如下的操作：

下面是公司帥帥的美工的工作

1. 讓設計師使用Adobe 的 After Effects(簡稱 AE)工具(美工一般都會這個)製作這個動畫。
   AE的下載地址:連結： http://pan.baidu.com/s/1misKrzU 密碼：f2t7 (安裝破解什麼的就自行百度吧)
2. 在AE中安裝一個叫做Bodymovin的外掛。
   下載 ，解壓縮後只需要\build\extension\bodymovin.zxp這個檔案就可以
   1478641334-9003-svgani1
   3.手動安裝plugin，以windows系統而言，要先下載 **ExMan Command Line tool **並解壓縮。
   再來把下載的bodymovin壓縮後的 bodymovin-master\build\extension 目錄下的bodymovin.zxp 這個檔案複製進去同一個資料夾。1478641336-7754-svgani3

4.去找cmd，並以系統管理員身分執行。

5.打“cd C:/ExManCmd_win 所在的路徑 “，進入ExManCmd的資料夾中

6.接著打 ExManCmd.exe /install bodymovin.zxp 就完成了

7.再來進入AE 後，可以在windows/extentions/bodymovin 找到外掛，開啟後按下Render 就完成了。 重點來了，這時會在你選的Destination Folder目錄中生成一個json格式的檔案，這個 json 檔案描述了該動畫的一些關鍵點的座標以及運動軌跡。請帥帥的美工把這個檔案發給你苦逼的程式設計師兄弟吧！

下面就是苦逼Android程式設計師應該如何做咯

1.在build.gradle中新增

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

2.layout檔案中新增

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

3.將帥帥的美工給你的json檔案重新命名為xml中lottie_fileName的值，如上就是hello-world.json。將hello-world.json放入 app/src/main/assets目錄中。打包吧！！

然後你就會發現奇蹟出現了，沒有一張圖片，沒有一個gif，但是動畫效果出來了！就是這麼簡單，就是這麼暴力！

三、Lottie進階，如何更加高效和方便的實用？

1.最簡單的使用方式就是上方直接在xml中定義的方式。
2.使用程式碼的方式，支援從assets目錄中直接讀取json檔案、json字串的方式、stream流的方式等

client.newCall(request).enqueue(new Callback() {
            @Override public void onFailure(Call call, IOException e) {

            }

            @Override public void onResponse(Call call, Response response) throws IOException {
                if (!response.isSuccessful()) {
                }

                try {
                    JSONObject json = new JSONObject(response.body().string());
                    LottieComposition.fromJson(getResources(), json, new LottieComposition.OnCompositionLoadedListener() {
                                @Override
                                public void onCompositionLoaded(LottieComposition composition) {
                                    setComposition(composition);
                                }
                            });
                } catch (JSONException e) {
                }
            }
        });

四、Lottie例子程式

為了更好的讓你瞭解這個庫，我寫了一個簡單的demo，請大家幫忙點star !

感激