前言
獲取矢量圖，我們可以跟UI們后直接獲取到需要的矢量圖，也有很多項目UI管理網站支持直接提供矢量圖（比如藍湖）。但是，矢量圖動畫如果一直去手動敲代碼實現難免會不太直觀，調試動畫也很麻煩，且效率不高。google官方在https://www.bilibili.com/video/BV1mE411N7wW這個視頻里提供了一個實現動畫的工具。那就是shapeshifter。 這是一個在線網站實現動畫的工具，它能很好的幫忙快速實現矢量圖動畫與調試矢量圖動畫。
shapeshifter網站地址：https://shapeshifter.design/
簡單的group動畫Demo
拋開其他，按照個人慣例，我們先來一個極其簡單的一個小demo來快速了解一下這個網站實現動畫的大概流程。這里我們實現一個簡單的旋轉動畫。
1.打開網站后我們，需要導入一個矢量圖提供我們操作。在網站的左下角，如圖。 我們點擊 Import 准備導入矢量圖。點擊后我們可以看到2個選項SVG 與 Vector Drawable 。如果學習過之前的內容，我們可以知道SVG 是正常的矢量圖文件，而Vector Drawable是Android 轉化后的矢量圖文件。這里可以根據你的情況導入SVG 或者 Vector Drawable 都可以。
2.導入后，可以看到如圖，我們可以看到左下角的框框有一個path路徑，點擊后就可以看到我們導入的圖片。在右邊是這張矢量圖的基本屬性。如果，你不小心放錯了圖片可以直接選中path點擊鍵盤上的刪除鍵就可以刪除了。
3.對矢量圖動畫有所了解，我們可以知道旋轉動畫是靠group實現的。所以，我們需要創建一個group，並且把path放入其中。在網站的左下角點擊
圖標，選擇New group layer創建一個group。
4.將path拖到group里面
5.點擊選中group，然后在點擊秒表圖標，創建一個rotation旋轉動畫
圖1
圖2
6.設置動畫持續時間，在左下角找到anim 點擊后在右邊設置動畫持續時間
7.處理動畫執行的中心點
因為旋轉是需要一個基點的，而這個點默認在左上角，我們需要將它設置到中心點上。如圖，點擊group在pivotX與pivotY輸入12（因為我們這個矢量圖是24格的）
7.處理旋轉動畫屬性
點擊動畫的長條，然后輸入 startTime動畫的開始時間為0 ， endTime 動畫的結束時間為3000 ，interpolation 插值模式 ，fromValue開始值為0 ，toValue 結束值為90
8.點擊播放，可以預覽動畫
9.導出動畫文件到Android studio上
點擊Export，點擊Animated Vector Drawable導出xml文件。然后直接放入Android studio上使用就行了。
復雜的group動畫demo
效果圖:
1. 將svg導入后將每一個path都用一個group包裹,讓每一組path都有獨立的動畫
2. 處理樹干動畫
1.設置旋轉點,在點擊圖片可以看到有一個坐標圖,我們直接取得坐標圖的x與y坐標
2.將x與y坐標值寫入樹干對應的group
3.創建旋轉動畫
1.第一個旋轉動畫
第二個 旋轉動畫處理,讓動畫閉環循環
4.處理其他葉片動畫
舉一反三葉片動畫其實與樹干動畫操作類型,但是第一個葉片旋轉角度設置為-5,第二個葉片旋轉角度設置為5,第三個葉片旋轉角度設置為-5. 這樣樹葉動畫就有錯開感了
path動畫
用shapeshifter實現group動畫是毫無難度的，可以按照上面的例子舉一反三完成其他動畫。而shapeshifter工具更厲害的地方是可以方便的生成path動畫。
path動畫的難點是什么？
在實現demo之前，需要了解下path動畫的難點是什么。path動畫的難點就是開始動畫圖片與結束動畫圖片所使用的路徑屬性數量和類型需要完全一致，只能改變路徑屬性里的值。你讓UI設計師幫你實現2張圖片path的路徑屬性一致是不現實的。首先太費時間，其次難度太大，很多UI設計師並不路徑矢量路徑屬性。所以，如果想使用酷炫的path動畫就得自己實現路徑屬性與類型的一致，這工作量太大，且復雜的矢量圖path是相當復雜的。好在shapeshifter可以幫我們解決這個難題，下面就來演示如何完成這個難題。
1.開始動畫矢量圖與結束動畫矢量圖
首先我們依然需要UI幫我們提供開始動畫矢量圖圖與結束動畫矢量圖圖。但是他們可以不管路徑是否統一。我們先將矢量圖導入到Android studio生成VectorDrawable格式的矢量圖。
開始矢量圖
結束矢量圖
2.將開始矢量圖導入到shapeshifter里
3.創建path動畫，點擊path后，在點擊小秒表圖標，如圖選擇pathData
4.復制結束動畫的path到新建的pathData動畫屬性里的toValue里
結束動畫矢量圖pathdata內容復制到toValue
圖1
圖2
它會提示我們路徑屬性不一致的錯誤
5.點擊魔術棒自動合並路徑屬性
6.這個時候你可以嘗試修改動畫時間為3秒，播放一下，會發現自動生成的path動畫很奇怪。如下圖
7.點擊鉛筆圖標，進入編輯模式，現在需要修改這奇怪的動畫。
8.編輯路徑屬性
從這里開始就是很考驗理解天賦了
1.可以看到因為路徑不是整個合並的所以路徑是分成一部分一部分的。這個時候，應該先調試其中一段路徑的屬性。
2.在鼠標點擊到這些path圖像上后，我們可以看到右上角會出現一排工具。理解這些工具非常重要，因為你能實現一個完美的path動畫必須了解怎么使用它們
添加一個標點
2個標點合並成一個
匹配開始路徑與結束路徑里某個path，將2個不相干的path互相匹配起來。讓他們形成關聯。
置換圓形標志里數值的排序
向前或者向后移動圓形標志數值
3.理解圓形標志
在鼠標點擊到某個路徑上后，我們可以看到這個路徑上全部的圓形標志上的數值。如圖：
藍色圖標:是不可以移動的必需的path點。
黃色圖標:是可以移動且可以選擇刪除的path點,主要作用是增加動畫的關節點，保證動畫變化時的順暢。
這些數值與另一個結束矢量圖或者開始矢量圖是對應的，我們就是需要修正他們到位置與數值完全對應。如果你發現他們不是匹配的，點擊后另一方標志會出現另一個path上你可以使用將它們匹配起來。
左開始矢量圖
右結束矢量圖 
如上圖，我們發現左邊 1 和 2 的位置 在 右圖是 8 和 1.所以，需要使用 與 這2個功能將這2個點的數值調整成完全一致。如下圖，我調整完成后。
左
右 
然后，左邊有4個黃數值是位置不太正確，需要調整位置，需要觀察下右邊是有多出2個拐角的，按照拐角的位置我們重新排放數值位置，如下圖：
請注意左右圖， 7 與 6的位置 還有 4 與 5的位置。還有多出來的2個拐點8和2.
我們在運行一下動畫，可以看到動畫跟之前比起來正常了很多。
9.以上編輯路徑的操作可以舉一反三對其他路徑進行處理
處理完成后我們可以得到一個動畫效果十分正常的一個矢量圖動畫了，如下一一對應的路徑數組圖片：
左
右
10.看看經過全部調整后的動畫效果
一些小提示
保存當前的動畫工作
在折騰過一段時間后，我發現調試這些動畫有時候經常會調崩。所以，建議完成一個path的調試后先保存工作，在去調試下一個path。在左下角找到File > save 保存當前文件,需要打開的時候只需要File > open就行了.
網頁自帶了一些Demo
在File > Demo 里有一些Demo按例。
同類型動畫，新增多個
在動畫項的最右有一個小圖標 + 號 是可以新增一個這個類型的動畫的，如下圖：
一些坑
1.請注意，這個工具默認的動畫差值器並不是默認 android:interpolator="@android:interpolator/linear" 線性差值的。所以，如果你調試圓形漣漪重復動畫發現，怎么都無法適配到正確的漣漪層數時，你應該注意可能是用了其他差值器。將差值器修改成線性差值，可能就解決了你的疑惑。
End