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

1、前言

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

而自從 Airbnb 開發出 Lottie 以後，設計師只須要使用 After Effects 設計出完美的動畫，而後經過 Bodymovin 插件進行簡單的轉換和導出成 JSON，最後工程師將 JSON 放入 App 項目中，就能夠將動畫 100% 還原到你的產品中。

2、爲何要用 Lottie？

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

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

• 若是你是 Designer，你能夠充分發揮你的動畫設計天分，由於它們最終會被 100% 的還原。
• 若是你是 Engineer，你能夠經過簡單的導入和有限的代碼，就能夠實現設計師要求的動畫，而且 Lottie 並不臃腫。
• 若是你是 Product Manager，你的產品將具備更人性化的酷炫動畫，而這並不會帶來開發週期的延長。

總體來講，Lottie 是一個優秀的項目，它能解決不少關於動畫上的溝通問題和提供解決方案。可它依然有一些不足的地方：

1. 系統版本限制，Android（Api 14+） 和 iOS(>=8.0) 都有不一樣的版本限制。
2. 有一些交互動畫，不被支持，哪怕導出了也沒法被正常執行。
3. Bodymovin 插件還有待完善，有些 After Effects 實現的效果，沒法被正常導出。

而今天，咱們站在一個 Android 工程師的角度，來看看如何使用 Lottie。這裏只聊 Android 下使用 Lottie，如何編輯動畫，如何安裝插件，這些都是設計師須要關心的，對咱們而言，拿到的就是一個 Lottie 動畫的 JSON 文件，咱們只須要關心如何使用它。

3、在 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 來支持。

4、查缺補漏

Lottie 官方提供了一個 App，能夠用於加載一個 Lottie 的動畫，在排查問題方面，很是有用，建議若是使用 Lottie 的話，最好安裝把玩一下。Lottie.Apk 須要去 Google Play 上下載，不方便下載的能夠在公衆號回覆 "lottieapk"，直接下載 Apk 文件。

4.1 性能

既然是動畫，確定有性能的要求。能夠藉助 Lottie App，來看看動畫執行的性能問題，直接看效果就行了。

4.2 故障排除

有時候，設計師設計的動畫，有些效果是沒法被 Lottie 還原的。遇到這樣的狀況，能夠在代碼中調用 getWarning() 獲取動畫的警告詳細輸出。

還有一個方法是直接在官方提供的 Lottie.App 中，去加載設計師提供的 JSON 文件，若是出錯，右上角會有一個 warning 的標記，點擊能夠查看到詳情。

5、動畫資源

若是你由於各類緣由，沒有辦法專門由一個設計師來爲你的 App 定製動畫效果，你也能夠嘗試找找線上公開的一些 Lottie 的動畫效果，這裏推薦使用 LottieFiles 這個網站。

LottieFiles:

https://www.lottiefiles.com/

LottieFiles 提供了不少小的動畫效果，而且能夠直接下載成 JSON ，或者生成二維碼，可供 Lottie App 掃描看效果。

LottieFiles 上的效果，雖然很是的好用，惟一的問題就是基本上，咱們做爲工程師是沒法編輯的，因此只能去套用效果。

6、小結

Android 使用 Lottie 的全部細節，本文已經說清楚了，還有細節須要瞭解，就只能閱讀文檔，或者查看官方文檔了。

Lottie Github：

https://github.com/airbnb/lottie-android

Lottie 官方文檔：

http://airbnb.io/lottie/

關於 Lottie ，你在使用的過程當中，有沒有遇到什麼坑？能夠在留言區留言一塊兒討論。

今天在承香墨影公衆號的後臺，回覆『成長』。我會送你一些我整理的學習資料，包含：Android反編譯、算法、設計模式、虛擬機、Linux、Kotlin、Python、爬蟲、Web項目源碼。

推薦閱讀：

• Drawable 的這些經常使用小技巧，提升開發效率！
• Android 軟鍵盤的顯示和隱藏，這樣操做就對了
• Android 反編譯利器，jadx 的高級技巧
• 關於如何編寫 Clean Code 的 6 個簡單技巧
• 手寫你的第一個 Dalvik 版的 HelloWorld ！