??????說到動畫效果，一般都會感到很高端，感覺很酷炫；而小菜技術有限，稍復雜的動畫效果也需要很多時間處理，但是遇到時間緊任務重的情況該怎么辦呢？那就嘗試一下 Lottie 吧，酷炫的動畫集成卻相當簡單，還支持跨平臺。

Lottie 是個啥？

??????Lottie 是一個開源的動畫工具由驚一群 Airbnb 的神人開發。它是一個 IOS/Android/React Native 本地庫，渲染后效果動畫實時，允許應用程序使用動畫一樣容易，因為他們使用靜態圖像。

Lottie 咋集成？

1. build.gradle 中添加 compile 'com.airbnb.android:lottie:2.5.5'；小菜需要支持 Android 版本 15，所以需要在 AndroidManifest.xml 中添加如下版本權限：

<uses-sdk tools:overrideLibrary="com.airbnb.lottie" />

??????Tips: 此時還要注意 AndroidManifest.xml 根目錄中要添加 xmls:tools，如圖：

1. 同步之后即可添加動畫效果，在眾多酷炫的動畫中選擇符合自身業務的動畫，下載，會生成一個 json 文件，可供 Android 和 IOS 共用，將下載好的 json 文件拷貝到 assets 中；小菜好奇 json 文件內容，打開大概了解是動畫圖層的一系列元素，但并不能直接明了的理解，這也是一個動畫不方便動態修改樣式但弊端之一；

1. 引用 LottieAnimationView，xml 中直接添加并設置基本屬性或只是在 xml 中添加控件通過 Java/Kotlin 調整 LottieAnimationView 動畫過程；

<!-- 第一種通過 xml 添加 LottieAnimationView 動畫屬性 -->
<com.airbnb.lottie.LottieAnimationViewandroid:layout_width="match_parent"android:layout_height="80dp"android:layout_gravity="center"airbnb:lottie_autoPlay="true"airbnb:lottie_fileName="animation-w180-h180.json"airbnb:lottie_loop="true" /><!-- 第二種 xml 中只添加 LottieAnimationView 基本屬性 -->
<com.airbnb.lottie.LottieAnimationViewandroid:id="@+id/test_lav1"android:layout_width="wrap_content"android:layout_height="80dp"android:layout_weight="1" />

1. 若第二種，通過 Java/Kotlin 動態設置 LottieAnimationView 動畫屬性；

mLav1.setAnimation("animation-w180-h180.json");
// ------ 設置動畫的三種方式 ------
// 1. 當前版本已經不推薦使用該方法了
// mLav1.loop(true);
// 2. 設置循環動畫次數
// mLav6.setRepeatCount(5);
// 3. 設置動畫輪播屬性，從頭播放
// mLav5.setRepeatMode(Animation.RESTART);
mLav1.setRepeatMode(Animation.RESTART);
mLav1.playAnimation();

至此，即可實現 LottieAnimationView 動畫的完整效果，小菜在測試時還測試了以下的屬性，因為 LottieAnimationView 繼承的還是 ImageView，所以很多屬性都保留，還包括動畫的堅挺方法；也嘗試了一下 pauseAnimation() 和 cancelAnimation()，均可停止動畫播放：

// 可監聽動畫的各階段屬性
mLav1.addAnimatorListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {Log.e(TAG, "onAnimationStart");}@Overridepublic void onAnimationEnd(Animator animation) {Log.e(TAG, "onAnimationEnd");}@Overridepublic void onAnimationCancel(Animator animation) {Log.e(TAG, "onAnimationCancel");}@Overridepublic void onAnimationRepeat(Animator animation) {Log.e(TAG, "onAnimationRepeat");}
});// pauseAnimation() 和 cancelAnimation()
mLav3.setAnimation("animation-w180-h1802.json");
mLav3.loop(true);
mLav3.playAnimation();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {@Overridepublic void run() {mLav3.pauseAnimation();
//      mLav4.cancelAnimation();}
}, 3000);

Lottie 孰優劣？

優勢：

??????Lottie 的優勢很明顯，動畫效果酷炫且流暢；支持跨平臺效果統一；集成簡單。

劣勢：

??????萬事萬物都有兩面性，Lottie 的劣勢在于，動畫效果不可動態修改樣式，這一點很重要，不能直接調整動畫的顏色等，依賴于 json 文件；據說有個別的動畫兼容性不太好(小菜并沒遇到)。

如何緩解劣勢：

??????Lottie 難道只是固定的網站上這些樣式嗎？有些樣式很好，但是個別顏色不太合適的動畫效果怎么辦？官方提供了 Lottie Editor，可調整各個圖層的顏色；還有官方文檔 Lottie Doc 方便我們更快速高效的使用 Lottie。

---

??????Lottie 是一種便捷的動畫方式，小菜覺得學好動畫的基礎也很重要，希望會對各位有所幫助。以下是小菜公眾號，歡迎閑來吐槽～