1 SVG的全稱是Scalable Vector Graphics，叫可縮放向量圖形。它和點陣圖（Bitmap）相對，SVG不會像點陣圖一樣因為縮放而讓圖片質量下降。

2 Android L開始提供了新的API VectorDrawable 可以使用SVG（向量圖）型別的資源，在xml檔案中的標籤是vector。但想要好好的感受下SVG的使用，除了需要5.0之後的系統支援外，還需要使用AndroidStudio進行開發，因為AS已經支援通過右鍵建立SVG相關的檔案（親兒子的待遇，就像Nexus系列手機）。當然，eclipse也可以進行開發，只是沒有智慧提示和自動補全，一些屬性需要記住手動敲進去。

3 這篇文章使用SVG實現今日頭條的下拉重新整理動畫，體會一把SVG的用法（網上資料不多，畢竟國內對於系統更新的支援還是比較緩慢的）

效果

效果分析

1 方形順時針在四個角中移動
2 線條根據方形的移動而變化（包括位置變化和長度變化兩種）

實現分析

1 首先，使用vector標籤建立初始形態的svg圖形

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height
 
="200dp"
    android:viewportHeight="200"
    android:viewportWidth="200"
    android:width="200dp" >

    <path
        android:name="path1"
        android:pathData="
        M20,30 
        L100,30 
        M100,30 
        L100,90 
        M100,90 
        L20,90 
        M20,90 
        L20,30"
        android:strokeColor
 
="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path2"
        android:pathData="
        M120,30 
        L180,30 "
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path3"
        android:pathData="
        M120,60 
        L180,60"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path4"
        android:pathData="
        M120,90 
        L180,90"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path5"
        android:pathData="
        M20,120 
        L180,120"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path6"
        android:pathData="
        M20,150 
        L180,150"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path7"
        android:pathData="
        M20,180 
        L180,180"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />

</vector>

需要為每個path設定name屬性，這是為了讓系統找到要實現動畫的元素

包含了兩組寬高屬性：
1 width和height：表示svg圖形的具體大小
2 viewportWidth和viewportHeight：表示svg劃分的比例
兩者的關係：將100dp劃分為100份，如果在繪製圖形時使用座標（20，20），則意味著該座標位於該svg圖形的（20，20）位置

svg指令（包括但不限於）
1 M：將畫筆移動到某一個點上
2 L：代表從當前點繪製直線到指定點
3 A：用於繪製一段弧線，且允許弧線不閉合（可制定引數實現）
4 H：繪製水平線
5 V：繪製垂直線

2 通過animated-vector標籤制定動畫作用的path

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

    <target
        android:name="path1"
        android:animation="@animator/animator_path_one" />
    <target
        android:name="path2"
        android:animation="@animator/animator_path_two" />
    <target
        android:name="path3"
        android:animation="@animator/animator_path_three" />
    <target
        android:name="path4"
        android:animation="@animator/animator_path_four" />
    <target
        android:name="path5"
        android:animation="@animator/animator_path_five" />
    <target
        android:name="path6"
        android:animation="@animator/animator_path_six" />
    <target
        android:name="path7"
        android:animation="@animator/animator_path_sevent" />

</animated-vector>

每個target裡邊的name屬性與之前在vector中定義的name屬性必須保持一致

3 動畫實現（其中一個為例）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially" >

    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
        M20,30 
        L100,30 
        M100,30 
        L100,90 
        M100,90 
        L20,90 
        M20,90 
        L20,30"
        android:valueTo="
        M100,30 
        L180,30 
        M180,30 
        L180,90 
        M180,90 
        L100,90 
        M100,90 
        L100,30"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
        M100,30 
        L180,30 
        M180,30 
        L180,90 
        M180,90 
        L100,90 
        M100,90 
        L100,30"
        android:valueTo="
        M100,120 
        L180,120 
        M180,120
        L180,180 
        M180,180 
        L100,180 
        M100,180 
        L100,120"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
        M100,120 
        L180,120 
        M180,120
        L180,180 
        M180,180 
        L100,180 
        M100,180 
        L100,120"
        android:valueTo="
        M20,120 
        L100,120 
        M100,120
        L100,180 
        M100,180 
        L20,180 
        M20,180 
        L20,120"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
        M20,120 
        L100,120 
        M100,120
        L100,180 
        M100,180 
        L20,180 
        M20,180 
        L20,120"
        android:valueTo="
        M20,30 
        L100,30 
        M100,30 
        L100,90 
        M100,90 
        L20,90 
        M20,90 
        L20,30"
        android:valueType="pathType" />

</set>

1 定義了一個動畫集合，裡邊包含了四個屬性動畫，而且為順序執行（android:ordering=”sequentially”）
2 通過android:propertyName=”pathData”設定動畫控制的屬性為路徑
3 android:valueFrom指定了動畫的起始，android:valueTo指定了動畫的結束
4 這裡，還需要新增一個android:valueType=”pathType”來告訴系統是進行pathData變換

4 使用

經過上邊的步驟，一個svg動畫就實現了。

// 將該drawable設定給ImageView
<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/animated_svg" />
// 啟動動畫（類似於AnimationDrawable的使用 ）
Animatable animatable = (Animatable) imageView.getDrawable();
animatable.start();

總結

經過上邊的步驟，就使用svg實現了今日頭條下拉重新整理的動畫。當然，這裡只是用到了svg其中的一些知識；需要更多的瞭解svg，還是需要多些例子，多學習。