Android基础总结十:AnimatedVectorDrawable

之前总结了静态矢量图的使用：Android基础总结九:VectorDrawable

这篇来总结下矢量图动画的使用：AnimatedVectorDrawable。

矢量图动画实现步骤为：

一、创建矢量图xml文件

cross.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="120dp"
android:height="120dp"
android:viewportHeight="24"
android:viewportWidth="24">

<path
android:name="line"
android:pathData="M5.705,5.705 L18.295,18.295"
android:strokeColor="#000000"
android:strokeWidth="2"
android:trimPathEnd="1"
android:trimPathStart="0.45"/>

<path
android:name="circle1"
android:pathData="M5.705,5.705 A 4 4 0 1 1 12,12 L5.705,18.295"
android:strokeColor="#000000"
android:strokeWidth="2"
android:trimPathEnd="0.6"
android:trimPathStart="0"/>

<path
android:name="circle2"
android:pathData="M18.295,5.705 L12,12 A 4 4 0 1 1 5.705,5.705"
android:strokeColor="#000000"
android:strokeWidth="2"
android:trimPathEnd="1"
android:trimPathStart="0.4"/>

</vector>

二、创建属性动画xml文件

anim_cross_line.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">

<!-- first we need to immediately reset state -->
<objectAnimator
android:duration="1000"
android:propertyName="trimPathStart"
android:valueFrom="0.45"
android:valueTo="0.45"/>

<!-- then run the animation after a delay -->
<objectAnimator
android:duration="1300"
android:propertyName="trimPathStart"
android:startOffset="250"
android:valueFrom="0.45"
android:valueTo="0"/>

</set>
</vector>

anim_cross_circle1.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="together">

<objectAnimator
android:duration="1450"
android:propertyName="trimPathStart"
android:valueFrom="0"
android:valueTo="0.6"/>

<objectAnimator
android:duration="1600"
android:propertyName="trimPathEnd"
android:valueFrom="0.6"
android:valueTo="1"/>

</set>

关键是android:propertyName属性，属性值对应AnimatedVectorDrawable类里面的seter方法

如android:propertyName=”trimPathStart”对应AnimatedVectorDrawable类中的setTrimPathStart(float value)，设置截断的比例，android:valueFrom=”0.6”，android:valueTo=”1”表示从矢量图的60%截断到100%截断

android:propertyName可以是rotation，fillColor，translateX，translateY，alpha，pathData等

比如pathData：

android:propertyName = “pathData”
android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
android:valueType="pathType"

anim_cross_circle2.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="together">

<objectAnimator
android:duration="1600"
android:propertyName="trimPathStart"
android:valueFrom="0.4"
android:valueTo="0"/>

<objectAnimator
android:duration="1450"
android:propertyName="trimPathEnd"
android:valueFrom="1"
android:valueTo="0.4"/>

</set>

三、定义AnimatedVectorDrawableCompat的xml文件cross_anim.xml

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/cross">

<target
android:name="line"
android:animation="@animator/anim_cross_line"/>

<target
android:name="circle1"
android:animation="@animator/anim_cross_circle1"/>

<target
android:name="circle2"
android:animation="@animator/anim_cross_circle2"/>

</animated-vector>

1 . 使用animated-vector标签，且必须有android:drawable属性，对应定义好的矢量图xml

2 . 子标签target用于指定要驱动的矢量图对象以及要使用的属性动画

android:animation 指定驱动的属性动画；

android:name 指定要驱动的矢量图对象中的path下的android:name属性，此处的name要保持一致

四、定义界面xml，并在Activity中运行

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="anim"
app:srcCompat="@drawable/cross_anim"/>

运行：

public void anim(View view) {
ImageView imageView = (ImageView) view;
Drawable drawable = imageVi
ew.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}

效果如下：