AnimatedVectorDrawable的简单使用

VectorDrawable是Android5.0新支持的特性，它用来绘制矢量图，矢量图可以在不是清晰度的情况下进行缩放，它的方便之处在于只需要创建一个适量图片就可以在不同分辨率的手机下正常显示。VectorDrawable的绘制和渲染会消耗一定的时间和内存，它比较适合用来画一些扁平的图形。

VectorDrawable是用来绘制静态图的，而AnimatedVectorDrawable就是针对VectorDrawable来做动画。如果你能够灵活运用AnimatedVectorDrawable的话，能做出许多有趣的动画。下面我们实用AnimatedVectorDrawable一步步来实现一个非常简单的动画。

 

我们用VoctorDrawable绘制一个“+”的icon，如下图白色部分所示：

 

我们用一个xml来定义一个VectorDrawable静态矢量图，使用<vector>、<path>和<group>标签。其中<vector>定义了一个VectorDrawable对象，<path>定义了要被绘制的路径，<group>定义了一组路径或子组。使用name属性为<group>分配一个唯一的名字，以便做动画的时候使用该名字定位到你需要做动画的位置。使用<vector>标签的xml文件应放置在drawable文件夹下面。

drawable/ic_add_vector.xml

<?xml version="1.0" encoding="utf-8"?>
  <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">
  
    <group
        android:name="icon"
        android:pivotX="12"
        android:pivotY="12">
        <path
            android:fillColor="#ffffff"
            android:pathData="M0,12 h24 M12,0 v24"
            android:strokeColor="#ffffff"
            android:strokeWidth="4" />
    </group>
</vector>

下面，简单介绍下pathData的语法。 

 

语法基础

path命令由字母后跟一个或多个数字组成，数字之间可以用“，”隔开，“，”不是必须的。字母可以是大写也可以是小写，大写代表绝对位置，小写代表相对位置。

 

常用语法

M/m X,Y

移动到(x,y)的位置。可以跟多对坐标，多对坐标代表在这些点之间画线。

Z/z

闭合路径，在路径的开始点和结束点画一条线，后面不用加参数。

L/l x,y

连线，在当前点和(x,y)之间连线，可以跟多对坐标，会画出多条线。

H/h x

画水平线，在当前点和横坐标X之间画一条水平线。

V/v y

画垂直线，在当前点和纵坐标。

 

以上为pathData的基础语法，pathData还包含一些比较难的如何画圆弧等，大家可自行学习去。

 

使用：当一般drawable文件使用即可

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/ic_add_vector"/>

  

下面，我们为这个VectorDrawable加上动画效果，在点击的时候这个icon旋转90度。

 

使用<objectAnimator>来完成动画效果：

animator/ic_add_animation

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <objectAnimator
        android:propertyName="rotation"
        android:duration="150"
        android:valueFrom="0"
        android:valueTo="90" />
</set>

drawable/ic_add_animated_vector使用<animated-vector>标签来整合vector和animator，使动画作用在vector所绘制的图像上。

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_add_vector" >
    
    <target
        android:animation="@animator/ic_add_animation"
        android:name="icon" />
</animated-vector>

 

使用：

在layout文件中引用animated-vector文件：

<ImageView
    android:id="@+id/imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/ic_add_animated_vector"/>

在代码中：

img.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        final Drawable drawable = img.getDrawable();
        if(drawable instanceof  Animatable) {
            ((Animatable) drawable).start();
        }
    }
});

 

至此，一个简单的AnimatedVectorDrawable完成。