新年第一天上班，沒(méi)想到就立春了，俗話(huà)說(shuō)，一年之計(jì)在于春，全新的 17 年開(kāi)始啦，來(lái)，收拾下心情，投入到工作中，擼起袖子，就是干！

就在前幾天，Airbnb 開(kāi)源了一個(gè)項(xiàng)目叫做 Lottie，我個(gè)人覺(jué)得這個(gè)項(xiàng)目簡(jiǎn)直碉堡了！

動(dòng)畫(huà)相信大家都不陌生，在 App 開(kāi)發(fā)過(guò)程中，適當(dāng)?shù)氖褂脛?dòng)畫(huà)可以提升用戶(hù)體驗(yàn)，使我們的產(chǎn)品錦上添花，對(duì)于一些簡(jiǎn)單的動(dòng)畫(huà)，我們很容易就能實(shí)現(xiàn)，但是對(duì)于一些比較復(fù)雜的動(dòng)畫(huà)，實(shí)現(xiàn)起來(lái)就比較麻煩了，比如下圖的一些動(dòng)畫(huà)：

怎么樣？這些可不是簡(jiǎn)單的移動(dòng)、縮放、旋轉(zhuǎn)就搞得定的，可能有些人思考了之后大概有以下實(shí)現(xiàn)思路：

• 使用 Gif，這種方式當(dāng)然可行，但是使用 Gif 占用空間較大，而且需要為各種屏幕尺寸、分辨率做適配，因?yàn)?Android 沒(méi)有提供原生 Gif 的 api 支持，所以這種方案還會(huì)遇到兼容性問(wèn)題；

• 使用幀動(dòng)畫(huà)，這種方式還不如使用 Gif，一般來(lái)說(shuō)使用幀動(dòng)畫(huà)占用空間比 Gif 還要大的多，而且一樣要做多屏幕分辨率的適配，不過(guò)不會(huì)遇到兼容性問(wèn)題；

• 使用視頻，這種方式當(dāng)然可以，但是一般來(lái)說(shuō)宣傳片才用的上視頻，一般的動(dòng)畫(huà)遠(yuǎn)不需要用視頻才能實(shí)現(xiàn)的，未免有些大材小用了，而且占用空間依然很大。

就沒(méi)有更好的實(shí)現(xiàn)方式了么？

當(dāng)然有，Android 5.x 之后提供了對(duì) SVG 的支持，通過(guò) VectorDrawable、AnimatedVectorDrawable 的結(jié)合可以實(shí)現(xiàn)一些稍微復(fù)雜的動(dòng)畫(huà)，兼容性是一個(gè)問(wèn)題，不過(guò)整個(gè)實(shí)現(xiàn)流程非常麻煩，每次全新實(shí)現(xiàn)一個(gè)動(dòng)畫(huà)都得重頭來(lái)過(guò)，最最關(guān)鍵的是，如果一個(gè)公司下的 App，iOS 也要實(shí)現(xiàn)一套一樣的動(dòng)畫(huà)，資源的占用就顯得過(guò)大了。

而 Airbnb 開(kāi)源的這個(gè)項(xiàng)目完美的解決以上難題，我們來(lái)看下整個(gè)流程是什么樣的。

假設(shè)我們要做一個(gè)引導(dǎo)頁(yè)面的歡迎動(dòng)畫(huà)，這個(gè)一般設(shè)計(jì)師會(huì)用 Adobe 旗下的 After Effects （簡(jiǎn)稱(chēng) AE）來(lái)做個(gè)動(dòng)畫(huà)出來(lái)，設(shè)計(jì)師用 AE 做個(gè)動(dòng)畫(huà)比工程師用代碼去實(shí)現(xiàn)一個(gè)動(dòng)畫(huà)要快的多的多，調(diào)整起來(lái)也很方便，之后 AE 上有一款插件叫做 Bodymovin，這個(gè)插件也比較屌，可以直接根據(jù) AE 上的動(dòng)畫(huà)文件導(dǎo)出 json 文件，這個(gè) json 文件描述了該動(dòng)畫(huà)的一些關(guān)鍵點(diǎn)的坐標(biāo)以及運(yùn)動(dòng)軌跡，之后我們?cè)陧?xiàng)目中引用 Lottie 開(kāi)源庫(kù)，在布局文件中簡(jiǎn)單的加上這么一句就完美的實(shí)現(xiàn)了。

<com.airbnb.lottie.LottieAnimationViewandroid:id="@+id/animation_view"android:layout_width="wrap_content"android:layout_height="wrap_content"app:lottie_fileName="hello-world.json"app:lottie_loop="true"app:lottie_autoPlay="true" />復(fù)制代碼

或者代碼中這樣使用：

LottieAnimationView animationView = findViewById(R.id.animation_view); animationView.setAnimation("hello-world.json"); animationView.loop(true);復(fù)制代碼

值得一提的是，我們的 hello-world.json 文件只需要放在 app/src/main/assets 目錄下就 ok 了。

當(dāng)然，還有更多的用法，比如給動(dòng)畫(huà)添加事件，比如描述動(dòng)畫(huà)的 json 文件可以遠(yuǎn)程更新下載到本地，這樣就可以不動(dòng)聲色的定期更新你的動(dòng)畫(huà)了。

有了這個(gè)庫(kù)，我們可以充分發(fā)揮我們的想象力，很簡(jiǎn)單方便的就實(shí)現(xiàn)了一套很酷炫的動(dòng)畫(huà)，最重要的是，這個(gè)庫(kù)是跨平臺(tái)的，支持 Android、iOS 以及 ReactNative，共用一套 json 動(dòng)畫(huà)描述文件。

其實(shí) Facebook 前段時(shí)間開(kāi)源了一個(gè)類(lèi)似的庫(kù)叫做 Keyframes，也是跨平臺(tái)的，但是 Littie 比 Keyframes 支持的特性更多，而且據(jù) Airbnb 官方博客介紹，以后對(duì)讓這個(gè)庫(kù)支持更多的特性與功能，不得不說(shuō)，真乃良心！

最后，這個(gè)庫(kù)的開(kāi)源地址在這里：

Android: github.com/airbnb/lott…

iOS: github.com/airbnb/lott…

ReactNative: github.com/airbnb/lott…

最最后，Airbnb 還提供了一個(gè) sample apk，考慮到部分人在 Google Play 上下載 apk 有些困難，我也貼心的把 sample apk 下載下來(lái)了，公眾號(hào) googdev 后臺(tái)回復(fù)「lottie」關(guān)鍵字獲取。

本文原創(chuàng)發(fā)布于微信公眾號(hào) stormzhang，id: googdev，不止技術(shù)分享，還有更多扯淡，關(guān)注請(qǐng)慎重！

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的这个项目碉堡了的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。