看過之前那篇介紹靜態(tài) SVG 矢量圖片的童鞋掷邦，應該時有感觸的竣稽，SVG 就是給我們一個 空的不限制大小的canvas畫板冯吓，然后我們使用 path 路徑去繪制我們需要的圖形界阁，這就是靜態(tài)的 SVG儡率。動態(tài) SVG 就是對靜態(tài) SVG 的一種擴展挂据，就是給靜態(tài) SVG 加一個可以執(zhí)行動畫操作的殼。
說的簡單點就是這么回事儿普，對于兼容性來說崎逃，你只要完成了前面靜態(tài) SVG 的兼容，那么這里就不用再做其他操作了眉孩。
廢話不多說个绍，直接然我們來看看如何寫動態(tài) SVG
先上效果圖：
這個大家看著是不是很熟悉啊勒葱，這就是那個切換抽屜的交互。使用矢量動畫來實現(xiàn)其實很簡單巴柿，就是用了一個 pathData 的變換+旋轉(zhuǎn)凛虽。這里例子 地址
這是本文中學習 項目地址 就是下面這張圖
看到?jīng)]這幾個都是使用動態(tài) SVG，俗稱矢量動畫實現(xiàn)的广恢，代碼很簡單凯旋，原理也是很簡單。
從實現(xiàn)上看是給靜態(tài) SVG矢量圖 VectorDrawable 添加一個殼 Animated-Vector袁波，這里殼里面綁定了 SVG 矢量圖和 objectAnimator 的關(guān)系瓦阐。對你沒看錯就是objectAnimator屬性動畫。
因此還有一種說法就是使用 objectAnimator屬性動畫對 SVG 矢量圖的 path 屬性進行漸變操作篷牌，就成動畫啦睡蟋。
好了，現(xiàn)在我們一一來看一下：
SVG 靜態(tài)矢量圖
Animated-Vector 捆綁靜態(tài)矢量圖和動畫的殼
最上面的 drawable 屬性是聲明使用哪張矢量圖枷颊，下面的 target 就是具體的捆綁關(guān)系了戳杀。 target 里面的name 屬性是說動畫時對應靜態(tài)矢量圖中的哪個部分，我們在畫矢量圖時是可以聲明 group 便簽的夭苗，這個就是為了后面的做動畫準備的信卡。這個 group 標簽是給圖片中的某以部分圖像打個標記，然后我們在外層可以給這個標記的圖片部分綁定一個動畫题造。animator 就是具體的動畫了傍菇，當然這些動畫都只能圍繞path 來做。
objectAnimtor 具體的動畫
這當然還沒完界赔，這只能顯示出靜態(tài) SVG 在屏幕上丢习，要讓我們的動畫動起來還是要執(zhí)行代碼的
public void anim(View view) {
ImageView imageView = (ImageView) view;
Drawable drawable = imageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
好了這樣一個動畫 SVG 圖片就好了，在我們不執(zhí)行代碼時他就是一張靜態(tài) SVG 圖淮悼，我們開始執(zhí)行代碼后就可以跑我們設計的動畫了咐低。
這里我要感慨一些，SVG 這東西太好用了袜腥，尤其是對于 app 中我們點擊 icon 后做簡單的動畫來實現(xiàn)好看的交互這點來說见擦，簡直就是絕配啊，而且可以自由創(chuàng)作羹令。SVG 我們在繪制path 時可以分塊鲤屡，然后我們可以給按 path 塊設計不筒的動畫，這樣是不是很簡單很靈活福侈，一個 imageview 搞定酒来。
好了來小小的總結(jié)下，每個Vector動畫癌刽，基本都包含四部分內(nèi)容役首，即：
Vector：圖像資源
Animated-vector：動畫、圖像粘合劑
ObjectAnimator：動畫資源
代碼：啟動動畫
每個Vector動畫通過這四個部分去進行分析显拜，就非常清晰了衡奥。
上面我們使用的trim path 的方式(剪切路徑),對path做動畫有3種:
- trimPath 剪切路徑
- 通常的位移，旋轉(zhuǎn)远荠，縮放矮固，漸變
- morphPath 變換路徑
我們來挨個看一下這幾個動畫，這涉及到svg 動畫的兼容
trimPath 剪切路徑動畫：
剪切路徑動畫是使用的屬性動畫中的 trimPathStart/trimPathEnd 來實現(xiàn)的
通常的位移譬淳，旋轉(zhuǎn)档址，縮放，漸變動畫
morphPath 變換路徑動畫
變換路徑操作的是屬性動畫中的 pathData 來實現(xiàn)的
好了這3種對 path 做動畫的方式我們都看過了邻梆，這里我要說一下守伸，兼容這東西都是不完善的，所以呢在5.0以下morphPath 變換路徑動畫是不能使用的浦妄，寫了直接報錯尼摹。在5.0以上版本這個morphPath 變換路徑動畫可以使用，要是你在 xml 文件里對 imageview 設置 src 屬性來指定動態(tài)SVG 圖片剂娄，可以顯示蠢涝，但不會執(zhí)行，這時系統(tǒng)的問題阅懦，你得手動用代碼設置 src 屬性才行
ImageView imageView = (ImageView) view;
AnimatedVectorDrawable morphing = (AnimatedVectorDrawable) getDrawable(R.id.xxx);
imageView.setImageDrawable(morphing);
if (morphing != null) {
morphing.start();
}
這樣才行和二，手寫代碼設置圖片唄，這是因為我們使用 AppCompatActivity后耳胎，會自動把 AnimatedVectorDrawable 轉(zhuǎn)換成 AnimatedVectorDrawableCompat 惯吕，后者是不支持 pathDatad屬性的，所以得自己手寫代碼场晶。
其它非常奇怪混埠、詭異、不能理解的兼容性問題诗轻，只能通過版本文件夾的方式來進行兼容了钳宪，例如drawable-v21和drawable，分別創(chuàng)建兩個文件名相同的資源在兩個文件夾下扳炬，這樣在21以上版本吏颖，會使用drawable-v21的資源，而其它會使用drawable下的資源恨樟。
參考資料：
