1、本章效果
本章主要使用是使用下面的双箭头VectorDrawable，达到的效果是希望两个箭头能够分别往里面滑动，再滑动到原来位置。
原图.png
效果图.gif
2、PathData标签说明
使用AS 在res/drawable目录下new —>vector asset选取上面图片。打开该文件，可以看到如下xml代码：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M9.01,14L2,14v2h7.01v3L13,15l-3.99,-4v3zM14.99,13v-3L22,10L22,8h-7.01L14.99,5L11,9l3.99,4z"/>
</vector>
从上往下解析这个xml：
vector:矢量图的基本标签
android:width：该矢量图的宽度
android:height : 该矢量图的高度
android:viewportWidth和android:viewprotHeight分别代表把这个矢量图的高和宽分为对应的份数，而下面的绘制路径则是按照此份数所划分的单元进行绘制的。可以把上图看成是24.0*24.0的表格，而不同的是，这里是float类型，可以只取到某一单元格的中间，而不用一定取一整个。
android:fillColor：代表这个矢量图的填充颜色，此处为黑色。
android:pathData：此处最关键的标签，决定了矢量图的样子。我们把这个标签拉取出来：
“M9.01,14L2,14v2h7.01v3L13,15l-3.99,-4v3zM14.99,13v-3L22,10L22,8h-7.01L14.99,5L11,9l3.99,4z”
以里面的字母为准进行解析：
M(x, y)：表示将绘制点移到x，y点。
L(x, y) ：表示从当前绘制点开始绘制一条到(x, y)的直线。
v(high)：表示从当前绘制点开始绘制一条距离当前绘制点高度为high的垂直线。
h(width) ：表示从当前绘制点开始绘制一条距离当前绘制点宽度为width的水平线。(注：此处的v和h都是小写，代表相对路径。如果是大写的V和H则代表绝对路径，就是X或者Y的坐标而不是高度宽度了。)
z：代表将当前绘制点和起点连接起来。
注：vector和path标签中还有其他的属性，不一一列举。
3、使箭头动起来
为了使箭头动起来，我们需要运用到属性动画。观看上图，发现，两个箭头都是水平方向移动了。而如果我们查看path标签则会发现其中并没有相应的translateX，translateY等属性。
path属性.png
group
这里就会用到group标签了，group标签可以path标签进行分组，每组统一对外暴露相应的属性以供属性动画使用。我们查看group的标签，发现其中有大部分我们在属性动画中会用到的属性:
group属性.png
知道了group的含义后，观察效果图，发现两个箭头所运用的属性动画是不一样的。我们将pathData进行拆分然后分为两个组，具体代码如下：
<group android:name="left">
<path
android:fillColor="#FF000000"
android:pathData="M9.01,14L2,14v2h7.01v3L13,15l-3.99,-4v3z"/>
</group>
<group android:name="right">
<path
android:fillColor="#FF000000"
android:pathData="M14.99,13v-3L22,10L22,8h-7.01L14.99,5L11,9l3.99,4z"/>
</group>
定义属性动画
相应的左边箭头的属性动画res/animator/anim_left.xml代码如下（右边res/animator/anim_right.xml只是将valueTo的值改为-10）：
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:propertyName="translateX"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:valueFrom="0"
android:valueTo="10"
android:valueType="floatType">
</objectAnimator>
动画粘合剂
为了将属性动画和矢量图结合起来，需要用到一种叫做动画粘合剂的机制。
在res/drawable下新建文件arrow_anim.xml，代表具有动画效果的箭头。
里面的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_compare_arrows">
<target
android:name="left"
android:animation="@animator/anim_left"/>
<target
android:name="right"
android:animation="@animator/anim_right"/>
</animated-vector>
注：animated-vector处将会报错，这是因为该Api是在v21才引入的，忽略即可。
可以看到animated-vector标签的意思就是使一个矢量图动画化，使哪个矢量图呢？就是android:drawable属性中添加矢量图。
而target标签中的属性name代表是目标名字，而android:animation属性则代表应用于该目标的属性动画。比如第一个target的意思则是在矢量图ic_compare_arrows中名字为"left"的部分应用属性动画anim_left。
使用动态的VectorDrawable
在相应的控件处引用arrow_anim
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:onClick="anim"
app:srcCompat="@drawable/arrow_anim"/>
之后再相应的Java代码里面进行动画启动。
public void anim(View view) {
ImageView imageView = (ImageView) view;
Drawable drawable = imageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
网友评论