繼續上一篇的，總結一下最後的SVG向量動畫。

SVG向量動畫：

介紹：

向量動畫是Google在Android5.X中新增加的動畫型別。要了解這種動畫型別，首先我們來了解一下什麼是SVG。

什麼是SVG？
SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網路的基於向量的圖形
SVG 使用 XML 格式定義圖形
SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是全球資訊網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

那麼SVG有什麼優勢呢？

SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 影象比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 影象可在任何的解析度下被高質量地列印
SVG 可在影象質量不下降的情況下被放大
SVG 影象中的文字是可選的，同時也是可搜尋的（很適合製作地圖）
SVG 可以與 Java 技術一起執行
SVG 是開放的標準
SVG 檔案是純粹的 XML

以上就是SVG的一些簡單介紹，可以看出，SVG可以很好的適應不同種螢幕解析度，因此可以很好的進行適配工作，減少了圖示的設計。

那麼SVG動畫就是使用SVG圖形做出的動畫效果。

SVG的基礎知識：

SVG使用<path>標籤來建立影象，我們可以在<path>標籤中使用SVG所支援的命令來進行圖形的繪製。

常用屬性：

• fill：填充色

• stroke：文字顏色或者是元素輪廓顏色

• stroke-width：文字或元素輪廓厚度

• transform：圖形變換

常用命令：

• 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）：三次貝賽爾曲線，第一控制點X，第一控制點Y 第二控制點X，第二控制點Y曲線結束點X，曲線結束點Y

• S = smooth curveto（S X2，Y2，ENDX，ENDY）：光滑曲線，第二控制點X，第二控制點Y 結束點X，結束點Y

• Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY) ：二次貝塞爾曲線，控制點X，控制點Y 曲線結束點X，曲線結束點Y

• T = smooth quadratic Belzier curveto(T ENDX,ENDY) ：對映前面路徑後的終點X，對映前面路徑後的終點Y

• A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) ：弧線，

  • RX,RY指所在橢圓的半軸大小

  • XROTATION指橢圓的X軸與水平方向順時針方向夾角

  • FLAG1只有兩個值，1表示大角度弧線，0為小角度弧線。

  • FLAG2只有兩個值，確定從起點至終點的方向，1為順時針，0為逆時針

  • X,Y為終點座標

• Z = closepath() ：關閉路徑

例項展示（一個螺旋）：

對應程式碼：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

SVG在Android中的使用：

看了上邊的那個螺旋圖對應的程式碼是不是覺得畫一個SVG圖形很複雜？其實不用擔心，因為SVG的寫法固定，所以早已經有了很多優秀的SVG編輯器供我們使用，而不是自己計算每個點的值。

SVG編輯器：

VectorDrawable和AnimatedVectorDrawable：

Android中提供了這兩個API來進行SVG向量動畫的支援，其中VectorDrawable用於繪製xml檔案的靜態向量圖，而AnimatedVectorDrawable則用於將靜態的向量圖做成動畫，

VectorDrawable：

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="100"
    android:viewportHeight="100">
    <!--width和height表示該SVG圖片實際的大小-->
    <!--viewportWidth和viewportHeight表示在該SVG圖片中圖形劃分的比例，在後邊圖形的繪製中的數值都是按比例來進行的-->
    <path
        android:strokeColor="@color/colorPrimary"
        android:strokeWidth="1"
        android:fillColor="@color/colorAccent"
        android:pathData="
                           M 25 50
                           a 25,25,0,1,0,50,0"
    />
    <group android:name="test"><!--可以用group來組合多個path路徑 -->
        <path android:strokeColor="@color/colorPrimaryDark"
            android:strokeWidth="2"
            android:pathData="
                             M 40 10
                             c 25,25,30,30,35,3"
            />
    </group>
</vector>

AnimatedVectorDrawable：

這個在AS2.2中需要放在animator資料夾下

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/svg_drawable">

    <target
        android:animation="@anim/view_anim_rotate"
        android:name="test" />
    <!--其中name的名字要和使用的svg圖片中的需要作用的圖片名字一樣-->
    <!--animation是要使用的動畫效果-->
</animated-vector>

做完這兩步之後，就可以將SVG圖片作為背景放在imageView中，並在程式碼中控制動畫的啟動。

    <ImageView
        android:id="@+id/svg_img"
        android:onClick="svgAnima"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/svg_drawable"/>

在程式碼中直接開啟動畫：

ImageView imageView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_svg_anim);
        imageView = (ImageView) findViewById(R.id.svg_img);

    }

    public void svgAnima(View view){
        ((Animatable) imageView.getDrawable()).start();
    }

現在梳理一下使用SVG向量動畫的整體流程：

1. 首先在xml檔案中畫出靜態的SVG圖形

2. 然後在AnimatedVector將靜態的SVG圖形和要使用的動畫效果連線起來

3. 在佈局檔案中使用SVG圖形作為圖片

4. 在Java程式碼中需要使用動畫的地方獲取到SVG圖片，並開啟動畫

這樣一個SVG向量動畫就做出來了。