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

以前分享了一些本身平時整理的能夠通用的SVG動畫的教程基本都是最基礎的變化，旋轉也好，縮放也好，沿路徑運動也好，只須要定義CSS3的一些動畫屬性值或者SVG的動畫屬性標籤，固然，運用得當的話，依靠這些也能作出不少超炫的效果，只要想象力足夠，idear賽過方法。
本質上來說，各類動畫原理都是相通的，包括AE，包括Macromedia Flash、包括ps自帶的時間軸動畫，包括SVG的動畫屬性和CSS3的動畫屬性，都須要定義關鍵幀，不過補間動畫一個是軟件生成，一個是瀏覽器來執行而已。以前作過flash動畫的UI設計師們必定知道，動畫最難的部分其中之一是變形動畫，形狀A→形狀B無規律的變形纔是最難掌握的部分。今天來分享一份全網獨一無二（啊哈哈，有種要上天的感受）的SVG變形動畫教程，讓UI設計師華麗麗變身動畫設計師，關鍵是，看完這篇文章後，你能夠實現任意形狀之間的變形動畫，是的，你沒有看錯，任意！獨家心得，高能預警。個人全部SVG動畫重點部分，一直都是從UI設計師最擅長的AI工具入手，和SVG的參數如何相結合，不說了，快上車。
由於實在太長了，後面有進階教程，因此分上下兩個篇章吧。若是沒有任何SVG基礎的話，建議只看上篇。
先看下面一個動畫效果，這是我初學AE時，跟着教程作的，作了多久呢？我記得是一上午/(ㄒoㄒ)/~~，自我辯解一下，不是學習能力差，而是當時那一丟丟的動畫基礎知識所有忘光光。如今這個動畫若是用SVG來作，須要多久，二十分鐘吧我猜，固然了，是在代碼模板的基礎上。

超超簡單基礎的AE作的動畫效果

看到這裏，熟練使用AE的設計師小夥伴或許不服氣了，AE也能夠，要SVG這勞什子做甚？來來來，你來告訴我AE生成的動畫你來增長些交互，好比鼠標單擊控制開始暫停結束？就算改改顏色和尺寸你都要去動源文件，而後從新生成的好吧？
另外補充一下，既然chrome聲稱要「拋棄」SMIL(不用擔憂，一邊喊着拋棄，一邊繼續支持)，那咱們之後全部的SVG動畫儘可能都用CSS3動畫屬性來完成，SVG只用來繪圖。

1.變形動畫實現代碼原理

若是用SMIL來實現變形動畫，基礎代碼以下：

<svg width="" height="" >
<path> <animate attributeName="d" dur="" values=" ; "/> </path> </svg>複製代碼

就是利用<path>的屬性d的變化，value值用分號;隔開，先後分別對應兩個形狀的路徑值。但咱們上面說過，要用CSS3來實現，那代碼就變成了下面這種（之後就用這個模板啦）：

<svg height=" " width=" ">
<style> @keyframes deform{ 0% {d:path('');} 100% {d:path(''); } } #animated { animation: deform 2s; } </style>
<path id="animated" />
</svg>複製代碼

哇，好簡單，好清爽。經過定義一個名爲deform的動畫，而後設置開始和結束，進行繪製路徑命令d:path(' ')，單引號裏面就是對應的路徑的d值；<path>標籤直接調用這個動畫就能夠了。

2.最簡單的普通形狀的變形動畫

有了上面的代碼模板了，而後能夠進行動畫的真正製做了。從最簡單的開始，根據最少三點組成一個形狀，好比我在AI裏面隨手畫了一個，叫它啥好呢，單峯山吧。

三個錨點獲得的圖形

把導出的SVG中 <path>標籤的d值複製下來，放到模板裏初始值0%對應的d:path(' ')裏。
而後動動錨點的位置，拖拖手柄，獲得下面這個，雙峯山

變換後的圖形

一樣，獲得d值放到結束100%對應的d:path(' ')裏。好了，咱們作的第一個變形動畫出來了。

變形動畫

單峯山變雙峯山了。
是否是感受很簡單，別急，由於有可能，你的動畫是下面這樣的：

無變形效果

也是由單峯變雙峯，but，那順滑的過渡效果呢？
別急，咱們從SVG代碼裏找一下緣由，我把能變形和不能變形的 <path>標籤的d值一併貼上，以下：

爲了方便d值的解讀，我從新組織了一下分行。關於M、C、c、S、z等等的含義，怕解釋後UI設計師們看了後心煩意亂，你只須要知道的是，M對應起點，後面一組座標即2個值，z表示路徑閉合，C（大寫）c（小寫）S（大寫）s（小寫）都是表明曲線繪製方法，C（大小寫）後面對應3組即6個值，S（大小寫）對應2組即4個值。爲了看起來不亂，我特地給每組座標畫了下劃線。另外AI直接生成的SVG的 <path>的d值寫法很不標準，它的原則是負數和負數之間不加逗號 ,隔開（狠狠吐槽），因此你看到數值中的那些短線好比0-77，不是區間，而是數字0和數字-77。
看到區別了吧？不能變形的山峯你會發現其d值最後是S不是C。對於這類變形動畫，瀏覽器可不會解讀C和S的區別，更況且對應的數組量不一樣，這就是沒有發生動畫的緣由。
做爲UI設計師的你，必定更迷糊了，這S怎麼生成，怎麼控制啊？我怎麼知道AI會導出什麼？祕密就是——
——
手柄！
沒錯，就是你用AI繪製曲線時離不開的好幫手。 當你使用錨點工具直接拖放同時操做兩個手柄，而後再也不單獨調整手柄時，導出d值中的就會有S。換句話說，一個錨點的兩個手柄對稱等長。具體的原理解釋出來又是一大堆，因此，爲了避免給本身添麻煩，建議變形時，除非你能確保同一個錨點都進行了這種同時拖放手柄的操做，不然一律動動其中一個手柄（放心，微調一下手柄幾乎徹底不影響你的圖形）。

3.最簡單的多邊形變形動畫

仍是從最簡單的三角形開始

好比我但願從三角形1→三角形2。此次我用了描邊，關於樣式屬性，放到CSS裏或者 <path>裏均可以。但對於這種多邊形來講，SVG對應的標籤不是 <path>，而是 <polygon>，一樣，沒有d值而是point。那怎麼套用呢？

方法1：改造point爲d。

很簡單，point對應值爲點的座標，咱們只須要給第一組值前面加上M，剩下的每組前面加L，最後z結束，就成功實現了point到d的轉化。舉例說明：
個人三角形1對應的代碼以下：

<polygon points="148,288 350,134 390,299 "/>複製代碼

那我要作的就是改爲

d:path('M148,188L350,134L390,299z')複製代碼

而後調用<path>標籤。
那試一下套用效果如何：

變化的三角形

改形成功！

方法2：改造原圖形

這個方法是我推薦的方法，我叫它視覺欺騙，哈哈。由於在AI裏，我只要用錨點工具那麼輕輕的拖一下，多邊形就變身普通形狀了。但從視覺上來看，它仍是一個三角形哦。

此時導出的就是 <path>而不是 <polygon>。因此，設計師小夥伴們感到本身的優越感了沒？用工具，咱們能夠賽過前端吶（某些方面~）。並且利用這個方法，你能夠打破多邊形與普通形狀之間的障礙，想怎麼變身就怎麼變身。
由於若是三角形之間的這種變換，你用CSS3的變形屬性旋轉rotate、扭曲skew、縮放scale也能實現。
但好比下面這種，只有路徑變形動畫才能實現：

從視覺上看就是（僞）三角形變成「巫師帽」了對不對？

4.進階1——任意形狀的變形動畫（本身變本身）

有了前面的基礎，就能夠玩點高級的玩意了。
下面這種：

我們先理一下思路，首先，錨點的數量不是問題，圓有4個，四葉草也是4個，但咱們知道圓形AI導出SVG的標籤是 <circle>，不要緊，用咱們的「做弊手段」。
此處提供一個已踩過的坑，若是是在標準圓形的基礎上不管怎麼調整，最後輸出的d值會有兩段曲線使用了絕對位置大C，而普通圖形只有最後一段曲線使用絕對位置，其他均爲相對位置小c，雖然這兩個能夠計算互相轉化，但畢竟也是麻煩的，獨家祕笈就是 用橢圓工具來繪製，而後寬和高能夠只差1px，最後視覺效果和標準圓形是無差的。而後再把橢圓的四個錨點都稍稍動一點手柄，此次我讓變化後的四葉草與原來的圓形位置拉開一點距離，而且定義了運動速率曲線爲ease（最經常使用的設置，儘可能不要用默認線性的勻速運動，太過生硬），即animation: deform ease 2s;就獲得了下面這種效果：

圓形變成四葉草

5.進階2——兩個不一樣圖形的變形動畫（圖形A變圖形B）

有了上面這個四個錨點變形的動畫，那下面這個理解起來就方便多了。

錨點數量不一樣

此次我不想在原有形狀上變化，而是想完成這樣一次變形，最大的問題出如今錨點數量不一樣上，怎麼辦？聰明的設計師小夥伴必定能夠想到，給錨點數量少的形狀用鋼筆工具添加錨點唄。（什麼？顏色太難看？這但是我特地找的日本傳統色的藤鼠和水淺蔥啊，身爲一名不合適的UI我會告訴你我根本不會配色嘛。）
除了改造左側的圖形，咱們還有一個工做，就是右邊這盆小花花，花莖（3-4和8-9）是標準垂直直線，導出的d值對應的是L開頭的一組數（至關於曲線繪製時沒有嚴格按照開始手柄控制點，結束手柄控制點，結束點來完成）。
看到這裏，可能會有設計師提出問題，我怎麼知道哪些須要改哪些不須要？並且哪些改過哪些沒改過？尤爲是有些微調，根本看不出來。好了，你能夠按照我下面這種方法來進行校驗。

d值對比分析

那堆數不用管，咱們只看開頭，對於兩個圖形來講，只要是M開頭，中間所有小c（咱們暫且稱之爲標準路徑繪製）且數量保持一致，最後大C和z結尾，就絕對能實現動畫效果。
我我的是很是建議在導出d值以後必定用這個方法先檢查一遍。
那出現問題後怎麼對症下藥呢？
但當錨點數量很龐大的時候，正解是：（由於小c是相對位置，不能直觀的看出對應的錨點） 先找到路徑的起點，即M對應的座標，而後根據第一組c值判斷路徑方向，每組開頭的字母+數字對應一段路徑，第幾組出錯就是該路徑的起點或終點手柄出現問題。而且解決方法簡化給爲非標準路徑（即不是小c開頭的路徑）兩側錨點都加上非對稱手柄。由於你可能會碰到各類你不瞭解的字母開頭的狀況，因此索性把解決方法統一塊兒來。
關於判斷路徑方向，由於咱們的例子恰巧我讓第一組出現問題，因此拿修改以後標準小c來講，咱們只看最後一組座標，0,-42.5，由於是相對位置，因此表示該錨點相對於起點M水平方向位移0，垂直方向位移-42.5（向上位移42.5），這樣就很容易判斷對應的是哪一個點，也就看出路徑方向了。
知道修改原則後，對設計師來講應該不是什麼難事。這裏設計師們不要感受很麻煩，畢竟，作變形動畫自己就是很費時間的一件事情，不是量產的工做類型，另外平時也不過是偶爾須要這種動畫。舉例說明，個人花花的d值是下面這種：

經過d值查找問題路徑

經過M值我找到了花朵形狀的路徑起點，而後根據d值，判斷出是第一段和第六段路徑出了問題，而且確認了路徑方向爲逆時針，開始數數，對應圖形上紅線標出的路徑。經過放大圖形，找到緣由，以路徑1爲例，錨點A和錨點B只有一側手柄，而後按咱們簡單粗暴的解決方法，給A和B都加上很短的另外一側手柄，同理修改路徑6，再導出d值看一下。

解決問題方法

完美！

別急，來看動畫效果：

花朵變形變色動畫

（此處還有一個坑，若是設計師發現沒有動畫效果，不不不，是畫面一片空白的時候，只須要把d值裏的空格去掉就能夠，這是語法問題，沒法解釋。）
喲喲，位置，顏色過渡什麼的都沒問題，可是，變形效果太過猛烈……中間那麼翻轉一會兒是鬧哪樣？
別急，全部的問題都是出如今d值上，咱們見招拆招。

判斷路徑方向

這裏我只放上一部分d值，先找到起點，而後經過第一組c的最末一對相對座標對應的錨點，獲得的信息是向左11.5，向下37.7，因此，這個圓的路徑方向是順時針。方向我用線連起來10段路徑對應的變化關係是下面這樣的：

路徑變化關係

縱橫交錯，真是頭大啊。
這種狀況只會出如今兩個無關聯的圖形的變形動畫，不會出如今由同一個圖形修改生成的第二個圖形（由於這種是變形動畫的初衷）的狀況，但咱們的目的偏偏就是想讓現有的任意圖形來完成動畫。
那如何應對出現這種兩個圖形路徑反向的狀況？
解決方法——路徑反轉
咱們AI裏有個神奇的功能，就是下面的反轉路徑方向。當你把路徑變成複合路徑（具體操做：對象-複合路徑-創建-反向），而後屬性面板裏就會出現可用的反轉路徑方向操做項

反轉路徑方向

只需那麼輕輕的一點，搞定，方便不？來，咱們經過真實數據來看一下是否是達到了目的。

上圖的形狀爲順時針路徑，下圖輕鬆變身逆時針路徑。再看下應用翻轉路徑後的d值的動畫效果。

順滑變形的花朵

關於路徑反轉，你仔細看下代碼會說，咦？怎麼起點也發生了變化？咱們下篇揭曉如何任意控制起點位置。

提早預告，在下篇裏，還將進階一個圖形如何變身兩個圖形，圖形多合一，以及鏤空圖形的變形動畫等。

向前端開發人員求JavaScript代碼，由於兩個任意圖形之間的動畫效果若是不去修改圖形中的錨點的手柄，只要保證錨點數量一致，是能夠經過js來把繪製貝塞爾曲線的S、L直線、V垂直直線、H水平直線、絕對位置大C等等通通轉換成相對位置小c，達到一統江湖的目的。由於我js只是渣渣入門，勉強能看懂基礎的，寫不來。但可提供轉換公式，有興趣的可留言。這樣藉助js的話，工做就簡化到只要「噠噠噠」給錨點數量少的圖形任意補充上錨點就能夠了。