为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Android

 说到动画效果,一般都会感到很高端,感觉很酷炫;而小菜技术有限,稍复杂的动画效果也需要很多时间处理,但是遇到时间紧任务重的情况该怎么办呢?那就尝试一下 Lottie 吧,酷炫的动画集成却相当简单,还支持跨平台。

Lottie 是个啥?

      Lottie 是一个开源的动画工具由惊一群 Airbnb 的神人开发。它是一个 IOS/Android/React Native 本地库,渲染后效果动画实时,允许应用程序使用动画一样容易,因为他们使用静态图像。

webp


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,如图:

webp

  1. 同步之后即可添加动画效果,在众多酷炫的动画中选择符合自身业务的动画,下载,会生成一个 json 文件,可供 Android 和 IOS 共用,将下载好的 json 文件拷贝到 assets 中;小菜好奇 json 文件内容,打开大概了解是动画图层的一系列元素,但并不能直接明了的理解,这也是一个动画不方便动态修改样式但弊端之一;

webp

  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);

webp

Lottie 孰优劣?

优势:

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

劣势:

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

如何缓解劣势:

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

webp


      Lottie 是一种便捷的动画方式,小菜觉得学好动画的基础也很重要,



作者:阿策神奇


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
165
获赞与收藏
165

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消