lottie簡介

Lottie，Airbnb開源的動畫框架,是基于CALayer的動畫， 所有的路徑預先在AE中計算好， 轉(zhuǎn)換為Json文件， 然后自動轉(zhuǎn)換為Layer的動畫。
Lottie有各種不同的版本， 安卓， iOS， 前端都可以使用， 理論上動畫做一套就可以共用， 大大的減少了工作量.以后如果要是實現(xiàn)復雜的動畫，可以直接讓設(shè)計出相關(guān)的動畫json文件，大大減輕了代碼的工作量?，F(xiàn)在有了 Lottie，只要設(shè)計師用 AE 設(shè)計動畫，利用 bodymovin 導出 ，導入到 assets, 再寫下面那么點代碼就可以實現(xiàn)了

入門使用方法:

1.選擇項目build.gradle文件，并在依賴項塊中添加以下一行：

    //Lottie動畫
    implementation "com.airbnb.android:lottie:3.6.0"

2. 純布局實現(xiàn)動畫效果 將LottieAnimationView添加到您的布局

(1) 使用網(wǎng)絡(luò)json文件去加載動畫 通過' lottie_url '屬性來使用 需要解析json

<com.airbnb.lottie.LottieAnimationView
     android:id="@+id/animationView"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:lottie_url="REPLACE_JSON_URL"
     app:lottie_autoPlay="true"
     app:lottie_loop="true"/>

上面方法是通過外網(wǎng)的鏈接地址來加載動畫的,其實可以通過本地json文件加載
在項目的res下創(chuàng)建raw文件夾,把json文件放入raw下 使用lottie_rawRes指向json文件地址

(2)使用本地json文件去加載動畫 通過' lottie_rawRes '屬性來使用 (raw目錄下的文件)

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"/>

只是上面的布局其實就可以簡單實現(xiàn)一個動畫啦!

3. 通過代碼實現(xiàn)動畫效果

代碼使用方法一:

將LottieAnimationView添加到您的布局 通過代碼實現(xiàn)動畫效果 如以下代碼 布局 通過' lottie_fileName ' (assets目錄下的文件)

 <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" />

java代碼設(shè)置:

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

setAnimation有三個方法

image.png

其中String是fileName，是在assets目錄下的文件，CacheStrategy表示緩存策略，

代表使用何種策略進行存儲，默認為None即不存儲，而使用時會優(yōu)先從內(nèi)存緩存中命中讀取，從而減小IO開銷。
JSONObject直接傳入一段json數(shù)據(jù)，可以通過網(wǎng)絡(luò)獲取一段json進行解析處理。

代碼使用方法二: 使用LottieComposition

image.png

在LottieComposition中提供了三種from方法，可以接受assets文件名、json對象、流對象三種參數(shù)，Sync表示同步，但是卻是包可見方法，并不能被外部調(diào)用。

LottieComposition.fromJson(getResources(), jsonObject, new LottieComposition.OnCompositionLoadedListener() {
    @Override
    public void onCompositionLoaded(LottieComposition composition) {
        animationView.setComposition(composition);
        animationView.playAnimation();
    }
});

外部調(diào)用時只提供異步方法，使用AsyncTask進行異步調(diào)用，將JsonObject的解析處理過程放在異步線程處理，并將解析生成的LottieComposition對象回調(diào)主線程，因為這個json對象可能有上百k之大，所以整個處理過程的復雜度和耗時還是很高的，所以不要在ui線程中解析處理。

一點想法：

我們可以通過請求的方式獲取json對象，并將解析的過程放在網(wǎng)絡(luò)請求的異步線程中處理，使用反射調(diào)用同步方法，將調(diào)用放在異步線程中執(zhí)行，這樣就可以將整個過程請求和解析的過程封裝在一起。

注意點：

LottieAnimationView內(nèi)部有個LottieDrawable對象，setComposition方法實質(zhì)上是將LottieComposition應用到LottieDrawable上，官方readme上有這樣一段說明

但應該是后面改過，LottieDrawable是包可見的，外部無法調(diào)用到，并且在LottieDrawable類注釋上有這樣一段描述。

image

推薦使用LottieAnimationView而不是直接使用LottieDrawable，因為LottieDrawable的回收LottieAnimationView幫你做了，而自己操作LottieDrawable需要考慮的回收調(diào)用。

所以僅推薦以上兩種用法，不推薦直接使用Drawable的方式除非一定需要

Thanks

• 在線編輯 Lottie json 文件
• lottie官方動畫使用文檔
• airbnb/lottie-android
• lottie
• bodymovin
• lottie動畫資源社區(qū)
• DylanCaiCoding/LoadingHelper
• KingJA/LoadSir
• BottomNavigationView
• Material design - Bottom Navigation
• 提示
• bodymovin的安裝與使用**

轉(zhuǎn)載請備注原文章鏈接謝謝!