Android开罐头———VectorDrawable实现简单动态动画

尽管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>

效果图：

file_download图标.png

二、创建属性动画

• 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资源。

animated-vector的连接效果.png

• 在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>

效果图：

image.png

四、添加粘合剂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>

六、效果图与总结

• 效果图：

vector.gif

• 总结：
  在gradle配置成功的基础之上，vectorDrawable的属性动画效果实现还是比较简单的，而且能动态分组实现。