Android L New API之Verctor动画 1 —— SVG Path

导入

1、VectorDrawable是Android L中新增的一个API，让你可以创建基于XML的矢量图，并结合AnimatedVectorDrawable来实现动画效果。

2、Android L新增支持Vector标签，可以使用Path创建动画，同时支持SVG格式。

SVG 简介

1、SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2、SVG 用来定义用于网络的基于矢量的图形
3、SVG 使用 XML 格式定义图形
4、SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
5、SVG 是万维网联盟的标准
6、SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

结合Android，本次讲解SVG中的path标签

<Path>

1、使用path标签时，就像用指令的方式来控制一只画笔，例如：移动画笔到某一坐标位置，画一条线，画一条曲线，结束

2、path 的属性

d="path data" 路径上点的坐标 
pathLength="<number>" 路径总长度 

3、D属性

路径标签中有一个非常重要的属性'D'。 'D'属性是一个字符串，它描述了要创建的路径位置和形状。 'D'属性包含多个连续的指令， 如Move（移动），画线，画曲线，并画圆弧和曲线等等。 每个指令都是一个字母，后面跟着参数。

<Path>指令

1、支持的指令：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径

2、使用原则：

①坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
②所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
③指令和数据间的空格可以省略
④同一指令出现多次可以只用一个

注意，'M'处理时，只是移动了画笔， 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。

3、详细指令分析

3.1、L H V指令

绘制直线的指令是“L”，从当前点划线到给定点。 “L”之后的参数是一个点坐标，如“L 200 400”。 如果画水平线或垂直线，可以使用“H”和“V”指令，后面的参数是x（H指令）或y坐标（V指令）。

M　起点X，起点Y　L（直线）终点X，终点Y　H（水平线）终点X　V（垂直线）终点Y

如：M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90

3.2、A指令

允许不闭合。可以想像成是椭圆的某一段，共七个参数：

A RX,RY,XROTATION,FLAG1,FLAG2,X,Y


RX,RY指所在椭圆的半轴大小
XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。
FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
X,Y为终点坐标


如：m 200,250 a 150,30 0 1 0 0,70

SVG编辑器

SVG参数写法固定，因此完全可以使用程序来实现，而且写法复杂，所以，一般通过SVG编辑器来编辑

网上有很多，这里提供一个 http://editor.method.ac/

编辑后可直接生成code。

关于SVG的介绍就到这里，下面会讲解如何在Android中使用SVG，并创建path动画效果。

以上。