Android L New API之Verctor動畫 1 —— SVG Path，

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動畫效果。

以上。