Android开发之Lottie动画解析库

[图片较多,手机党慎入!]
[浏览完全文大概需7分钟]

程序员才是世界最文艺的情圣,趁着节日的气氛,凑个热闹

其实,对于Coder,只要不出Bug,每天都是520

在Android开发中,Coder要兼顾各个模块的建设维护,当然也少不了动画的制作
为了解放Coder,一般会由ui师的一番设计后交由Coder在app重现出来。
与此同时带来的问题有很多,比如图像适配性、大小占用空间等。
早在Android5.0的时候,Google已经提供对vector矢量图的支持,并且这种矢量图还可以“动起来”。


Vector

解决问题的同时,又带来了新坑,暂总结如下:
1.在Android4.x中,是无法解析vector的路径变换动画
2.在Android4.x中,只能使用系统自带的插值器,不能自定义
3.制作动态vector动画,并不容易。制作静态vector路径,再实现动态vector的路径变化值,很繁琐的一个过程。

vector 与 lottie 区别

以上,直接后果就是,几乎各大App中不存在动态vector的影子。然而直到Lottie的出现。

所谓的新不来旧不去,牛逼的Coder,永远保持着一颗对新鲜事物的探求之心。

前几天io大会上公布的,Kotlin正式作为Android开发语言,估计那些从10年就开始接触kotlin的Coder此时心里都炸开花了吧~
同样,Lottie动画解析库足够优秀,12733 Stars!


Lottie

那么,开始吧

使用前的准备

这步其实很重要,就类似搭建安卓开发的环境。配置好了jdk还要翻墙下载sdk,还要开启VT。

万事开头难,一点不假。

一、安装AE 只推荐CC2017(64位)
下载链接百度云盘,密码vb8k

AE CC2017

【坑】我先安装的cc2015,很快发现在使用bodymovin插件时根本无法识别AE的项目,而且更重要的是,也无法打开Lottie中给的AE sample
所以转而又安装CC2017。好在没让我失望->
一切完美。插件使用正常,打开Lottie的AE例子正常。
二、安装bodymovin 插件
bodymovin下载链接托管在github,版本4.6.8
安装时用aescript + aeplugins zxp installer
下载链接百度云盘,密码jasa
zxp安装完毕后,将bodymovin-master.zip\bodymovin-master\build\extension中的bodymovin.zxp拖到zxp界面中即可安装完毕

安装Bodymovin插件

三、AE中的配置
打开Edit->Perference->General

配置1

勾选支持脚本联网的选项

配置2

至此准备工作就完事了

本人虽是AE入门级菜鸡,但为了从头到尾的感受一下Lottie的威力,遂找了个简单的动画开工。
模仿的是华为天气App中的动画,很容易实现。AE大神勿喷~

模仿的动画

AE动画操作流程,大概需要30min

大概讲下AE中做动画的操作流程。
一、先新建合成,高500px,宽300px,帧数改为25

新建合成

二、在合成中用钢笔工具和方形工具勾勒出支架和圆心

![支架和圆](http://upload-images.jianshu.io/upload_images/3780788-b93534eb48974ac8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

再用钢笔画出其中一个扇叶, 用中心工具拖拽扇叶的中心至圆的中心

勾勒扇叶,拖中心至圆心

复制扇叶,在新的扇叶的属性层中,把Transform的Rotation值原有基础上加120度

Rotation值加120度

重复刚才的步骤做出第3个扇叶
大扇叶就制作完毕了

大扇叶1

接下来是设计动画,拖到时间头,对3个扇叶的角度属性打上关键帧,再拖到时间尾,角度属性再增加360度
好,这个时候按下小键盘的0即可预览动画~

大扇叶2

ok,不要着急导出,继续。在材料栏里按住Ctrl勾选所有形状层,ctrl+c再v,继续制作个小的。
然后按键盘右方向调整好位置,再用钢笔把形状做适当缩小。
最后再加一层图片做背景。随便到网上扒拉下来一张,然后复制进材料栏,置于最底。看下最终效果图

AE中完成的最终动画

ok,AE上的制作动画就做完了。

导出动画至json文件

只要插件安装无误,接下来都是无脑next式操作

点击window菜单,选择Extensions的Bodymovin,调出插件窗口,对1Selected打勾,并设置好2导出的路径。这里设置的是桌面

导出动画代码

接着,点击Render,就可以秒秒钟渲染出json文件。

然后你会发现桌面上不仅多了一个json文件,还有一个image文件夹,里面存放着用到的图片资源

下面开始转向AS中的操作

AS中的代码设置,大概需要30min

一、使用第3方库,无一例外先要compile,然后sync project

compile ('com.airbnb.android:lottie:2.0.0-rc1'){
       exclude group: 'com.android.support'
}

截止发文前,Lottie版本为2.0.0-rc1,且自带25.3.1支持库。
因自己的官方库仍停留在25.3.0水平,所以加了exclude语法有效避免库冲突。
二、在mian中新建assets文件夹,把data1.json和image文件夹统统复制进来

别着急,我们暂且来看看json内部的构成,以便更好的理解
打开json文件,会发现是琳琅满目的代码,没事,ctrl+a全选,再ctrl+alt+l进行格式化~

现在结构就很清晰了,对吧,json格式无疑,参数以键值对存在。
对里面的参数作以下说明

{
"v": "4.6.8", //所用Bodymovin插件的版本
"fr": 25, //合成的帧数
"ip": 0, //不明参数
"op": 100, //不明参数
"w": 300, //合成的宽度
"h": 500, //合成的高度
"nm": "Comp 1", //合成的名称
"ddd": 0, //合成的标识
"assets": [ //合成中图像资源的配置
{
"id": "image_0", //图像在图层中的标志
"w": 349, //图像宽度
"h": 620, //图像高度
"u": "images/", //在项目中的绝对路径
"p": "img_0.png" //在项目中的名称
}
],
"layers": [...] //合成中各个层的动画数据
}

如果你的图片资源存放在了自己设定好的文件夹中,比如放在assets/icon/中
那么在json中,就需要将u的参数改为”icon/“,以便库能找到图片。

最简单展示Lottie的动画方式就是在xml中加入如下代码

<com.airbnb.lottie.LottieAnimationView
       android:id="@+id/animation_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:lottie_fileName="data1.json"
       app:lottie_imageAssetsFolder="images/" />

lottie_fileName就是json文件全称,后缀json也不能少
lottie_imageAssetsFolder是动画所需图片资源在assets中的绝对路径。如果没有图片资源,可以省略

还可以加入以下代码,加入更多定制。如

设置动画自动播放。默认值是false

app:lottie_autoPlay="true"

在java中设置方法为

animationView.playAnimation();

设置缓存策略。默认为none,可选值有strong和weak

 app:lottie_cacheStrategy="none"

在java中,并没有单独的API设置缓存策略,要在设置json时同时设置好它,如

animationView.setAnimation("data1.json", LottieAnimationView.CacheStrategy.Strong);

设置背景颜色。

 app:lottie_colorFilter="@android:color/holo_blue_bright"

在java中,设置方法为

PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(ContextCompat.getColor(this,android.R.color.holo_blue_light), PorterDuff.Mode.ADD);
animationView.addColorFilter(colorFilter);

设置播放循环,默认值为false

app:lottie_loop="true"

在java中,设置方法为

animationView.loop(true);

设置动画播放进度。例如50%

app:lottie_progress="0.5"

在java中,需要注意值是float型。设置方法为

animationView.setProgress(0.5f);

在xml中定制完了属性后,在java中还可以对它进行监听
//监听动画的状态:开始、结束、取消和重复

       animationView.addAnimatorListener(new Animator.AnimatorListener() {
           @Override
           public void onAnimationStart(Animator animator) {}

           @Override
           public void onAnimationEnd(Animator animator) {}

           @Override
           public void onAnimationCancel(Animator animator) {);
           }

           @Override
           public void onAnimationRepeat(Animator animator) {);
           }
       });

动态监听动画演示过程,可以动态获取动画进度

       animationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
           @Override
           public void onAnimationUpdate(ValueAnimator valueAnimator) {
     
               seekBar.setProgress((int) (valueAnimator.getAnimatedFraction() * 100));
           }
       });

开始动画

public void Start(View view) {
       if (!animationView.isAnimating())
           animationView.playAnimation();
   }

暂停动画

public void Pause(View view) {
       if (animationView.isAnimating())
           animationView.pauseAnimation();
   }

继续动画

    public void Resume(View view) {
        if (!animationView.isAnimating())
            animationView.resumeAnimation();
    }

取消动画,貌似和暂停动画的效果没区别

    public void Cancel(View view) {
            animationView.cancelAnimation();
    }

最终实现的效果如图

最终实现的效果

至此对Lottie的初级探索结束。
在官方给的sample中还涉及到网络加载json动画,用lottie动画做引导页等,感兴趣的可以去阅读它的源码,如果能用在自己的项目中,绝对是加分项~
最后附上Lottie的传送门https://github.com/airbnb/lottie-android

【参考文献】
http://www.jianshu.com/p/ded6654593f0
http://www.jianshu.com/p/cae606f45c0b
http://www.mobile-open.com/2015/86193.html
http://blog.csdn.net/xsf50717/article/details/55121478

推荐阅读更多精彩内容