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

作者：佚名 2017-12-15 11:09:05

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

一、前言

而自從 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 來支持。