看過之前那篇介紹靜態 SVG 矢量圖片的童鞋，應該時有感觸的，SVG 就是給我們一個 空的不限制大小的canvas畫板，然后我們使用 path 路徑去繪制我們需要的圖形，這就是靜態的 SVG。動態 SVG 就是對靜態 SVG 的一種擴展，就是給靜態 SVG 加一個可以執行動畫操作的殼。
說的簡單點就是這么回事，對于兼容性來說，你只要完成了前面靜態 SVG 的兼容，那么這里就不用再做其他操作了。
廢話不多說，直接然我們來看看如何寫動態 SVG
先上效果圖：
這個大家看著是不是很熟悉啊，這就是那個切換抽屜的交互。使用矢量動畫來實現其實很簡單，就是用了一個 pathData 的變換+旋轉。這里例子 地址
這是本文中學習 項目地址 就是下面這張圖
看到沒這幾個都是使用動態 SVG，俗稱矢量動畫實現的，代碼很簡單，原理也是很簡單。
從實現上看是給靜態 SVG矢量圖 VectorDrawable 添加一個殼 Animated-Vector，這里殼里面綁定了 SVG 矢量圖和 objectAnimator 的關系。對你沒看錯就是objectAnimator屬性動畫。
因此還有一種說法就是使用 objectAnimator屬性動畫對 SVG 矢量圖的 path 屬性進行漸變操作，就成動畫啦。
好了，現在我們一一來看一下：
SVG 靜態矢量圖
Animated-Vector 捆綁靜態矢量圖和動畫的殼
最上面的 drawable 屬性是聲明使用哪張矢量圖，下面的 target 就是具體的捆綁關系了。 target 里面的name 屬性是說動畫時對應靜態矢量圖中的哪個部分，我們在畫矢量圖時是可以聲明 group 便簽的，這個就是為了后面的做動畫準備的。這個 group 標簽是給圖片中的某以部分圖像打個標記，然后我們在外層可以給這個標記的圖片部分綁定一個動畫。animator 就是具體的動畫了，當然這些動畫都只能圍繞path 來做。
objectAnimtor 具體的動畫
這當然還沒完，這只能顯示出靜態 SVG 在屏幕上，要讓我們的動畫動起來還是要執行代碼的
public void anim(View view) {
ImageView imageView = (ImageView) view;
Drawable drawable = imageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
好了這樣一個動畫 SVG 圖片就好了，在我們不執行代碼時他就是一張靜態 SVG 圖，我們開始執行代碼后就可以跑我們設計的動畫了。
這里我要感慨一些，SVG 這東西太好用了，尤其是對于 app 中我們點擊 icon 后做簡單的動畫來實現好看的交互這點來說，簡直就是絕配啊，而且可以自由創作。SVG 我們在繪制path 時可以分塊，然后我們可以給按 path 塊設計不筒的動畫，這樣是不是很簡單很靈活，一個 imageview 搞定。
好了來小小的總結下，每個Vector動畫，基本都包含四部分內容，即：
Vector：圖像資源
Animated-vector：動畫、圖像粘合劑
ObjectAnimator：動畫資源
代碼：啟動動畫
每個Vector動畫通過這四個部分去進行分析，就非常清晰了。
上面我們使用的trim path 的方式(剪切路徑),對path做動畫有3種:
- trimPath 剪切路徑
- 通常的位移，旋轉，縮放，漸變
- morphPath 變換路徑
我們來挨個看一下這幾個動畫，這涉及到svg 動畫的兼容
trimPath 剪切路徑動畫：
剪切路徑動畫是使用的屬性動畫中的 trimPathStart/trimPathEnd 來實現的
通常的位移，旋轉，縮放，漸變動畫
morphPath 變換路徑動畫
變換路徑操作的是屬性動畫中的 pathData 來實現的
好了這3種對 path 做動畫的方式我們都看過了，這里我要說一下，兼容這東西都是不完善的，所以呢在5.0以下morphPath 變換路徑動畫是不能使用的，寫了直接報錯。在5.0以上版本這個morphPath 變換路徑動畫可以使用，要是你在 xml 文件里對 imageview 設置 src 屬性來指定動態SVG 圖片，可以顯示，但不會執行，這時系統的問題，你得手動用代碼設置 src 屬性才行
ImageView imageView = (ImageView) view;
AnimatedVectorDrawable morphing = (AnimatedVectorDrawable) getDrawable(R.id.xxx);
imageView.setImageDrawable(morphing);
if (morphing != null) {
morphing.start();
}
這樣才行，手寫代碼設置圖片唄，這是因為我們使用 AppCompatActivity后，會自動把 AnimatedVectorDrawable 轉換成 AnimatedVectorDrawableCompat ，后者是不支持 pathDatad屬性的，所以得自己手寫代碼。
其它非常奇怪、詭異、不能理解的兼容性問題，只能通過版本文件夾的方式來進行兼容了，例如drawable-v21和drawable，分別創建兩個文件名相同的資源在兩個文件夾下，這樣在21以上版本，會使用drawable-v21的資源，而其它會使用drawable下的資源。
參考資料：
