UI設計師SVG動畫進階篇——路徑變形動畫（中篇）

接着上篇 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動畫的終極形式，其餘的縮放也好、斜切也好、位移也好，等等，經過路徑的變形均可以實現，只不過規則的動畫效果用其餘動畫屬性實現起來更簡單而已。
因此，在作這類動畫時，自主權必定要緊緊掌握在咱們的手裏，路徑起點也好，方向也好，知道怎麼調整，這樣才能預知動畫效果。

原本想這篇就結束，後來發現須要再補充兩個高階的，一個是鏤空圖形的變形動畫，一個是一變多和多變一如何實現的，佔用篇幅比較大，那這個改名爲中篇，最後的放到下篇吧。