接著上篇 juejin.im/post/591272…
繼續，上篇對於UI來說，應該是小菜菜，因為畢竟都是以AI為出發點，所有的調整也都是在AI裡來完成，從現在開始，繼續深入下去，加大點難度。上篇稱之為基礎篇，這篇是進階篇。
6.進階3——調整閉合路徑起點
上一篇的末尾留了個小尾巴，即閉合路徑的起點的問題，為什麼需要調整路徑起點呢？從例項入手，我們來說一下。比如我想做下面這種變形：
有了上一篇的基礎，這時按部就班，先檢視錨點數，然後給錨點數少的圖形打上幾個點，然後調整手柄之類的就不說了。前面一直是兩個圖形的變形，那三個呢？定義兩個動畫？當然，不是不可以，但瞭解CSS3動畫屬性的UI知道我們可以再加一個關鍵幀，我把CSS3動畫模板改成下面這種，中間加一幀，位置我定在60%吧，就是前2/5草變葉子，後3/5葉子變羽毛，羽毛的描邊先不用理會。因為變形略複雜，我讓動畫時間變成6s。
<style>
@keyframes deform{
0% {d:path('');}
60% {d:path(''); }
100% {d:path(''); }
}
#animated {
animation: deform 6s ease;
}
</style>複製程式碼保證每個錨點都有兩個非對稱手柄且路徑方向保持一致後，就可以匯出SVG了，另外我希望動畫效果是在原來位置變形，所以記得在匯出之前把三個圖形疊合在一起，像下面這種：
那是否就能達到我們的初衷了呢？用效果說話：
看到這裡，設計師小夥伴要憤怒了，什麼？我這個那個都調整了，怎麼還是這種“亂七八糟”變形效果，這騙人的教程，先莫摔滑鼠，堅持一下，你離成功只有一步之遙，那就是路徑起點（最後我會把操作過程全部理順）。
我把這三個圖形的起點和第一段路徑(都已經統一成順時針方向)用紅色標出來，起點七零八落，那路徑的變形過程必然支離破碎，如果我們能把起點位置統一一下就好了，那怎麼人為控制起點方向呢？當然，如果你熟悉貝塞爾曲線的生成原理，就會知道小c繪製的曲線由於是針對前一個位置點相對位置，所以和起點座標無關，也就是你可以隨便去改M，但同時，你要去調整d值裡面曲線段的順序，能實現，但略麻煩，而且改來改去，說不定哪裡就錯了，那正解呢？
我們好好想一想，閉合路徑不能隨便控制，那我們把它搞成開放路徑不就可以了，開放路徑的點不就是路徑的起點嘛，然後，繼續，對了，AI裡的剪刀工具，直接對著你想當做起點的錨點咔擦就是一剪子，好啦，閉合路徑→開放路徑，大家可以自己操作一下，匯出SVG看一下，d值唯一的區別就是沒有以z結尾，就是宣告“我是開放路徑”的意思。
那我按照這個方法，把三個圖形的的起點都統一到右下角那個位置（不用重合，靠得稍微近一些就可以）。
然後動畫效果看一下如何：
也不夠順滑！！但和上面那個無序的對比，能明顯看出似乎底部有個點讓它們以此為基點進行變換，那就是我們定義的起點。這裡我要給自己辯解一下了，因為我的這三個圖形實在差別太大，但這個方法一定要掌握，因為能人為操縱路徑起點在做一些變形動畫時很有用處。
路徑變形動畫不同於其他動畫，相對複雜，需要調節的地方很多，我把順序理一遍。
1.加錨點——需要變形的圖形要保證相同的錨點數。
2.調整手柄——確保每個錨點有兩個非對稱手柄
3.自定義起點——通過使用剪刀把閉合路徑轉化成開放路徑
4.d值檢查——匯出的SVG按固定格式排列以便檢查對比d值，目的1，確認路徑方向，需要反向路徑的轉換成複合路徑後進行反轉路徑操作（並非所有動畫效果都需要保證同向，根據實際想得到的效果來）；目的2，有個別非小c開頭的找到對應路徑，調整。
5.套用CSS程式碼模板——可調節引數或增加其他動畫效果。
一般的路徑變形動畫需要的問題差不多就在這裡了，有設計師如果親測過程中遇到問題，可留言，包解決。
7.進階4——開放路徑變形動畫
其實，上面我們把路徑剪開後，閉合路徑已經是開放路徑了，不過是由於起點終點重合，視覺上是閉合的而已，但仍然把這個單獨拿出來說，是因為路徑變形動畫實在是太太有用處了，就算我們拿一段兩點組成的最簡單的路徑來說。還是我們的模板，其他部分不變，我改了一下運動速率的引數。
animation: deform 1s cubic-bezier(.75,0,1,.23) infinite alternate;複製程式碼然後得到了一條觸底反彈的繩子。
我們為什麼要自主控制路徑方向？
因為同樣還是這根繩子，路徑方向反向之後，效果就變成了下面這種：
還是這根繩子，我調整一下手柄變成一個波浪線，然後就能得到下面這種轉來轉去效果：
以及這種扭來扭曲的效果
還有走了走去的效果
前面說了那麼多的目的，就是想讓UI設計師以最快的方法掌握動畫，擺上圖形，然後搞定，剩下自動生成。比如我就那麼隨意擺上四根波浪線：
然後把對應的d值套用到我們動畫程式碼裡，當然了，四個不同的路徑，中間再補充兩個關鍵幀，然後得到了什麼？就是下面這隻瘋狂的蟲子：
而且，這還只有兩個錨點，如果更多的錨點，會產生各種無限的可能，方法是固定的，剩下就是創意了。真正好的動效，不一定實現的技術多複雜，可能只是最基礎的變化，我自己也很欠缺想法，也在努力改進中。
路徑變形動畫是CSS3動畫的終極形式，其他的縮放也好、斜切也好、位移也好，等等，通過路徑的變形都可以實現，只不過規則的動畫效果用其他動畫屬性實現起來更簡單而已。
所以，在做這類動畫時，自主權一定要牢牢掌握在我們的手裡，路徑起點也好，方向也好，知道怎麼調整，這樣才能預知動畫效果。
本來想這篇就結束，後來發現需要再補充兩個高階的，一個是鏤空圖形的變形動畫，一個是一變多和多變一如何實現的，佔用篇幅比較大，那這個更名為中篇，最後的放到下篇吧。