建站
咨詢
售后
建站咨詢
新聞中心
一、前言
你有沒有遇上一些設(shè)計(jì)師，對(duì)一些酷炫的動(dòng)畫著迷，喜歡根據(jù)場(chǎng)景設(shè)計(jì)出可愛而流暢的動(dòng)畫。但是在實(shí)際工作中，哪怕開發(fā)人員也覺得這些動(dòng)畫非常的棒，可我們知道，越是定制化的動(dòng)畫，實(shí)現(xiàn)起來將會(huì)越麻煩和耗時(shí)。這有時(shí)候就會(huì)引發(fā)設(shè)計(jì)師和工程師的矛盾。
而自從 Airbnb 開發(fā)出 Lottie 之后，設(shè)計(jì)師只需要使用 After Effects 設(shè)計(jì)出***的動(dòng)畫，然后通過 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之上，無需關(guān)心中間的實(shí)現(xiàn)細(xì)節(jié)。
對(duì)于不同的工作角色，Lottie 給你帶來的都是更簡(jiǎn)潔的工作流。
- 如果你是 Designer，你可以充分發(fā)揮你的動(dòng)畫設(shè)計(jì)天分，因?yàn)樗鼈冏罱K會(huì)被 100% 的還原。
- 如果你是 Engineer，你可以通過簡(jiǎn)單的導(dǎo)入和有限的代碼，就可以實(shí)現(xiàn)設(shè)計(jì)師要求的動(dòng)畫，并且 Lottie 并不臃腫。
- 如果你是 Product Manager，你的產(chǎn)品將具有更人性化的酷炫動(dòng)畫，而這并不會(huì)帶來開發(fā)周期的延長(zhǎng)。
整體來說，Lottie 是一個(gè)優(yōu)秀的項(xiàng)目，它能解決很多關(guān)于動(dòng)畫上的溝通問題和提供解決方案。可它依然有一些不足的地方：
- 系統(tǒng)版本限制，Android(Api 14+) 和 iOS(>=8.0) 都有不同的版本限制。
- 有一些交互動(dòng)畫，不被支持，哪怕導(dǎo)出了也無法被正常執(zhí)行。
- Bodymovin 插件還有待完善，有些 After Effects 實(shí)現(xiàn)的效果，無法被正常導(dǎo)出。
而今天，我們站在一個(gè) Android 工程師的角度，來看看如何使用 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)畫的播放，使用起來也非常的簡(jiǎn)單。
這個(gè)方法會(huì)去加載 JSON 文件，并解析動(dòng)畫，之后在子線程中開始異步渲染動(dòng)畫。
3.2 加載其他來源的 Lottie
我們的 Lottie 動(dòng)畫的 JSON 可以從任何地方加載，這里就需要使用到 LottieComposition.Factory 這個(gè)類去加載不同來源的 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() 方法來實(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 來支持。
四、查缺補(bǔ)漏
Lottie 官方提供了一個(gè) App，可以用于加載一個(gè) Lottie 的動(dòng)畫，在排查問題方面，非常有用，建議如果使用 Lottie 的話，***安裝把玩一下。Lottie.Apk 需要去 Google Play 上下載，不方便下載的可以在公眾號(hào)回復(fù) “l(fā)ottieapk”，直接下載 Apk 文件。
4.1 性能
既然是動(dòng)畫，肯定有性能的要求。可以借助 Lottie App，來看看動(dòng)畫執(zhí)行的性能問題，直接看效果就好了。
4.2 故障排除
有時(shí)候，設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫，有些效果是無法被 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原因，沒有辦法專門由一個(gè)設(shè)計(jì)師來為你的 App 定制動(dòng)畫效果，你也可以嘗試找找線上公開的一些 Lottie 的動(dòng)畫效果，這里推薦使用 LottieFiles 這個(gè)網(wǎng)站。
- LottieFiles:
- https://www.lottiefiles.com/
LottieFiles 提供了很多小的動(dòng)畫效果，并且可以直接下載成 JSON ，或者生成二維碼，可供 Lottie App 掃描看效果。
LottieFiles 上的效果，雖然非常的好用，唯一的問題就是基本上，我們作為工程師是無法編輯的，所以只能去套用效果。
六、小結(jié)
Android 使用 Lottie 的所有細(xì)節(jié)，本文已經(jīng)說清楚了，還有細(xì)節(jié)需要了解，就只能閱讀文檔，或者查看官方文檔了。
- Lottie Github：
- https://github.com/airbnb/lot…
- Lottie 官方文檔：
- http://airbnb.io/lottie/
關(guān)于 Lottie ，你在使用的過程中，有沒有遇到什么坑?可以在留言區(qū)留言一起討論。
本文名稱：站在Android開發(fā)的角度，聊聊Airbnb的Lottie?。?！
地址分享：http://m.fisionsoft.com.cn/article/dhpcggg.html
