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 是一种便捷的动画方式,小菜觉得学好动画的基础也很重要,希望会对各位有所帮助。

来源: 阿策小和尚

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容