尽管
VectorDrawable很强大，体积小，放大不失真，但是这不是我们使用它的最大理由，动态的动画效果才是。
however, the reason we want to use VectorDrawables is so we can animate their individual paths using the AnimatedVectorDrawable class. AnimatedVectorDrawables are the glue that connect VectorDrawables with ObjectAnimators:the VectorDrawable assigns each animated path (or group of paths) a unique name, and the AnimatedVectorDrawable maps each of these names to their corresponding ObjectAnimators. As we’ll see below, the ability to animate the individual elements within a VectorDrawable can be quite powerful.
-
最终效果图：
vector.gif
一、新建图标
- 右击
res目录，利用as自带的图标库vector asset创建一个新的图标file download：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#0092ff"
android:pathData="M19,9h-4V3H9v6H5l7,7 7,-7zM5,18v2h14v-2H5z"/>
</vector>
效果图：
二、创建属性动画
-
res文件目录下新建animator文件夹后，新建anim.xml文件：
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:propertyName="translateY"
android:repeatCount="infinite"
android:repeatMode="restart"
android:valueFrom="-5dp"
android:valueTo="0dp"
android:valueType="floatType"/>
我们想让它有个从上到下运动的效果。
三、配置动画粘合剂animated-vector
如何将我们的图标和属性动画联合起来？在代码中去实现？
不，动画粘合剂animated-vector可以很方便快速连接起vector图标和属性动画animator资源。
- 在
drawable目录下创建anim_vector文件：
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_file_download">
<target
android:animation="@animator/anim"
android:name="arrow" />
</animated-vector>
标签都非常好懂，就是把target里的动画运用到根标签drawable里的vector中。
- 但是上面的target标签必须指定name，这里的
name对应vector图标里指定的name标签，这样就能很方便地根据name来区分复杂vector图标里的不同path（类似布局文件里的id作用），从而对不同的path在animated-vector 里使用不同的动画。 - 所以我们回到vector文件中，因为我们只想让箭头动，所以把它俩从同一
path中拆分出来，并且只给箭头的path加上name，这样animated-vector粘合剂里就可以只给箭头加动画了。修改后如下：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:name="arrow"
android:fillColor="#0092ff"
android:pathData="M19,9h-4V3H9v6H5l7,7 7,-7z"/>
<path
android:name="line"
android:fillColor="#004d85"
android:pathData="M5,18v2h14v-2H5z"/>
</vector>
效果图：
四、添加粘合剂animated-vector到布局
- 接下来我们要把动画vector部署到主活动的布局文件中去了：
<ImageView
android:onClick="anim_vector"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@id/rec"
app:srcCompat="@drawable/anim_vector"
/>
app:srcCompat标签中的资源就是我们第三步中的粘合剂animated-vector
- 还要在代码中去写点击事件，点击后开始动画：
//点击事件，开始动画
public void anim_vector(View view){
//获取图标实例
ImageView arrow = (ImageView) view;
//判断若是动画则开始
Drawable drawable = arrow.getDrawable();
if(drawable instanceof Animatable){
((Animatable)drawable).start();
}
}
- 终于搞定了，现在我们在机子上点击图标试试，啊？怎么动画不动？发现有句警告的log：
Method setTranslateX() with type float not found on target class
-
大坑注意：属性动画是通过改变属性的值而生效，但是这里例子里，我们作用于vector图标，可是
path标签是没有translateX值的。所以我们需要用到group标签。
五、为vector适配属性动画
上面说到了，需要增加group标签来包裹path标签，group标签的作用有：
- 给path分组
- 提供path没有的一些属性，如：translateX，rotation等等
这样，让属性动画作用于group就能实现位移效果了，修改后的vector图标代码(记得把name标签移到group中)：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<group android:name="arrow">
<path
android:fillColor="#0092ff"
android:pathData="M19,9h-4V3H9v6H5l7,7 7,-7z" />
</group>
<group android:name="line">
<path
android:fillColor="#004d85"
android:pathData="M5,18v2h14v-2H5z" />
</group>
</vector>
六、效果图与总结
- 效果图：
- 总结：
在gradle配置成功的基础之上，vectorDrawable的属性动画效果实现还是比较简单的，而且能动态分组实现。
