传统的Android提供的动画只有平移、缩放、显示等效果，那么怎么才能实现逐渐绘制动画？ 答案是使用矢量图动画。
一、 矢量图支持VectorDrawble
Android 系统从5.0开始支持矢量图，可以通过 Android Studio自带的 Vector Assert 工具将SVG、PSD 转成VectorDrawble。
矢量图兼容5.0以下使用需要v7支持库和以下配置：
compile 'com.android.support:appcompat-v7:23.2.0'
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
如下是Vector Assert 工具的使用方法：
转化成的VectorDrable格式如下：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:name="root"
android:height="62dp"
android:viewportHeight="140.13"
android:viewportWidth="121.38"
android:width="53dp">
<group android:name="all_line">
<path
android:name="line1"
android:pathData="M59.94,3.22
l-58.9,36.2
v11
L59.94,14.22
l58.9,36.2
L118.84,39.42
Z"
android:strokeColor="@color/splash_logo_stroke"
android:strokeWidth="1"/>
<path
android:name="line2"
android:pathData="M59.94,24.72
l58.9,36.2
v11
L59.94,35.72
l-58.9,36.2
L1.04,60.92
Z"
android:strokeColor="@color/splash_logo_stroke"
android:strokeWidth="1"/>
<path
android:name="line3"
android:pathData="M59.94,45.72
l-58.9,36.2
v11
L59.94,56.72
l58.9,36.2
L118.84,81.92
Z"
android:strokeColor="@color/splash_logo_stroke"
android:strokeWidth="1"/>
<path
android:name="line4"
android:pathData="M1.95,103.66
l7.41,4.54
L60.09,77.75
L67.69,81.69
l-49.15,30.2
l7.78,4.77
L77.11,88.07
l6.83,4.2
L35.69,123.38
l7.8,4.78
l49.5,-30.43
l6.26,3.85
L52.55,133.71
l7.8,4.78
l58.09,-35.71
L61.44,66.55
l-58,35.64
Z"
android:strokeColor="@color/splash_logo_stroke"
android:strokeWidth="1"/>
</group>
</vector>
它的原图是这张：
转化好的VectorDrawble 可以直接设置为ImageView的src属性。
转化好的VectorDrawblew看起来好像挺复杂，是不是完全看不懂。没关系，只要转化的图形没有问题，你不用关心其内部数据。
我们直接进入矢量动画部分。
二、矢量图动画：AnimatedVectorDrawable
矢量动画的实现通过在xml定义<animated-vector>标签（其对应的Java对象是AnimatedVectorDrawable）实现，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/splash_logo_vector">
<target
android:name="line1"
android:animation="@animator/splash_animator_draw"/>
<target
android:name="line2"
android:animation="@animator/splash_animator_draw"/>
<target
android:name="line3"
android:animation="@animator/splash_animator_draw"/>
<target
android:name="line4"
android:animation="@animator/splash_animator_draw"
/>
</animated-vector>
可以看到<animated-vector>标签是主要元素是target，它其实就起到一个桥梁作用，将动画和VectorDraw中的图形联系起来。
比如target1，它将属性动画splash_animator_draw和vectorDrawble对象中name等于line1的对象联系起来，即：动画将生效在line1对象上。
这里给出这个描边的属性动画文件，trimPathEnd代表线段的结束位置，trimPathEnd从0到1，就意味着逐渐描边：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="1000"
android:interpolator="@android:interpolator/linear"
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
>
</objectAnimator>
</set>
必须说明的是，并不是所有的VectorDrawble属性都可以利用属性动画，以下是可以被“动画”的属性集合：
| VectorDrawble 成员 | 可以被“动画”的属性 |
|---|---|
| <vector> | alpha |
| <group> | rotation |
| ~ | pivotX |
| ~ | pivotY |
| ~ | scaleX |
| ~ | scaleY |
| ~ | translateX |
| ~ | translateY |
| <path> | pathData |
| ~ | fillColor |
| ~ | strokeColor |
| ~ | strokeWidth |
| ~ | strokeAlpha |
| ~ | fillAlpha |
| ~ | trimPathStart |
| ~ | trimPathEnd |
| ~ | trimPathOffset |
| <clip-path> | pathData |
使用矢量动画
- 将animated-vector 这个xml文件当做图片设置在ImageView的src属性上(为了兼容5.0以下，可以使用srcCompat属性)：
<ImageView
android:id="@+id/iv_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/center_view"
android:layout_centerHorizontal="true"
app:srcCompat="@drawable/animated_splash_logo"
/>
- 在代码里开启动画：
Drawable drawable = mIvLogo.getDrawable();
//AnimatedVectorDrawable实现了Animatable接口
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
-
运行效果:
image
三、VectorDrawble进阶
之前展示了由svg图片通过Android Studio Vector Assert工具转换过来的VectorDrawble，里面的实际上svg画图语法，<path>标签里的pathData包含了画图的路径(坐标)和语法
在实际使用过程中有几率遇到这样两个问题(笔者都遇到过)：
Vector Assert 转换的数据不准确，比如线条有点歪。
动画效果是一个组合效果，Vector Assert工具自动转换的画线条的方式不符合你的动画需求。
举一个极端的例子：VectorDrawble画了一条线条(只有一个path标签)，但是你的动画效果需要的是线条的左边波浪抖动，线条的右边颜色闪烁。
那么你需要把这一个线条标签，拆成左右两条线段标签，分别应用不同的动画。
其实以上两个问题都要求你掌握进阶知识，svg画图语法。
官方svg语法解析：https://www.w3.org/TR/SVG/paths.html
不喜欢看英文，去这篇博客：http://www.jianshu.com/p/a3cb1e23c2c4
四、另一个实现描边动画的方法：Lottie动画框架
- Lottie 是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Native 平台。
- Lottie 目前只支持渲染播放 After Effects 动画。
- Lottie 使用从 bodymovin (开源的 After Effects 插件)导出的json数据来作为动画数据
对于Android程序员，Lottie的动画使用很简单，步骤如下：
1.接入Lottie
dependencies {
//lottie动画库
compile 'com.airbnb.android:lottie:2.2.1'
}
管视觉设计师要一个After Effects软件中通过bodymovin插件导出的动画json文件。
把动画json文件放入Android的assets文件夹。
在布局文件里使用Lottie动画控件，设置好lottie_fileName
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
app:lottie_autoPlay="true"
app:lottie_fileName="splash_animation.json"
app:lottie_loop="false"
/>
- OK，运行程序，改动画就自动播放起来了(设置了lottie_autoPlay="true")
总结
从动画实现上来说，Lottie动画应该是最简单的方法了。
Lottie的优点很明显：
- 程序员减少了工作量，不用管动画实现的细节了。
- 各端的动画能保持统一，不会因为程序员技术实现而有差异。
- 动画实现能最大程度按照视觉的原始设计，免去了各端联调。
Lottie的缺点：
- Lottie对于视觉也是有学习成本的。
- 增加了视觉设计师的工作。
- 在实际使用中发现Lottie动画配合属性动画一起使用有卡顿。
好了，如果觉得本文对你有帮助，请关注、留言、点赞我，谢谢！
