站在Android開發(fā)的角度，聊聊Airbnb的Lottie！！！

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

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

一、前言

[[213433]]

而自從 Airbnb 開發(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)開發(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 開始使用

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)畫，之后在子線程中開始異步渲染動(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)聽

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

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

而如果我們想要監(jiān)聽 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 文件。