Lottie 站在巨人的肩膀上实现 Android 酷炫动画效果

      说到动画效果，一般都会感到很高端，感觉很酷炫；而小菜技术有限，稍复杂的动画效果也需要很多时间处理，但是遇到时间紧任务重的情况该怎么办呢？那就尝试一下 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.LottieAnimationView android: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.LottieAnimationView android: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() { @Override public void onAnimationStart(Animator animation) { Log.e(TAG, "onAnimationStart"); } @Override public void onAnimationEnd(Animator animation) { Log.e(TAG, "onAnimationEnd"); } @Override public void onAnimationCancel(Animator animation) { Log.e(TAG, "onAnimationCancel"); } @Override public 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() { @Override public void run() { mLav3.pauseAnimation(); // mLav4.cancelAnimation(); } }, 3000); 

Lottie 孰优劣？

优势：

      Lottie 的优势很明显，动画效果酷炫且流畅；支持跨平台效果统一；集成简单。

劣势：

      万事万物都有两面性，Lottie 的劣势在于，动画效果不可动态修改样式，这一点很重要，不能直接调整动画的颜色等，依赖于 json 文件；据说有个别的动画兼容性不太好(小菜并没遇到)。

如何缓解劣势：

      Lottie 难道只是固定的网站上这些样式吗？有些样式很好，但是个别颜色不太合适的动画效果怎么办？官方提供了 Lottie Editor，可调整各个图层的颜色；还有官方文档 Lottie Doc 方便我们更快速高效的使用 Lottie。

---

      Lottie 是一种便捷的动画方式，小菜觉得学好动画的基础也很重要，希望会对各位有所帮助。以下是小菜公众号，欢迎闲来吐槽～