新年第一天上班，沒想到就立春了，俗話說，一年之計在於春，全新的 17 年開始啦，來，收拾下心情，投入到工作中，擼起袖子，就是幹！
就在前幾天，Airbnb 開源了一個專案叫做 Lottie，我個人覺得這個專案簡直碉堡了！
動畫相信大家都不陌生，在 App 開發過程中，適當的使用動畫可以提升使用者體驗，使我們的產品錦上添花，對於一些簡單的動畫，我們很容易就能實現，但是對於一些比較複雜的動畫，實現起來就比較麻煩了，比如下圖的一些動畫：
怎麼樣？這些可不是簡單的移動、縮放、旋轉就搞得定的，可能有些人思考了之後大概有以下實現思路：
-
使用 Gif，這種方式當然可行，但是使用 Gif 佔用空間較大，而且需要為各種螢幕尺寸、解析度做適配，因為 Android 沒有提供原生 Gif 的 api 支援，所以這種方案還會遇到相容性問題；
-
使用幀動畫，這種方式還不如使用 Gif，一般來說使用幀動畫佔用空間比 Gif 還要大的多，而且一樣要做多螢幕解析度的適配，不過不會遇到相容性問題；
-
使用視訊，這種方式當然可以，但是一般來說宣傳片才用的上視訊，一般的動畫遠不需要用視訊才能實現的，未免有些大材小用了，而且佔用空間依然很大。
就沒有更好的實現方式了麼？
當然有，Android 5.x 之後提供了對 SVG 的支援，通過 VectorDrawable、AnimatedVectorDrawable 的結合可以實現一些稍微複雜的動畫，相容性是一個問題，不過整個實現流程非常麻煩，每次全新實現一個動畫都得重頭來過，最最關鍵的是，如果一個公司下的 App，iOS 也要實現一套一樣的動畫，資源的佔用就顯得過大了。
而 Airbnb 開源的這個專案完美的解決以上難題，我們來看下整個流程是什麼樣的。
假設我們要做一個引導頁面的歡迎動畫，這個一般設計師會用 Adobe 旗下的 After Effects （簡稱 AE）來做個動畫出來，設計師用 AE 做個動畫比工程師用程式碼去實現一個動畫要快的多的多，調整起來也很方便，之後 AE 上有一款外掛叫做 Bodymovin，這個外掛也比較屌，可以直接根據 AE 上的動畫檔案匯出 json 檔案，這個 json 檔案描述了該動畫的一些關鍵點的座標以及運動軌跡，之後我們在專案中引用 Lottie 開源庫，在佈局檔案中簡單的加上這麼一句就完美的實現了。
<com.airbnb.lottie.LottieAnimationView
android: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" />複製程式碼或者程式碼中這樣使用：
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);複製程式碼值得一提的是，我們的 hello-world.json 檔案只需要放在 app/src/main/assets 目錄下就 ok 了。
當然，還有更多的用法，比如給動畫新增事件，比如描述動畫的 json 檔案可以遠端更新下載到本地，這樣就可以不動聲色的定期更新你的動畫了。
有了這個庫，我們可以充分發揮我們的想象力，很簡單方便的就實現了一套很酷炫的動畫，最重要的是，這個庫是跨平臺的，支援 Android、iOS 以及 ReactNative，共用一套 json 動畫描述檔案。
其實 Facebook 前段時間開源了一個類似的庫叫做 Keyframes，也是跨平臺的，但是 Littie 比 Keyframes 支援的特性更多，而且據 Airbnb 官方部落格介紹，以後對讓這個庫支援更多的特性與功能，不得不說，真乃良心！
最後，這個庫的開源地址在這裡：
Android: github.com/airbnb/lott…
ReactNative: github.com/airbnb/lott…
最最後，Airbnb 還提供了一個 sample apk，考慮到部分人在 Google Play 上下載 apk 有些困難，我也貼心的把 sample apk 下載下來了，公眾號 googdev 後臺回覆「lottie」關鍵字獲取。
本文原創釋出於微信公眾號 stormzhang，id: googdev，不止技術分享，還有更多扯淡，關注請慎重！
