[图片较多，手机党慎入！]
[浏览完全文大概需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
新建合成
二、在合成中用钢笔工具和方形工具勾勒出支架和圆心
再用钢笔画出其中一个扇叶， 用中心工具拖拽扇叶的中心至圆的中心
勾勒扇叶，拖中心至圆心
复制扇叶，在新的扇叶的属性层中，把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
网友评论
Caused by: java.lang.NumberFormatException: 0.00999999977648