Android开发笔记（一百三十二）矢量图形与矢量动画

矢量图形VectorDrawable

与水波图形RippleDrawable一样，矢量图形VectorDrawable也是Android5.0之后新增的图形类。矢量图不同于一般的图形，它是由一系列几何曲线构成的图像，这些曲线以数学上定义的坐标点连接而成。具体到实现上，则需开发者提供一个xml格式的矢量图形定义，然后系统根据矢量定义自动计算该图形的绘制区域。因为绘图结果是动态计算得到，所以不管缩放到多少比例，矢量图形都会一样的清晰，不像位图那样拉大后会变模糊。 矢量图形的xml定义有点复杂，其结构可分为三个层次：根标签、组标签、路径标签。

根标签vector

首先是vector标签，它表示当前定义的是一个完整的矢量图形。该标签支持的主要属性说明如下： android:name：指定矢量图形的名称。 android:width：指定矢量图形的默认宽度，一般使用dp数值。如果在layout布局文件中将ImageView的layout_width设置为wrap_content，同时src设置为该矢量图形，则ImageView控件的宽度就是此处的android:width。 android:height：指定矢量图形的默认高度，一般使用dp数值。 android:viewportWidth：指定视图空间的宽度，即虚拟坐标系的宽度，后续路径的坐标信息都位于该视图空间之内。 android:viewportHeight：指定视图空间的高度，即虚拟坐标系的高度。 android:alpha：指定矢量图形的的透明度，取值为0.0到1.0。 这里要注意width/height与viewportWidth/viewportHeight两组宽高的区别，前者指的是矢量图形被外部世界观察到的尺寸大小，故而采用了带dp单位的绝对数值；而后者指的是矢量图形为内部几何路径所参照的空间范围，故而采用了不带单位的相对数值，正因为矢量图形中的几何路径以相对坐标来标记，所以不管矢量图形缩放到多少比例，其内部的几何形状也会按同样比例缩放。

组标签group

然后是group标签，它定义了一组路径的共同行为（如一起旋转、一起缩放、一起平移等等）。该标签支持的主要属性说明如下： android:name：指定分组对象的名称。 android:pivotX：指定旋转中心点的横轴坐标。 android:pivotY：指定旋转中心点的纵轴坐标。 android:rotation：指定分组对象的旋转角度。 android:scaleX：指定分组对象在横轴上的缩放比例。取值0.5表示缩小一半，取值2.0表示放大一倍。 android:scaleY：指定分组对象在纵轴上的缩放比例。 android:translateX：指定分组对象在横轴上的平移距离。 android:translateY：指定分组对象在纵轴上的平移距离。

路径标签path

最后是path标签，它定义了一个路径的几何描述，既可以表示一根曲线，也可以表示一块平面区域。该标签支持的主要属性说明如下： android:name：指定几何路径的名称。 android:pathData：指定几何路径的数据定义。数据格式需符合SVG标准。 android:fillColor：指定平面区域的颜色。若不指定，则不绘制平面区域。 android:fillAlpha：指定平面区域的透明度。 android:strokeColor：指定曲线的颜色。若不指定，则不绘制曲线颜色。 android:strokeWidth：指定曲线的宽度。 android:strokeAlpha：指定曲线的透明度。 android:strokeLineCap：指定曲线的首尾外观。取值说明有三个：butt（默认值，直线边缘）、round（圆形边缘）、square（方形边缘）。 android:strokeLineJoin：指定两条曲线相交的边角外观。取值说明有三个：miter（默认值，锐角）、round（圆角）、bevel（钝角）。 android:trimPathStart：指定几何路径从哪里开始绘制。取值为0.0到1.0，比如取值0.4表示只绘制后面十分之六的内容，前面十分之四不予绘制。 android:trimPathEnd：指定几何路径到哪里结束绘制。取值为0.0到1.0，比如取值0.4表示只绘制前面十分之四的内容，后面十分之六不予绘制。 android:trimPathOffset：指定几何路径的绘制偏移。取值为0.0到1.0，表示线条从trimPathOffset+trimPathStart处一直绘制到trimPathOffset+trimPathEnd处。 路径信息有几个地方容易混淆，下面把相关细节详细说明一下： 1、关于butt和square的区别，乍看起来直线边缘与方形边缘没什么差别，但矢量图形的方形边缘其实是套上一个方形的帽子，既然是套上去，就会比没戴帽子的时候高一点，所以使用square的线条会比使用butt的线条要长一点。 2、关于butt和square的区别，miter保留了原样的尖角，而bevel会把尖角部分切掉一小块，看起来就变钝了。 3、trimPathOffset+trimPathEnd的和如果超过1，也会画出来。只是没有全部画出来，而是绘制从起点到trimPathOffset+trimPathEnd-1所处的位置。

可缩放矢量图形SVG标记

前面说到，path标签的android:pathData属性，取值需符合SVG标准。SVG全称为“Scalable Vector Graphics”，意即可缩放的矢量图形，它是一种图形格式，专门用于描述矢量图形的定义。 SVG标记比较抽象，下面先举个简单的例子，有了直观的概念更方便理解，如下所示：         android:pathData="             M 30,50             L 75 35" 这个标记定义不难，首先“M 30,50”指的是把画笔移动到坐标点(30,50)的位置，后面的“L 75 35”指的是从当前位置画一根线段到坐标点(75,35)。说白了，就是在(30,50)和(75,35)两点之间画一根线段。 好了，每行定义一个动作，每行的第一个字符表示动作的类型，后面的数字表示动作经过的坐标点。这便是SVG标记的大概格式，万变不离其宗，掌握了规律学得更好更快。详细的SVG标记定义说明如下： 移动画笔 “M x0,y0”把画笔移动到坐标点(x0,y0)。 画线段 “L x1 y1” 从当前位置(x0,y0)画一根线段到坐标点(x1,y1)。 画水平线段 “H x1” 从当前位置(x0,y0)画一根水平线到坐标点(x1,y0)。 画垂直线段 “V y1” 从当前位置(x0,y0)画一根垂直线到坐标点(x0,y1)。 画二次贝塞尔曲线 “Q xa ya x1 y1”二次贝塞尔曲线的起点是当前位置，终点是(x1,y1)，曲线中部向控制点(xa,ya)凸出。 画三次贝塞尔曲线 “C xa ya xb yb x1 y1”三次贝塞尔曲线的起点是当前位置，终点是(x1,y1)，曲线中部有两个控制点，分别向(xa,ya)和(xb,yb)两方向凸出。 画椭圆的圆弧 “A radius-x radius-y x-axis-rotation large-arc-flag sweep-flag x1 y1”从当前位置拉出一段圆弧，圆弧的参数比较多，分别说明如下： -- radius-x表示椭圆的横轴半径。 -- radius-y表示椭圆的纵轴半径。横轴半径等于纵轴半径时，表示这是个圆圈的圆弧。 -- x-axis-rotation表示圆弧的旋转角度。 -- large-arc-flag表示大弧标志，为0时表示取小弧度，1时取大弧度。 -- sweep-flag表示轨迹标志，为0表示逆时针方向，为1表示顺时针方向。 -- 圆弧经过某点，该点的横坐标为x1 -- 圆弧经过某点，该点的纵坐标为y1 闭合路径 “Z” 连接起点跟终点，即在起点(x0,y0)与终点之间画一根线段。 再来补充一下SVG标记的若干说明，如下所示： 1、每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标。 2、参数之间用空格或逗号隔开，两种分隔符的效果是一样的。 3、关于圆弧的large-arc-flag和sweep-flag两个标志，光看文字说明其实不易理解，还是上个图观察观察：

下面使用SVG标记定义一个心形，先上个心形的效果图：

心形对应的矢量图形定义示例如下：

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

    <path
        android:fillColor= "#ffaaaa"
        android:pathData= "M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

矢量动画AnimatedVectorDrawable

费了老大的劲搞清楚SVG标记，如果仅仅画个静态的矢量图形，未免大材小用了。其实矢量图形真正的意义在于矢量动画，通过动态计算几何路径的坐标，从而实现局部或整体的动画效果，这才是矢量图形的杀手锏呀。 Android提供了AnimatedVectorDrawable这么一个矢量动画类，但开发者还得通过属性动画及其xml标签方可实现动画定义。先看看AnimatedVectorDrawable的几个常用方法： registerAnimationCallback : 注册动画监听器，需实现Animatable2.AnimationCallback接口的两个方法：onAnimationStart和onAnimationEnd。 start : 开始播放动画。 stop : 停止播放。 reverse : 倒过来播放。 再看看如何通过属性动画实现矢量动画效果。理论上，矢量图形的三个标签（vector、group、path）都有可以用来播放动画的属性；不过实际开发的时候，常用的只有三类属性可用作动画，说明如下：

变换类属性

这类属性包括vector标签的android:alpha，以及group标签的android:rotation、android:scaleX、android:scaleY、android:translateX、android:translateY等等，这几个属性分别对应于补间动画的灰度动画、旋转动画、缩放动画、平移动画。 因为该类属性实现的是大家熟悉的补间动画效果，所以这里就不再做演示了。

路径类属性

这类属性主要指path标签的android:pathData，通过设置几何路径的起始状态与终止状态，可实现两个几何形状之间的渐变效果，如一个圆圈从小变大，又如一条曲线变成直线等等。 下面是个从哭丧脸变为笑脸的动画截图：

下面是人脸的矢量图形定义文件vector_face_eye.xml：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
  <path
      android:fillColor="@color/yellow"
      android:pathData="@string/path_circle"/>
  <path
      android:name="eye_left"
      android:strokeColor="@android:color/black"
      android:strokeWidth="4"
      android:strokeLineCap="round"
      android:pathData="@string/path_eye_left_sad"/>
  <path
      android:name="eye_right"
      android:strokeColor="@android:color/black"
      android:strokeWidth="4"
      android:strokeLineCap="round"
      android:pathData="@string/path_eye_right_sad"/>
  <path
      android:name="mouth"
      android:strokeColor="@android:color/black"
      android:strokeWidth="4"
      android:strokeLineCap="round"
      android:pathData="@string/path_face_mouth_sad"/>
</vector>

接着是脸部三处器官变化的属性动画定义文件。 下面是左眼的属性动画定义文件anim_smile_eye_left.xml：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
  android:duration="3000"
  android:propertyName="pathData"
  android:valueFrom="@string/path_eye_left_sad"
  android:valueTo="@string/path_eye_left_happy"
  android:valueType="pathType"
  android:interpolator="@android:anim/accelerate_interpolator"/>

下面是右眼的属性动画定义文件anim_smile_eye_right.xml：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
  android:duration="3000"
  android:propertyName="pathData"
  android:valueFrom="@string/path_eye_right_sad"
  android:valueTo="@string/path_eye_right_happy"
  android:valueType="pathType"
  android:interpolator="@android:anim/accelerate_interpolator"/>

下面是嘴巴的属性动画定义文件anim_smile_mouth.xml：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
  android:duration="3000"
  android:propertyName="pathData"
  android:valueFrom="@string/path_face_mouth_sad"
  android:valueTo="@string/path_face_mouth_happy"
  android:valueType="pathType"
  android:interpolator="@android:anim/accelerate_interpolator"/>

最后是笑脸的矢量动画定义例子animated_vector_smile_eye.xml：

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

    <target
        android:name="mouth"
        android:animation="@anim/anim_smile_mouth" />

    <target
        android:name="eye_left"
        android:animation="@anim/anim_smile_eye_left" />
    
    <target
        android:name="eye_right"
        android:animation="@anim/anim_smile_eye_right" />
    
</animated-vector>

不要忘了在代码中进行矢量动画的播放操作：

	private void startVectorSmile() {
		iv_vector_smile.setImageResource(R.drawable.animated_vector_smile_eye);
		Drawable drawable = iv_vector_smile.getDrawable();
		if (drawable instanceof AnimatedVectorDrawable) {
			((AnimatedVectorDrawable) drawable).start();
		}
	}

修剪类属性

这类属性包括path标签的android:trimPathStart和android:trimPathEnd，可实现矢量图形逐步展开或者逐步消失的动画效果。 下面是个支付宝支付成功的动画截图：

支付成功动画包含两个形状，首先在外面画个圆圈，然后在圆圈里面画个打勾符号。因为圆圈和打勾并不相连，如果按照一般的处理，就会一边画圆圈一边画打勾，这不是我们所希望的画完圆圈再画打勾的效果。所以要想让圆圈动画和打勾动画按顺序播放，得分别定义圆圈的矢量图形和打勾的矢量图形，然后等圆圈动画播放完毕，再开始播放打勾动画。 下面是圆圈的矢量图形定义文件vector_pay_circle.xml：

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

    <path
        android:name="circle"
        android:pathData="
            M 10,50
            A 40 40 0 1 0 10 49"
        android:strokeAlpha="1"
        android:strokeColor="@color/blue_sky"
        android:strokeLineCap="round"
        android:strokeWidth="3" />

</vector>

下面是打勾的矢量图形（含圆圈图形）定义文件vector_pay_success.xml：

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

    <path
        android:name="circle"
        android:pathData="
            M 10,50
            A 40 40 0 1 0 10 49"
        android:strokeAlpha="1"
        android:strokeColor="@color/blue_sky"
        android:strokeLineCap="round"
        android:strokeWidth="3" />
    <path
        android:name="hook"
        android:pathData="
            M 30,50
            L 45 65
            L 75 35"
        android:strokeAlpha="1"
        android:strokeColor="@color/blue_sky"
        android:strokeLineCap="butt"
        android:strokeWidth="3" />

</vector>

接着是支付成功的属性动画的xml定义文件anim_pay.xml：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:interpolator/linear"
    android:propertyName="trimPathEnd"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType" />

最后是矢量动画的定义文件，下面这个用来播放圆圈动画：

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

    <target
        android:name="circle"
        android:animation="@anim/anim_pay" />

</animated-vector>

下面这个用来播放圆圈动画后继的打勾动画：

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

    <target
        android:name="hook"
        android:animation="@anim/anim_pay" />

</animated-vector>

圆圈动画播放完毕，接着播放打勾动画，这要在代码中控制，具体的是调用AnimatedVectorDrawable对象的registerAnimationCallback方法，一旦监听到原动画播放结束，然后开始播放新动画。 点击下载本文用到的矢量图形与矢量动画的工程代码 点此查看Android开发笔记的完整目录