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 = imageView.getDrawable();        if (drawable instanceof Animatable) {            ((Animatable) drawable).start();        }    }

效果如下：