Android Lottie動畫使用

1、簡介

Lottie 是Airbnb開源的一個面向 iOS、Android、React Native 的動畫庫，能分析 Adobe After Effects 導出的動畫，而且能讓原生 App 像使用靜態素材同樣使用這些動畫，完美實現動畫效果。

2、Lottie動畫文件製做

1.讓設計師使用Adobe 的 After Effects(簡稱 AE)工具(美工通常都會這個)製做這個動畫。

2.在AE中安裝一個叫作Bodymovin的插件。 下載 bodymovin，解壓縮後只須要\build\extension\bodymovin.zxp這個檔案就能夠

3.手動安裝plugin，以windows系統而言，要先下載 **ExMan Command Line tool **並解壓縮。 再來把下載的bodymovin壓縮後的 bodymovin-master\build\extension 目錄下的bodymovin.zxp 這個檔案複製進去同一個資料夾。

4.去找cmd，並以系統管理員身分執行。 5.打「cd C:/ExManCmd_win 所在的路徑 「，進入ExManCmd的資料夾中 6.接着打 ExManCmd.exe /install bodymovin.zxp 就完成了

7.再來進入AE 後，能夠在windows/extentions/bodymovin 找到插件，開啓後按下Render 就完成了。 重點來了，這時會在你選的Destination Folder目錄中生成一個json格式的文件，這個 json 文件描述了該動畫的一些關鍵點的座標以及運動軌跡。

3、如何使用Lottie

Lottie支持多平臺，使用同一個JSON動畫文件，可在不一樣平臺實現相同的效果。支持Android，ios，前段。

1.依賴

在項目的 build.gradle 文件添加依賴

dependencies {  
  compile 'com.airbnb.android:lottie:2.1.0'
}
複製代碼

2.動畫文件

第一種方法，將咱們所須要的動畫文件loading.json保存在app/src/main/assets文件裏。 第二種方法，網絡上AE生成的動畫文件。(網絡連接)

3.使用

在佈局文件中使用

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="400dp"
        android:layout_height="400dp"
        app:lottie_fileName="loading.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>
複製代碼

使用網絡加載AE生成的動畫文件json

private void loadUrl(String url) {
    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.Factory
                            .fromJson(getResources(), json, new OnCompositionLoadedListener() {
                                @Override
                                public void onCompositionLoaded(LottieComposition composition) {
                                    setComposition(composition);
                                }
                            });
                } catch (JSONException e) {
                }
            }
        }
    });
}

private void setComposition(LottieComposition composition){
    animation_view.setProgress(0);
    animation_view.loop(true);
    animation_view.setComposition(composition);
    animation_view.playAnimation();
}
複製代碼

4、Lottie實現原理

設計師把一張複雜的圖片使用多個圖層來表示，每一個圖層展現一部份內容，圖層中的內容也能夠拆分爲多個元素。拆分元素以後，根據動畫需求，能夠單獨對圖層或者圖層中的元素作平移、旋轉、收縮等動畫。

Lottie的使用的資源是須要先經過bodymovin( bodymovin 插件自己是用於網頁上呈現各類AE效果的一個開源庫)將 Adobe After Effects (AE)生成的aep動畫工程文件轉換爲通用的json格式描述文件。Lottie則負責解析動畫的數據，計算每一個動畫在某個時間點的狀態，準確地繪製到屏幕上。

Lottie主要類圖：

Lottie對外經過控件LottieAnimationView暴露接口，控制動畫。

LottieAnimationView繼承自ImageView，經過當前時間繪製canvas顯示到界面上。這裏有兩個關鍵類：LottieComposition 負責解析json描述文件，把json內容轉成Java數據對象；LottieDrawable負責繪製，把LottieComposition轉成的數據對象繪製成drawable顯示到View上。順序以下：

解析json外部結構 LottieComposition封裝整個動畫的信息，包括動畫大小，動畫時長，幀率，用到的圖片，字體，圖層等等。

{
    "v": "4.6.0",               //bodymovin的版本
    "fr": 29.9700012207031,     //幀率
    "ip": 0,                    //起始關鍵幀
    "op": 141.000005743048,     //結束關鍵幀
    "w": 800,                   //動畫寬度
    "h": 800,                   //動畫高度
    "ddd": 0, 
    "assets": [...]             //資源信息
    "layers": [...]             //圖層信息
}
複製代碼

解析圖片資源

"assets": [                 //資源信息
    {                       //第一張圖片
        "id": "image_0",    //圖片id
        "w": 58,            //圖片寬度
        "h": 31,            //圖片高度
        "u": "images/",     //圖片路徑
        "p": "img_0.png"    //圖片名稱
    },
    {...}                   //第n張圖片
]
複製代碼

解析圖層

"layers": [                 //圖層信息
    {                       //第一層動畫
        "ddd": 0, 
        "ind": 0,           //layer id 圖層 id
        "ty": 4,            //圖層類型
        "nm": "center_circle", 
        "ks": {...},        //動畫
        "ao": 0, 
        "shapes": [...], 
        "ip": 0,            //inFrame 該圖層起始關鍵幀
        "op": 90,           //outFrame 該圖層結束關鍵幀
        "st": 0,            //startFrame 開始
        "bm": 0, 
        "sr": 1
    }, 
    {...}                   //第n層動畫
]
複製代碼

如何動起來 時序圖

利用屬性動畫控制進度，每次進度改變通知到每一層，觸發LottieAnimationView重繪。 代碼以下：

public LottieDrawable() {
    animator.setRepeatCount(0);
    animator.setInterpolator(new LinearInterpolator());
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            if (systemAnimationsAreDisabled) {
                animator.cancel();
                setProgress(1f);
            } else {
                setProgress((float) animation.getAnimatedValue());
            }
        }
    });
}
複製代碼

經過CompositionLayer把進度傳遞到各個圖層

@Override
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    super.setProgress(progress);
    if (timeRemapping != null) {
        long duration = lottieDrawable.getComposition().getDuration();
        long remappedTime = (long) (timeRemapping.getValue() * 1000);
        progress = remappedTime / (float) duration;
    }
    if (layerModel.getTimeStretch() != 0) {
        progress /= layerModel.getTimeStretch();
    }
    progress -= layerModel.getStartProgress();
    for (int i = layers.size() - 1; i >= 0; i--) {
        layers.get(i).setProgress(progress);
    }
}
複製代碼

通知進度改變

void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    if (progress < getStartDelayProgress()) {
      progress = 0f;
    } else if (progress > getEndProgress()) {
      progress = 1f;
    }

    if (progress == this.progress) {
      return;
    }
    this.progress = progress;

    for (int i = 0; i < listeners.size(); i++) {
      listeners.get(i).onValueChanged();
    }
  }
複製代碼

最終回調到LottieAnimationView的invalidateDrawable

@Override
public void invalidateDrawable(@NonNull Drawable dr) {
    if (getDrawable() == lottieDrawable) {
      // We always want to invalidate the root drawable so it redraws the whole drawable.
      // Eventually it would be great to be able to invalidate just the changed region.
        super.invalidateDrawable(lottieDrawable);
    } else {
      // Otherwise work as regular ImageView
        super.invalidateDrawable(dr);
    }
}
複製代碼

最後觸發LottieDrawable重繪

@Override
public void draw(@NonNull Canvas canvas) {
    ...
    matrix.reset();
    matrix.preScale(scale, scale);
    compositionLayer.draw(canvas, matrix, alpha);   //這裏會調用全部layer的繪製方法
    if (hasExtraScale) {
        canvas.restore();
    }
}
複製代碼

5、性能

1.官方說明

若是沒有mask和mattes，那麼性能和內存很是好，沒有bitmap建立，大部分操做都是簡單的cavas繪製。

若是存在mattes，將會建立2～3個bitmap。bitmap在動畫加載到window時被建立，被window刪除時回收。因此不宜在RecyclerView中使用包涵mattes或者mask的動畫，不然會引發bitmap抖動。除了內存抖動，mattes和mask中必要的bitmap.eraseColor()和canvas.drawBitmap()也會下降動畫性能。對於簡單的動畫，在實際使用時性能不太明顯。

若是在列表中使用動畫，推薦使用緩存LottieAnimationView.setAnimation(String, CacheStrategy) 。

2.屬性動畫和Lottie動畫對比

Lottie動畫在未開啓硬件加速的狀況下，幀率、內存，CPU都比屬性動畫差，開啓硬件加速後，性能差很少。

3.未開啓硬件加速，Lottie動畫大小幀率對比

主要耗時在draw方法，繪製區域越小，耗時越小

6、總結

1.劣勢

（1）性能不夠好—某些動畫特效，內存和性能不夠好；相對於屬性動畫，在展現大動畫時，幀率較低

2.優點

(1)開發效率高—代碼實現簡單，更換動畫方便，易於調試和維護。

(2)數據源多樣性—可從assets,sdcard,網絡加載動畫資源，能作到不發版本，動態更新

(3)跨平臺—設計稿導出一份動畫描述文件，android,ios,react native通用

(4) Lottie使用簡單，易於上手，很是值得嘗試。

7、小技巧

1. 不想使用 LottieAnimationView 的同窗可使用 LottieDrawable 來承載Lottie 動畫，使用方法以下

LottieDrawable tj = new LottieDrawable();
    LottieComposition.Factory.fromInputStream(stream, new OnCompositionLoadedListener() {
        @Override
        public void onCompositionLoaded(@Nullable LottieComposition composition) {
            drawable.setComposition(composition);
        }
    });
    tj.loop(true);

複製代碼

2. 可經過 Sample App 查看設計同窗生成的動畫的一些性能數據，如幀率等關鍵因素(筆者在實際項目中拒絕了渲染超過7ms的動畫)

8、文末福利

1.Lottie動畫庫

2.Lottie官方樣例