Lottie簡介
Lottie是一個支持Android、iOS、React Native，並由Adobe After Effects制作aep格式的動畫，然后經由bodymovin插件轉化渲染為json格式可被移動端本地識別解析的Airbnb開源庫。Lootie實時呈現After Effects動畫效果，讓應用程序可以像使用靜態圖片一樣輕松地使用動畫。
Lottie支持API14及以上。
動畫效果呈現
這些動畫不是簡單的移動、縮放、旋轉就搞得定的，思考之后大概有以下實現思路：
- 使用 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 動畫描述文件。
參考文章：
After Effect 轉svg 動畫– 神奇的bodymovin 插件
Lottie- 讓Android動畫實現更簡單