Android动画总结系列（6）——矢量图形与矢量动画

按照我一开始的打算，上面一篇文章应该是“Android动画总结系列（5）——属性动画源码分析”，不过属性动画源码分析写起来还比较复杂，因为某些原因，我把精力投入到矢量动画这块了，第5篇估计会在后面一两周写完。本篇文章，我写的是Android5.0引入的新动画效果——矢量动画，初步打算后面还会加一篇源码分析。

一、概述

1.1 简述

Android应用的不断发展带来了安装包过大的尴尬，而Android之前一直都不支持矢量图形，是引起尴尬的一个重要原因。其实Android绘制界面时也是通过各种类似矢量图形命令操作完成的，所以Android最终在Lolliop引入矢量图形既是大势所趋，也是水到渠成的一件事情。矢量图有很多标准，Android支持的是SVG标准（可缩放矢量图形Scalable Vector Graphics）。但不是全量支持，准确的说Android支持的是SVG标准中Path相关的部分。

SVG是通用的矢量图标准，我们可以很轻易的从Photoshop之类的软件导出想要的图形。导出的文件后缀是*.svg，这个文件的内容是文本格式的，用txt文件查看就可以打开，其内部是一系列遵循SVG规范的命令列表。

SVG Path的路径是一系列的命令组成的，每条命令告诉绘图系统，如何绘制路径。命令的写法：

1）每条命令之间可以用换行/空格/逗号进行分隔；

2）每条命令内的命令和其参数之间可以用换行/空格/逗号分隔，也可以直接连在一起；

3）命令的各个参数间可以用换行/空格/逗号分隔；

通常如果路径过长，为便于阅读，建议命令之间用换行，命令与参数之间用空格，参数之间用逗号进行分隔。

1.2 Path命令定义与用法

Android支持的路径命令包括：

M： move to 移动到绘制点

用法：M X,Y (X,Y)是Canvas上的点的位置，M命令会改变Path的初始点 ，如M 10,10或者 M10 10，Path从(10,10)开始绘制。

对应android.graphics.Path的void moveTo(float x, float y)方法。

L：line to 绘制直线

用法：1）L X,Y 从当前位置绘制直线到(X,Y)，如L 10,10或者L10 10

          2）对于水平方向和垂直方向绘制直线的时候，L命令有两个简化表达法，H X表示水平连接，V Y表示垂直连接，比如M 10,10H12表示的是从(10,10)绘制一条直线到(12,10)，M10,10V12表示从(10,10)绘制一条直线到(10,12)。

对应Path类void lineTo(float x, float y)方法。

Z：close 闭合，没有参数，表示用直线连接Path的初始点和Path的终点。

用法：一般Z命令用在一条Path的最末尾，但其实在Z命令后还可以再继续新的路径，不过Z命令不改变Path的初始点，所以M2,2L5,5L5,10ZL6,4L7,3Z命令第二个Z认为的Path初始点还是(2,2)，如果是M2,2L5,5L5,10ZM3,2L6,4L7,3Z命令，则第二个Z认为的Path起始点是(3,2)。

对应Path类的void close()方法。

C：cubic bezier 绘制三次贝塞尔曲线

用法：C X1,Y1 X2,Y2 X,Y 从当前点到(X,Y)点绘制一条控制点是(X1,Y1)、(X2,Y2)的三次贝塞尔曲线，如C 6,4, 7,4, 10,5，控制点是(6,4)、(7,4)，最终点是(10,5)。

对应Path类的void cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)方法，方法参数与上面定义顺序完全相同。

S：smooth cubicto绘制一条平滑的三次贝塞尔曲线

用法：S X1,Y1 X,Y 如果前面是一个C/S命令，则自动计算一个保证起始点平滑的对称控制点(X1'，Y1')，从当前点到(X,Y)绘制一条控制点是(X1'，Y1')、(X1, Y1)的三次贝塞尔曲线。其它与上面C命令相同。

如果S前面是一个非C/S命令，则无法计算一个对称的控制点，则从当前点到(X,Y)绘制一条控制点是(X1,Y1)的二次贝塞尔曲线（降阶特性）。

Q：quatratic bezier 二次贝塞尔曲线

用法：Q x1,y1 x,y，从当前点到(x,y)绘制一条控制点是(x1,y1)的二次贝塞尔曲线，如Q 6,4 10,5，控制点是(6,4)，最终点是(10,5)。

对应Path类的void quadTo(float x1, float y1, float x2, float y2)方法，参数定义与顺序同上。

T：smooth quatratic to绘制一条平滑的二次贝塞尔曲线

用法：T X,Y 如果前面是一个Q/T命令，则自动计算一个保证起始点平滑的对称控制点(X1，Y1)，从当前点到(X,Y)绘制一条控制点是(X1，Y1)的二次贝塞尔曲线。其它与上面Q命令相同。

如果T前面是一个非Q/T命令，则无法计算一个对称的控制点，则从当前点到(X,Y)绘制一条直线（降阶特性）。

A：ellipse 绘制一个椭圆圆弧

用法：绘制椭圆圆弧的参数比较复杂，如下：A rx ry x-axis-rotation large-arc-flag sweep-flag X Y，表示绘制一个椭圆圆弧经过(X,Y)点。

rx：椭圆横轴半径

ry：椭圆竖轴半径

x-axis-rotation：椭圆横轴相对于CanvasX轴的偏移角度

large-arc-flag：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，此值取0表示绘制小弧度，取值1表示绘制大弧度

sweep-flag：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，去掉上面large-arc-flag标识后还有两个，sweep-flag 取值0表示绘制逆时针方向的圆弧，取值1表示绘制顺时针方向的圆弧。

盗个图（来源http://blog.csdn.net/xu_fu/article/details/44004841）来辅助表达：

举例：M5,5,A 3,2 0 1 1 5 5.00001 此命令基本上绘制了一个完整的椭圆。注意如果写成M5,5,A 3,2 0 1 1 5 5就什么都展示不了了，因为两点完全相等，命令的目标连接两点已经达到，就不绕大弯子了，所以此处或者目标X或者目标Y要做一点细微的区别。

此命令对应的是void arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo)，不过参数需要做转化。

这里列出的每个命令还有对应的小写形式，上面的大写字母代表后面的参数是绝对坐标，而小写字母表示相对坐标。

假如当前绘图位置是X0,Y0，则：

M x, y 对应的是 m x-X0, y-Y0；小写形式对应的是Path类的void rMoveTo(float dx, float dy)。

L x, y 对应的是 l x-X0, y-Y0；小写形式对应的是Path类的void rLineTo(float dx, float dy)。

Z 对应的是z，两者作用相同；大小写形式对应的都是Path类的void close()。

C x1,y1 x2,y2 x,y 对应的是 c x1-X0, y1-Y0, x2-X0, y2-Y0 x-X0, y-Y0；小写形式对应的是 Path类的void rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3)。

Q x1,y1 x,y 对应的是 q x1-X0, y1-Y0 x-X0,y-Y0；小写形式对应的是Path类的rQuadTo( float dx1, float dy1, float dx2, float dy2)。

A rx ry x-axis-rotation large-arc-flag sweep-flag x y 对应的是 A rx ry x-axis-rotation large-arc-flag sweep-flag x-X0 y-Y0，小写形式在Path类中与大写方式对应接口的相同，都需要做参数转化。

1.3 SVG与Android XML的转化