Android動畫機制與使用技巧（五）——Android 5.X SVG 矢量動畫機制

Google在Android 5.X 中增加了對SVG 矢量圖形的支持，這對於創建新的高效率動畫具有非常重大的意義。那首先了解SVG的含義。

可伸縮矢量圖形（Scalable Vector Graphics） 定義用於網絡的基於矢量的圖形 使用XML格式定義圖形 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失 萬維網聯盟的標准 與諸如DOM和XSL之類的W3C標准是一個整體

SVG在Web上的應用非常廣泛，在Android 5.X之前的Android版本上，可以通過一些第三方開源庫來在Android中使用SVG。而在Android 5.X之後，Android中添加了對SVG的path標簽的支持。從而讓開發者可以使用SVG來創建更加豐富的動畫效果。那麼SVG對比傳統的Bitmap，究竟有什麼好處呢？Bitmap（位圖）通過在每個像素點上存儲色彩信息來表達圖像，而SVG是一個繪圖標准。與Bitmap相比，SVG最大的優點就是放大不會失真。而且Bitmap需要為不同分辨率設計多套圖標，而矢量圖則不需要。

path標簽

使用path標簽創建SVG，就像用指令的方式來控制一只畫筆，例如移動畫筆到某一坐標位置，畫一條線，畫一條曲線，結束。path標簽所支持的指令有以下幾種。

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 curveto(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()：關閉路徑

在使用上面的指令時，需注意以下幾點：

坐標軸以(0, 0)為中心，X軸水平向右，Y軸水平向下。 所有指令大小寫均可。大寫絕對定位，參照全局坐標系；小寫相對定位，參照父容器坐標系。 指令和數據間的空格可以省略。 同一指令出現多次可以只用一個。

SVG常用指令

L
繪制直線的指令是“L”，代表從當前點繪制直線到給定點。“L”之後的參數是一個點坐標，如“L 200 400”繪制直線。同時，還可以使用“H”和“V”指令來繪制水平、豎直線，後面的參數是x坐標（H指令）或y坐標（V指令）。 M
M指令類似Android繪圖中path類的moveTo方法，即代表將畫筆移動到某一點，但並不發生繪制動作。 A
A指令用來繪制一段弧線，且允許弧線不閉合。可以把A指令繪制的弧線想象成是橢圓的某一段，A指令以下有七個參數。
1）RX，RY指所在橢圓的半軸大小
2）XROTATION指橢圓的X軸與水平方向順時針方向夾角，可以想象成一個水平的橢圓繞中心點順時針旋轉XROTATION的角度。
3）FLAG1只有兩個值，1表示大角度弧線，0為小角度弧線。
4）FLAG2只有兩個值，確定從起點至終點的方向，1為順時針，0為逆時針。
5）X,Y為終點坐標

SVG編輯器

SVG參數的寫法固定且復雜，因此完全可以使用程序來實現，所以一般通過SVG編輯器來編輯SVG圖形。通過可視化編輯好圖形後，點擊View Source就可以轉換為SVG代碼。SVG在線編輯器網址

Android中使用SVG

Google在Android 5.X 中提供了下面兩個新的API來幫助支持SVG。

VectorDrawable AnimatedVectorDrawable

其中，VectorDrawable讓你可以創建基於XML的SVG圖形，並結合AnimatedVectorDrawable來實現動畫效果。

VectorDrawable

在XML中常見一個靜態的SVG圖形，通常會形成下圖所示的樹形結構。

path是SVG樹形結構中的最小單位，而通過Group可以將不同的path進行組合。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPsjnus7U2mRyYXdhYmxlxL/CvM/CtLS9qFNWR8280M6jrMrXz8jQ6NKq1NpYTUzW0M2ouf12ZWN0b3Kx6sepwLTJ+cP3ttRTVke1xMq508OjrLT6wuvI58/Co6h2ZWN0b3IueG1so6mjujwvcD4NCjxwcmUgY2xhc3M9"brush:java;">

width與height屬性表示該SVG圖形的具體大小，而viewportWidth與viewportHeight屬性表示SVG圖形劃分的比例。後面在繪制path時所示使用的參數，就是根據這兩個值來進行轉換的，比如上面的代碼，將200dp劃分為100份，如果在繪制圖形時使用坐標(50, 50)，則意味著該坐標位於該SVG圖形正中間。因此，width、height的比例與viewportWidth、viewportHeight的比例，必須保持一致，不然圖形就會發生壓縮、變形。

通過添加group標簽和path標簽來繪制一個SVG圖形，其中pathData就是繪制SVG圖形所用到的指令。在上面的代碼中，先使用“M”指令，將畫筆移動到(25, 50)這個坐標，再通過A指令來繪制一個圓弧並填充，效果圖如下。

由於這裡使用了android:fillColor屬性來繪制圖形，因此繪制出來的是一個填充的圖形，如果要繪制一個非填充的圖形，可以使用以下屬性。

            android:strokeColor="@android:color/holo_blue_light"
            android:strokeWidth="2"

繪制效果如下所示：

AnimatedVectorDrawable

AnimatedVectorDrawable的作用就是給VectorDrawable提供動畫效果。Google工程師將AnimatedVectorDrawable比喻為一個膠水，通過AnimatedVectorDrawable來連接靜態的VectorDrawable和動態的objectAnimator。

如何使用AnimatedVectorDrawable實現SVG圖形的動畫效果。首先，在XML文件中通過animated-vector標簽來聲明對AnimatedVectorDrawable的使用，並制定其作用的path或group，代碼如下所示。

對應的vector即為靜態的VectorDrawable。

AnimatedVectorDrawable中指定的target的name屬性必須與VectorDrawable中需要作用的name屬性保持一致，這樣系統才能找到要實現動畫的元素。通過AnimatedVectorDrawable中target的animation屬性，將一個動畫作用到了對應name的元素上，objectAnimator代碼如下：

可以看到，對動畫效果的實現，還是通過屬性動畫來實現的，只是屬性稍有不同。

在group標簽和path標簽中添加了rotation、strokeColor、pathData等屬性，那麼在objectAnimator中，就可以通過指定android:propertyName=”XXX”屬性來選擇控制哪一種屬性，通過android:valueFrom=”XXX”和android:valueTo=”XXX”屬性，可以控制動畫的起始值，唯一需要注意的是，如果指定屬性為pathData，那麼需要添加一個屬性——android:valueType=”pathType”來告訴系統進行pathData變換。類似的情況，可以使用rotation進行旋轉動畫、使用strokeColor實現顏色變化，使用pathData進行形狀、位置變化。

當所有的XML文件准備好以後，就可以在代碼中控制SVG動畫，可以非常方便地將一個AnimatedVectorDrawable XML文件設置給一個ImageView作為背景顯示。

在程序中，只需要使用以下代碼，即可開始SVG動畫。

        Drawable drawable = imageView.getDrawable();
        if(drawable instanceof Animatable){
            ((Animatable) drawable).start();
        }

SVG動畫實例

線圖動畫

在Android 5.X 中Google大量引入了線圖動畫。當頁面發生改變時，頁面上的icon不再是生硬地切換，而是通過非常生動的動畫效果，轉換為另一種形態。如下圖所示，點擊圖像時，開始SVG動畫，上下兩根線會從中間折斷並向中間折起，最終形成一個“X”。

要實現這樣一個效果，首先創建一個靜態的SVG圖形，即靜態的VectorDrawable，並繪制為如圖所示的初始狀態。

path1和path2分別繪制了兩條直線，每條直線由三個點控制，即起始點、中間點和終點，形成初始狀態。接下來實現變換的objectAnimator動畫。

最後使用AnimatedVectorDrawable來將VectorDrawable與objectAnimator黏合在一起。

模擬三球儀

三球儀是天文學中一個星象儀器，用來模擬地、月、日三個星體的繞行軌跡，即地球繞太陽旋轉，月球繞地球旋轉的同時，繞太陽旋轉，如下圖所示：

首先，同樣是需要繪制一個靜態的地、月、日三星系統。

上述代碼中，在“sun”這個group中，有一個“earth”group，同時使用android:pivotX和android:pivotY屬性來設置其旋轉中心。這個VectorDrawable分別代表了太陽系系統和地月系系統。下面對這兩個group分別進行SVG動畫：

這裡為了簡化示例，讓兩個動畫效果的實現完全相同。最後，最後使用AnimatedVectorDrawable黏合SVG靜態圖形和動畫。

軌跡動畫

Android對SVG的支持給我們帶來了很多好玩的特效，例如可以將propertyName指定為trimPathStart，這個屬性用來控制一個SVG Path的顯示比例，例如一個圓形的SVG，使用trimPathStart動畫，可以像畫出一個圓一樣來繪制一個圓，從而形成一個軌跡動畫，下面這個實例就展示了繪制軌跡的動畫效果，用來繪制搜索框中的一個放大鏡，效果如下所示：

代碼如下：