站在 Android 開發的角度，聊聊 Airbnb 的 Lottie！！！

承香墨影發表於2019-02-27

一、前言

你有沒有遇上一些設計師，對一些酷炫的動畫著迷，喜歡根據場景設計出可愛而流暢的動畫。但是在實際工作中，哪怕開發人員也覺得這些動畫非常的棒，可我們知道，越是定製化的動畫，實現起來將會越麻煩和耗時。這有時候就會引發設計師和工程師的矛盾。

而自從 Airbnb 開發出 Lottie 之後，設計師只需要使用 After Effects 設計出完美的動畫，然後通過 Bodymovin 外掛進行簡單的轉換和匯出成 JSON，最後工程師將 JSON 放入 App 專案中，就可以將動畫 100% 還原到你的產品中。

二、為什麼要用 Lottie？

Lottie 是一套跨平臺的完整解決方案，設計師只需要使用 After Effectes 設計出動畫之後，使用 Lottic 提供的 Bodymovin 將設計好的動畫匯出成 JSON 格式，就可以直接運用在 iOS、Android 和 React Native之上，無需關心中間的實現細節。

對於不同的工作角色，Lottie 給你帶來的都是更簡潔的工作流。

如果你是 Designer，你可以充分發揮你的動畫設計天分，因為它們最終會被 100% 的還原。
如果你是 Engineer，你可以通過簡單的匯入和有限的程式碼，就可以實現設計師要求的動畫，並且 Lottie 並不臃腫。
如果你是 Product Manager，你的產品將具有更人性化的酷炫動畫，而這並不會帶來開發週期的延長。

整體來說，Lottie 是一個優秀的專案，它能解決很多關於動畫上的溝通問題和提供解決方案。可它依然有一些不足的地方：

系統版本限制，Android（Api 14+）和 iOS(>=8.0) 都有不同的版本限制。
有一些互動動畫，不被支援，哪怕匯出了也無法被正常執行。
Bodymovin 外掛還有待完善，有些 After Effects 實現的效果，無法被正常匯出。

而今天，我們站在一個 Android 工程師的角度，來看看如何使用 Lottie。這裡只聊 Android 下使用 Lottie，如何編輯動畫，如何安裝外掛，這些都是設計師需要關心的，對我們而言，拿到的就是一個 Lottie 動畫的 JSON 檔案，我們只需要關心如何使用它。

三、在 Android 下使用 Lottie

3.1 開始使用

Lottie 可以支援並且也是僅支援 Gradle 進行構建配置，因此，我們只需要在 build.gradle 檔案中進行簡單的匯入就好了。

最簡單的使用方式是直接使用 LottieAnimationView ，LottieAnimationView 直接繼承自 AppCompatImageView 。

只需要提前將動畫的 JSON 檔案，放在 app/src/main/assets 目錄下，在 Layout 佈局檔案中，可以直接使用。

它支援幾個屬性：

lottie_fileName : 播放動畫的 json 檔案。
lottie_loop：是否迴圈播放，預設為 false。
lottie_autoPlay：是否載入完成之後，自動播放，預設為 false。

當然，你也可以使用邏輯程式碼去控制 Lottie 動畫的播放，使用起來也非常的簡單。

這個方法會去載入 JSON 檔案，並解析動畫，之後在子執行緒中開始非同步渲染動畫。

3.2 載入其他來源的 Lottie

我們的 Lottie 動畫的 JSON 可以從任何地方載入，這裡就需要使用到 LottieComposition.Factory 這個類去載入不同來源的 JSON 檔案。在這個 Factory 中，提供了很多 fromXxx() 的方法，用於載入動畫的 JSON 。

一個比較常用的方式，例如我們從一個 JSONObject 中，載入 Lottie 動畫。

fromXxx() 方法，會返回一個 Cancellable 介面，標識它是一個可被取消的方法，如果有需要，可以呼叫它的 cancel() 方法。

Lottie 的動畫載入器，看著有很多 fromXxx() 方法，其實最終指向的都是 FileCompositionLoader 和 JsonCompositionLoader ，這兩個載入器，都是繼承自 AsyncTask 的，所以 cancel() 方法其實就是取消的這個 AsyncTask 的執行，有興趣的可以查閱這方面的原始碼。

3.3 Lottie 動畫的監聽

Lottie 作為一個動畫，也是提供了一些監聽器用於監聽動畫執行的情況的。

例如，想要監聽動畫的開始結束等狀態，可以使用 addAnimatorListener() 方法，它接受一個 Animator.AnimatorListener() 介面，我們只需要實現對應的方法就行了。

而如果我們想要監聽 Lottie 動畫的中間狀態，例如執行的進度等等，可以使用 addAnimatorUpdateListener()。

控制進度非常的有用，因為有一些動畫，例如就是一個進度條的動畫，控制進度就顯得非常重要了。

3.4 控制 Lottie 動畫執行的速度和時間

Lottie 動畫，在匯出成 JSON 之後，其實動畫執行的速度和時長，都是已經固定了的。所以如果想要修改這兩個引數，除了麻煩設計師使用 After Effects 重新修改之後再匯出之外，還可以使用 ValueAniamtor 配合 setProgress() 方法來實現。

3.5 直接使用 LottieDrawable

LottieAnimationView 其實內部使用的是 LottieDrawable ，如果有需要你也可以直接使用它。

3.6 動畫裡有圖片

有時候，我們的動畫不僅僅是畫上去的，還有可能會使用到一些圖片資源。如果遇到這樣的情況，同時使用的是本地資源圖片，可以使用 setImageAssetsFolder() 設定一個 Lottie 動畫中使用到的圖片資料夾的相對路徑，並確保他們和 bodymovin 外掛輸出的用到的圖片檔名稱，保持不變。

如果你需要載入圖片，你使用 LottieAnimationView 你可以很省心，不需要額外處理，但是如果你直接使用 LottieDrawable 的話，使用完成之後，需要手動呼叫 recycleBitmaps() 進行資源的回收。

而假如我們需要自己配置圖片的位置，例如是從網路中下載的圖片，可以使用一個 ImageAssetDelegate 來支援。