一、前言

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

[[213433]]

而自從 Airbnb 開發(fā)出 Lottie 之后，設(shè)計師只需要使用 After Effects 設(shè)計出***的動畫，然后通過 Bodymovin 插件進行簡單的轉(zhuǎn)換和導出成 JSON，***工程師將 JSON 放入 App 項目中，就可以將動畫 100% 還原到你的產(chǎn)品中。

二、為什么要用 Lottie?

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

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

• 如果你是 Designer，你可以充分發(fā)揮你的動畫設(shè)計天分，因為它們最終會被 100% 的還原。
• 如果你是 Engineer，你可以通過簡單的導入和有限的代碼，就可以實現(xiàn)設(shè)計師要求的動畫，并且 Lottie 并不臃腫。
• 如果你是 Product Manager，你的產(chǎn)品將具有更人性化的酷炫動畫，而這并不會帶來開發(fā)周期的延長。

整體來說，Lottie 是一個優(yōu)秀的項目，它能解決很多關(guān)于動畫上的溝通問題和提供解決方案。可它依然有一些不足的地方：

• 系統(tǒng)版本限制，Android(Api 14+) 和 iOS(>=8.0) 都有不同的版本限制。
• 有一些交互動畫，不被支持，哪怕導出了也無法被正常執(zhí)行。
• Bodymovin 插件還有待完善，有些 After Effects 實現(xiàn)的效果，無法被正常導出。

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

三、在 Android 下使用 Lottie

3.1 開始使用

Lottie 可以支持并且也是僅支持 Gradle 進行構(gòu)建配置，因此，我們只需要在 build.gradle 文件中進行簡單的導入就好了。

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

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

它支持幾個屬性：

• lottie_fileName : 播放動畫的 json 文件。
• lottie_loop：是否循環(huán)播放，默認為 false。
• lottie_autoPlay：是否加載完成之后，自動播放，默認為 false。

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

這個方法會去加載 JSON 文件，并解析動畫，之后在子線程中開始異步渲染動畫。

3.2 加載其他來源的 Lottie

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

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

fromXxx() 方法，會返回一個 Cancellable 接口，標識它是一個可被取消的方法，如果有需要，可以調(diào)用它的 cancel() 方法。

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

3.3 Lottie 動畫的監(jiān)聽

Lottie 作為一個動畫，也是提供了一些監(jiān)聽器用于監(jiān)聽動畫執(zhí)行的情況的。

例如，想要監(jiān)聽動畫的開始結(jié)束等狀態(tài)，可以使用 addAnimatorListener() 方法，它接受一個 Animator.AnimatorListener() 接口，我們只需要實現(xiàn)對應(yīng)的方法就行了。

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

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

3.4 控制 Lottie 動畫執(zhí)行的速度和時間

Lottie 動畫，在導出成 JSON 之后，其實動畫執(zhí)行的速度和時長，都是已經(jīng)固定了的。所以如果想要修改這兩個參數(shù)，除了麻煩設(shè)計師使用 After Effects 重新修改之后再導出之外，還可以使用 ValueAniamtor 配合 setProgress() 方法來實現(xiàn)。

3.5 直接使用 LottieDrawable

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

3.6 動畫里有圖片

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

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

而假如我們需要自己配置圖片的位置，例如是從網(wǎng)絡(luò)中下載的圖片，可以使用一個 ImageAssetDelegate 來支持。

四、查缺補漏

Lottie 官方提供了一個 App，可以用于加載一個 Lottie 的動畫，在排查問題方面，非常有用，建議如果使用 Lottie 的話，***安裝把玩一下。Lottie.Apk 需要去 Google Play 上下載，不方便下載的可以在公眾號回復 “lottieapk”，直接下載 Apk 文件。

4.1 性能

既然是動畫，肯定有性能的要求?？梢越柚?Lottie App，來看看動畫執(zhí)行的性能問題，直接看效果就好了。

4.2 故障排除

有時候，設(shè)計師設(shè)計的動畫，有些效果是無法被 Lottie 還原的。遇到這樣的情況，可以在代碼中調(diào)用 getWarning() 獲取動畫的警告詳細輸出。

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

五、動畫資源

如果你因為各種原因，沒有辦法專門由一個設(shè)計師來為你的 App 定制動畫效果，你也可以嘗試找找線上公開的一些 Lottie 的動畫效果，這里推薦使用 LottieFiles 這個網(wǎng)站。

• LottieFiles:
• https://www.lottiefiles.com/

LottieFiles 提供了很多小的動畫效果，并且可以直接下載成 JSON ，或者生成二維碼，可供 Lottie App 掃描看效果。

LottieFiles 上的效果，雖然非常的好用，唯一的問題就是基本上，我們作為工程師是無法編輯的，所以只能去套用效果。

六、小結(jié)

Android 使用 Lottie 的所有細節(jié)，本文已經(jīng)說清楚了，還有細節(jié)需要了解，就只能閱讀文檔，或者查看官方文檔了。

• Lottie Github：
• https://github.com/airbnb/lot…
• Lottie 官方文檔：
• http://airbnb.io/lottie/

關(guān)于 Lottie ，你在使用的過程中，有沒有遇到什么坑?可以在留言區(qū)留言一起討論。