站在Android開(kāi)發(fā)的角度，聊聊Airbnb的Lottie?。?！
一、前言
你有沒(méi)有遇上一些設(shè)計(jì)師，對(duì)一些酷炫的動(dòng)畫著迷，喜歡根據(jù)場(chǎng)景設(shè)計(jì)出可愛(ài)而流暢的動(dòng)畫。但是在實(shí)際工作中，哪怕開(kāi)發(fā)人員也覺(jué)得這些動(dòng)畫非常的棒，可我們知道，越是定制化的動(dòng)畫，實(shí)現(xiàn)起來(lái)將會(huì)越麻煩和耗時(shí)。這有時(shí)候就會(huì)引發(fā)設(shè)計(jì)師和工程師的矛盾。
而自從 Airbnb 開(kāi)發(fā)出 Lottie 之后，設(shè)計(jì)師只需要使用 After Effects 設(shè)計(jì)出***的動(dòng)畫，然后通過(guò) Bodymovin 插件進(jìn)行簡(jiǎn)單的轉(zhuǎn)換和導(dǎo)出成 JSON，***工程師將 JSON 放入 App 項(xiàng)目中，就可以將動(dòng)畫 100% 還原到你的產(chǎn)品中。
二、為什么要用 Lottie？
Lottie 是一套跨平臺(tái)的完整解決方案，設(shè)計(jì)師只需要使用 After Effectes 設(shè)計(jì)出動(dòng)畫之后，使用 Lottic 提供的 Bodymovin 將設(shè)計(jì)好的動(dòng)畫導(dǎo)出成 JSON 格式，就可以直接運(yùn)用在 iOS、Android 和 React Native之上，無(wú)需關(guān)心中間的實(shí)現(xiàn)細(xì)節(jié)。
對(duì)于不同的工作角色，Lottie 給你帶來(lái)的都是更簡(jiǎn)潔的工作流。
- 如果你是 Designer，你可以充分發(fā)揮你的動(dòng)畫設(shè)計(jì)天分，因?yàn)樗鼈冏罱K會(huì)被 100% 的還原。
- 如果你是 Engineer，你可以通過(guò)簡(jiǎn)單的導(dǎo)入和有限的代碼，就可以實(shí)現(xiàn)設(shè)計(jì)師要求的動(dòng)畫，并且 Lottie 并不臃腫。
- 如果你是 Product Manager，你的產(chǎn)品將具有更人性化的酷炫動(dòng)畫，而這并不會(huì)帶來(lái)開(kāi)發(fā)周期的延長(zhǎng)。
整體來(lái)說(shuō)，Lottie 是一個(gè)優(yōu)秀的項(xiàng)目，它能解決很多關(guān)于動(dòng)畫上的溝通問(wèn)題和提供解決方案。可它依然有一些不足的地方：
- 系統(tǒng)版本限制，Android（Api 14+） 和 iOS(>=8.0) 都有不同的版本限制。
- 有一些交互動(dòng)畫，不被支持，哪怕導(dǎo)出了也無(wú)法被正常執(zhí)行。
- Bodymovin 插件還有待完善，有些 After Effects 實(shí)現(xiàn)的效果，無(wú)法被正常導(dǎo)出。
而今天，我們站在一個(gè) Android 工程師的角度，來(lái)看看如何使用 Lottie。這里只聊 Android 下使用 Lottie，如何編輯動(dòng)畫，如何安裝插件，這些都是設(shè)計(jì)師需要關(guān)心的，對(duì)我們而言，拿到的就是一個(gè) Lottie 動(dòng)畫的 JSON 文件，我們只需要關(guān)心如何使用它。
三、在 Android 下使用 Lottie
3.1 開(kāi)始使用
Lottie 可以支持并且也是僅支持 Gradle 進(jìn)行構(gòu)建配置，因此，我們只需要在 build.gradle 文件中進(jìn)行簡(jiǎn)單的導(dǎo)入就好了。
最簡(jiǎn)單的使用方式是直接使用 LottieAnimationView ，LottieAnimationView 直接繼承自 AppCompatImageView 。
只需要提前將動(dòng)畫的 JSON 文件，放在 app/src/main/assets 目錄下，在 Layout 布局文件中，可以直接使用。
它支持幾個(gè)屬性：
- lottie_fileName : 播放動(dòng)畫的 json 文件。
- lottie_loop：是否循環(huán)播放，默認(rèn)為 false。
- lottie_autoPlay：是否加載完成之后，自動(dòng)播放，默認(rèn)為 false。
當(dāng)然，你也可以使用邏輯代碼去控制 Lottie 動(dòng)畫的播放，使用起來(lái)也非常的簡(jiǎn)單。
這個(gè)方法會(huì)去加載 JSON 文件，并解析動(dòng)畫，之后在子線程中開(kāi)始異步渲染動(dòng)畫。
3.2 加載其他來(lái)源的 Lottie
我們的 Lottie 動(dòng)畫的 JSON 可以從任何地方加載，這里就需要使用到 LottieComposition.Factory 這個(gè)類去加載不同來(lái)源的 JSON 文件。在這個(gè) Factory 中，提供了很多 fromXxx() 的方法，用于加載動(dòng)畫的 JSON 。
一個(gè)比較常用的方式，例如我們從一個(gè) JSONObject 中，加載 Lottie 動(dòng)畫。
fromXxx() 方法，會(huì)返回一個(gè) Cancellable 接口，標(biāo)識(shí)它是一個(gè)可被取消的方法，如果有需要，可以調(diào)用它的 cancel() 方法。
Lottie 的動(dòng)畫加載器，看著有很多 fromXxx() 方法，其實(shí)最終指向的都是 FileCompositionLoader 和 JsonCompositionLoader ，這兩個(gè)加載器，都是繼承自 AsyncTask 的，所以 cancel() 方法其實(shí)就是取消的這個(gè) AsyncTask 的執(zhí)行，有興趣的可以查閱這方面的源碼。
3.3 Lottie 動(dòng)畫的監(jiān)聽(tīng)
Lottie 作為一個(gè)動(dòng)畫，也是提供了一些監(jiān)聽(tīng)器用于監(jiān)聽(tīng)動(dòng)畫執(zhí)行的情況的。
例如，想要監(jiān)聽(tīng)動(dòng)畫的開(kāi)始結(jié)束等狀態(tài)，可以使用 addAnimatorListener() 方法，它接受一個(gè) Animator.AnimatorListener() 接口，我們只需要實(shí)現(xiàn)對(duì)應(yīng)的方法就行了。
而如果我們想要監(jiān)聽(tīng) Lottie 動(dòng)畫的中間狀態(tài)，例如執(zhí)行的進(jìn)度等等，可以使用 addAnimatorUpdateListener()。
控制進(jìn)度非常的有用，因?yàn)橛幸恍﹦?dòng)畫，例如就是一個(gè)進(jìn)度條的動(dòng)畫，控制進(jìn)度就顯得非常重要了。
3.4 控制 Lottie 動(dòng)畫執(zhí)行的速度和時(shí)間
Lottie 動(dòng)畫，在導(dǎo)出成 JSON 之后，其實(shí)動(dòng)畫執(zhí)行的速度和時(shí)長(zhǎng)，都是已經(jīng)固定了的。所以如果想要修改這兩個(gè)參數(shù)，除了麻煩設(shè)計(jì)師使用 After Effects 重新修改之后再導(dǎo)出之外，還可以使用 ValueAniamtor 配合 setProgress() 方法來(lái)實(shí)現(xiàn)。
3.5 直接使用 LottieDrawable
LottieAnimationView 其實(shí)內(nèi)部使用的是 LottieDrawable ，如果有需要你也可以直接使用它。
3.6 動(dòng)畫里有圖片
有時(shí)候，我們的動(dòng)畫不僅僅是畫上去的，還有可能會(huì)使用到一些圖片資源。如果遇到這樣的情況，同時(shí)使用的是本地資源圖片，可以使用 setImageAssetsFolder() 設(shè)置一個(gè) Lottie 動(dòng)畫中使用到的圖片文件夾的相對(duì)路徑，并確保他們和 bodymovin 插件輸出的用到的圖片文件名稱，保持不變。
如果你需要加載圖片，你使用 LottieAnimationView 你可以很省心，不需要額外處理，但是如果你直接使用 LottieDrawable 的話，使用完成之后，需要手動(dòng)調(diào)用 recycleBitmaps() 進(jìn)行資源的回收。
而假如我們需要自己配置圖片的位置，例如是從網(wǎng)絡(luò)中下載的圖片，可以使用一個(gè) ImageAssetDelegate 來(lái)支持。
四、查缺補(bǔ)漏
Lottie 官方提供了一個(gè) App，可以用于加載一個(gè) Lottie 的動(dòng)畫，在排查問(wèn)題方面，非常有用，建議如果使用 Lottie 的話，***安裝把玩一下。Lottie.Apk 需要去 Google Play 上下載，不方便下載的可以在公眾號(hào)回復(fù) "lottieapk"，直接下載 Apk 文件。
4.1 性能
既然是動(dòng)畫，肯定有性能的要求。可以借助 Lottie App，來(lái)看看動(dòng)畫執(zhí)行的性能問(wèn)題，直接看效果就好了。
4.2 故障排除
有時(shí)候，設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫，有些效果是無(wú)法被 Lottie 還原的。遇到這樣的情況，可以在代碼中調(diào)用 getWarning() 獲取動(dòng)畫的警告詳細(xì)輸出。
還有一個(gè)方法是直接在官方提供的 Lottie.App 中，去加載設(shè)計(jì)師提供的 JSON 文件，如果出錯(cuò)，右上角會(huì)有一個(gè) warning 的標(biāo)記，點(diǎn)擊可以查看到詳情。
五、動(dòng)畫資源
如果你因?yàn)楦鞣N原因，沒(méi)有辦法專門由一個(gè)設(shè)計(jì)師來(lái)為你的 App 定制動(dòng)畫效果，你也可以嘗試找找線上公開(kāi)的一些 Lottie 的動(dòng)畫效果，這里推薦使用 LottieFiles 這個(gè)網(wǎng)站。
LottieFiles:
LottieFiles 提供了很多小的動(dòng)畫效果，并且可以直接下載成 JSON ，或者生成二維碼，可供 Lottie App 掃描看效果
LottieFiles 上的效果，雖然非常的好用，唯一的問(wèn)題就是基本上，我們作為工程師是無(wú)法編輯的，所以只能去套用效果。
六、小結(jié)
Android 使用 Lottie 的所有細(xì)節(jié)，本文已經(jīng)說(shuō)清楚了，還有細(xì)節(jié)需要了解，就只能閱讀文檔，或者查看官方文檔了。
Lottie Github：
https://github.com/airbnb/lottie-android
Lottie 官方文檔：
【本文為51CTO專欄作者“張旸”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過(guò)微信公眾號(hào)聯(lián)系作者獲取授權(quán)】
