Airbnb開源項(xiàng)目Lottie碉堡了

新年***天上班，沒想到就立春了，俗話說，一年之計(jì)在于春，全新的 17 年開始啦，來，收拾下心情，投入到工作中，擼起袖子，就是干!

就在前幾天，Airbnb 開源了一個(gè)項(xiàng)目叫做 Lottie，我個(gè)人覺得這個(gè)項(xiàng)目簡直碉堡了!

動畫相信大家都不陌生，在 App 開發(fā)過程中，適當(dāng)?shù)氖褂脛赢嬁梢蕴嵘脩趔w驗(yàn)，使我們的產(chǎn)品錦上添花，對于一些簡單的動畫，我們很容易就能實(shí)現(xiàn)，但是對于一些比較復(fù)雜的動畫，實(shí)現(xiàn)起來就比較麻煩了，比如下圖的一些動畫：

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

• 使用 Gif，這種方式當(dāng)然可行，但是使用 Gif 占用空間較大，而且需要為各種屏幕尺寸、分辨率做適配，因?yàn)?Android 沒有提供原生 Gif 的 api 支持，所以這種方案還會遇到兼容性問題;
• 使用幀動畫，這種方式還不如 Gif，一般來說使用幀動畫占用空間比 Gif 還要大的多，而且一樣要做多屏幕分辨率的適配，不過一般不會遇到兼容性問題;
• 使用視頻，這種方式當(dāng)然可以，但是一般來說宣傳片才用的上視頻，一般的動畫遠(yuǎn)不需要用視頻才能實(shí)現(xiàn)的，未免有些大材小用了，而且占用空間依然很大。

就沒有更好的實(shí)現(xiàn)方式了么?

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

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

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

或者代碼中這樣使用：

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

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

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

其實(shí)Facebook前段時(shí)間開源了一個(gè)類似的庫叫做Keyframes(https://github.com/facebookincubator/Keyframes)，也是跨平臺的，但是Lottie比Keyframes支持的特性更多，而且據(jù)Airbnb官方博客介紹，以后會讓這個(gè)庫支持更多的特性與功能，不得不說，真乃良心!

***，這個(gè)庫的開源地址在這里：

Android: https://github.com/airbnb/lottie-android

iOS: https://github.com/airbnb/lottie-ios

ReactNative: https://github.com/airbnb/lottie-react-native

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

【本文為專欄作者“stormzhang”原創(chuàng)稿件，轉(zhuǎn)載請聯(lián)系原作者(微信公眾號：googdev)】

當(dāng)前名稱：Airbnb開源項(xiàng)目Lottie碉堡了
本文來源：http://m.jiaotiyi.com/article/djdhjpp.html