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，也会画出来。只是没有全部画出来，而是绘制从起点到trimPa