上篇：juejin.im/post/591272…
中篇：juejin.im/post/591514…
在前面兩篇文章中，雖然完整描述了任意圖形的變形動畫實現方法，但最大的侷限性顯而易見，那就是都是一個圖形變形成另一個圖形，那如果是一變多或者多變一怎麼實現呢？下面就來解決這個問題。
8.不同數量之間圖形的變形動畫
以最簡單的例子來說明，我要做個一個水珠裂變成兩個水珠的動畫效果，裂變過程毫無疑問屬於圖形的變形過程。但是裂變之後分開成兩個的時候怎麼辦？這是我們首要解決的問題。先說一下各種實現思路，然後進行對比。
8.1 方法1——分割法（斷開路徑）
我們在前面說過用剪刀斷開錨點，使閉合路徑轉換成開放路徑，所以聰明的設計師小夥伴應該可以想到，既然可以斷開一個錨點，那就可以再斷開一個，讓一條路徑變成兩條路徑，兩條路徑分別實現自己的動畫效果，換句話說，就是半個小水珠變成一個小水珠的變形動畫，如下圖所示
剩下的工作就按部就班，給半水珠增加錨點，調整所有路徑的手柄，自己定義起點和路徑方向。
這裡需要注意一點，對於我們前面的起點和終點重合的開放路徑，錨點數=路徑數，但當水珠分割成兩條路徑後，由於起點與終點不重合，所以錨點數+1=路徑數，也就是說，我們要給半個小水珠的開放路徑多增加一個錨點，此外，對於這種起點終點不重合的開放路徑，AI匯出的SVG的d值是以小c結尾的，不同於起點終點重合的大C結尾，處理方法仍然很簡單，只需要斷開路徑的地方讓起點與終點錯開一點就可以了，視覺上是沒有影響的。下圖就是我處理的變形後的水珠的頂部。
同時我們動畫模板那裡要改一下，多增加一個變形動畫，並且兩個<path>各呼叫一個變形動畫，程式碼如下：
<svg>
<style>
@keyframes deform1{
0% {d:path('');} /*變形前左半個水滴的路徑*/
100% {d:path('');} /*變形後左邊水滴的路徑*/
}
@keyframes deform2{
0% {d:path('');} /*變形前右半個水滴的路徑*/
100% {d:path('');} /*變形後右邊水滴的路徑*/
}
#animate1 {animation: deform1 2s ease;}
#animate2 {animation: deform2 2s ease;}
</style>
<path id="animate1"/>
<path id="animate2"/>
</svg>複製程式碼那看一下這種實現思路得到的效果如何
雖然表面上看實現了1變2，但一分為二的過程極其生硬，主要原因是我們實現思路就是半個水滴到一個水滴，所以動畫過程完全復現了我們的思路。
8.2 方法2——重疊法（“一變一”+“一變一”）
上面方法實現的效果並不好，而且設想一下，這是變成2個，那如果是變成3個，4個呢，要把變形前的圖形切的稀碎麼……
既然我們前面兩篇都是一變一的實現方法，那麼我們不妨變通一下，比如變形前的水滴實際上有兩個完全重合的圖形，一個變成左邊的，一個變成右邊的。實現思路如下：
雖然兩個水滴是重合的，但是路徑方向那裡，向左變形和向右變形的原始路徑方向一定要是相反的，否則你將得到下面這種效果（你甭說，就這種誤打誤撞的錯誤效果，做個開啟的門啊，書啊的，居然還不錯）：
那即使是對稱變換，看下效果又如何呢：
看上去完全不像變形動畫對不對，明明是兩個位移動畫的拼接。而且改來改去的辣麼麻煩，早知道這種位移動畫，直接來個按X軸移動的動畫就好了。
先不要把這個方法一棍子打死，那是因為我們變形前後的圖形形狀沒有變化，才會產生位移效果，如果是做一個圓形變成兩個水滴，變形效果還是有的，如下：
而且變成3個甚至更多，也毫無違和感：
重疊法也是種“障眼法”，當你的形狀是實色填充時，OK，沒有問題，但當你填充的是半透明色或者是描邊呢，你將得到下面這種：
效果一點都不歡樂，直接暴露了我們妄圖掩蓋的事實真相。
當然了，方法2雖然不是最佳，但某些情景下也是適用的。
不過我們重磅推出的是下面這個方法。
8.3 方法3——拼接法（找到裂變的臨界點）
此方法堪稱方法1和方法2的結合，我們方法1是把原始形狀生生的切成兩半，那這個方法是我們找變形後圖形一分為二的那一瞬間，比如針對這個變形效果，就是兩個變形後水滴仍然相連的剎那，此時，仍然是一個圖形，動畫分解成兩個階段，第一階段，藕斷絲連，第二階段，快刀斬下。但在瞬間，運用了“障眼法”，來實現兩個過程的完美拼接。
那我們要做的，就是在AI裡用路徑查詢器，把臨界點的兩個形狀進行合併。我用圖示表示一下
2和3，看上去是完全一樣的，但放大來看，2是一個圖形但3是兩個圖形疊放在一起，第一階段就是1→2，這個我們很輕鬆就能實現，無非給1補充錨點，第二階段3→4，這個實現方法多樣，你用位移動畫也行，用變形動畫也行，利用2和3的完全一致性，把握好時間拼接點，無縫對接。
為了省事，位移的那裡我也直接用定義路徑變形動畫來實現，程式碼如下：
<svg>
<style>
@keyframes deform1{
0% {d:path('');} /*原始水滴*/
100% {d:path('');}/*臨界點水滴*/
}
@keyframes deform2{
0% {d:path('');} /*重疊效果的左邊水滴*/
100% {d:path('');} /*移動位置後的左邊水滴*/
}
@keyframes deform3{
0% {d:path('');} /*重疊效果的右邊水滴*/
100% {d:path('');} /*移動位置後的右邊水滴*/
}
#animate1 {animation: deform1 1.5s cubic-bezier(0.8, 0, 0.85,0.5);}
#animate2 {animation: deform2 0.5s cubic-bezier(0.15, 0.5, 0.2, 1) 1.5s;}
#animate3 {animation: deform3 0.5s cubic-bezier(0.15, 0.5, 0.2, 1) 1.5s;}
</style>
<path id="animate1"/>
<path id="animate2"/>
<path id="animate3"/>
</svg>複製程式碼 簡單解釋一下，2s的動畫效果我拆分成2部分，前一部分變形效果1.5s，第二部分位移0.5s，但要延遲1.5s後執行，以實現時間上的無縫對接。
修改運動速率，是因為ease表示慢-快-慢，如果拼接動畫都使用這個運動速率，整個流程下來就是慢-快-慢-慢-快-慢，在臨界點那裡會有明顯的停頓感，因此我修正了運動速率以消除停頓效果。本來用了預定義的值，變形動畫為ease-in（慢—快），而位移動畫為ease-out(快-慢)。但發現銜接部分仍然不夠順滑，索性自己重新寫了速率曲線，說著嚇人，方法掌握之後其實很簡單，正好借這個案例說一下：
首先我繪製了一個ease曲線，然後在中間位置一分為二，分別作為兩個動畫的速率曲線，cubic-bezier值對應的是控制曲率的手柄的兩組座標點（正常座標系且X和Y最大為1，非笛卡爾座標系），即我在圖中用紅點標出來的部分，然後就可以輕鬆的獲取座標值了。
來看下效果如何：
為了證明我們這個效果是有效的，我改成描邊效果，來看一下：
作為設計師的你，仍然會對這個效果不滿意，理由很簡單，我們都知道水的表面是有張力的，且是柔性的，這種動效則缺少一分為二的那種粘連感。
我們重新定義一下臨界點的形狀，在AI中操作起來極為便利，不過向兩側移動下左側和右側的錨點
得到這麼辣眼睛的效果純屬意外……
然後對這個形狀進行分割，什麼工具都可以，剪刀，刻刀，隨意，分割成兩個部分之後，再變形成最後的左右水滴，得到效果如下：
經過層層分析（分明就是我自己不停的掉坑裡，爬出來，繼續……），終於得到了理想的變形效果。
小總結，之所以沒有從一開始就直接來方法3，是因為方法3費時最長，其實我們需要的是越簡單的方法實現越理想的效果越好（拗口），所以在一些場景中，能用方法1和方法2（尤其方便）來實現實則再好不過。
對於方法3這種尋找臨界點的圖形，則更適合精細化製作。
小技巧：由於這類變形動畫涉及的形狀及位置比較多，為了方便自己檢視SVG程式碼，實際展現的色值資訊由於是定義在CSS樣式中，所以建議作圖時定義成方便識別的顏色，或者建在不同圖層上，（AI匯出的SVG會根據不同圖層進行分組）。
9.鏤空圖形的變形動畫
截止到這裡，我們已經可以實現無窮的變形效果了，裂變，組合，玩到嗨起來。但還有一種常見的圖形，需要單獨說一下實現變形動畫的方法，就是下面這種鏤空的圖形，這次的案例是從一把鑰匙變成一把鎖，只需要這一個案例做基礎，掌握方法之後，一通百通，原始圖片如下：
如果沒有鑰匙孔和鎖孔，這種變形動畫實現起來可謂簡單無比，但多了孔之後，貌似有點棘手，別急，先來看這種圖形（AI中需要合併形狀）d值的面目。由於案例圖形太過複雜，我們還是從最簡單的入手。
從d值中可以看出來，AI在匯出SVG時生成了兩個路徑，上面對應底層路徑，下面對應鏤空形狀的路徑，這不就是AI裡減去底層形狀的意思嘛，SVG對於這種包含多個路徑的形狀自動解讀成第一個路徑為底層形狀，其他形狀都執行減去底層形狀的操作。瞭解規則後，再來完成這種有鏤空圖形的變形動畫自然水到渠成。
對圖形的改造套用我們最基礎的動畫模板，然後把含有兩個路徑的d值對應填進去，會得到下面這種效果：
從最終效果中能明顯看出來，鏤空部分和底圖部分分別執行了兩個變形動畫。那最大的問題也在這裡。變形動畫的過程中填充色會超出正常的變形區域。那如何來改善呢？
10.使用變形蒙版的變形動畫
這裡借用以前提到的蒙版來試一下。
UI設計師對於蒙版絲毫不陌生，SVG蒙版的原理是一樣的，鏤空部分我用黑色蒙版來處理，達到同樣的效果。
思路如下：動畫拆解成兩部分，一部分是無鏤空部分的圖形的變形動畫，另一部分我把變形動畫附加給蒙版黑色部分，即我們要鏤空的區域。
與上面簡單的利用d值裡包含的兩個路徑對應變形到另外兩個路徑不同，我們把鏤空部分單獨用一個蒙版變形動畫來實現，首先，根據蒙版的原理，絕對不會有填充色超出變形區域的情況，其次，這樣賦予了這類變形動畫更多的自由度，比如可以設定不同的時間和動效等等。
我把程式碼和註釋貼上來簡單解釋一下：
<svg>
<style>
@keyframes deform1{
0% {d:path('');}/*變形前底圖*/
100% {d:path('');}/*變形後底圖*/
}
@keyframes deform2{
0% {d:path('');}/*變形前蒙版黑色部分*/
100% {d:path('');/*變形後蒙版黑色部分*/
}
}
#animate1 {animation: deform1 3s ease;}/*
底圖變形動畫*/
#animate2 {animation: deform2 3s ease ;fill:#000000;}/*
蒙版黑色區域變形動畫*/
</style>
<mask id="hollow"><rect x="0" y="0" fill="#ffffff" width="" height=""/><path id="animate2" /></mask><!--定義一個白色矩形為底，黑色為變形動畫的蒙版hollow-->
<path id="animate1" mask="url(#hollow)"/><!--底圖變形動畫上附加一個蒙版變形動畫-->
</svg>複製程式碼看到這裡，沒有任何SVG蒙版基礎的UI設計師或許會有些發憷，但還是希望瞭解一下，因為蒙版動畫很強大，後面會開單獨的專題。
來看一下利用蒙版變形結合底圖變形的動畫效果如何：
很明顯的，不會出現填充色超出區域的問題，我取兩個不同實現方法動畫的同步一幀對比如下：
前面提到過，把蒙版動畫單獨定義自由度更高，比如，我再給蒙版變形動畫增加一個50%的關鍵幀，然後縮小成極小的一個點，動畫效果就變成了下面這種：
似乎更改進了一些。
對比得出的結論是蒙版變形來實現更優化，但實際使用時，儘量採用兩個路徑同步變形這種，為什麼？簡單吶，先看效果，不滿意再採用蒙版變形動畫。
12.路徑曲線值的轉換
我們對圖形的操作一直說的都是錨點手柄部分處理，一直想避開這部分，主要是考慮到UI設計師畢竟對AI軟體更熟悉，操作起來更方便，而是我在做案例的實際操作過程中，發現對於錨點較少的情況還好，找對應路徑也能順利找到，而在我上面鑰匙和鎖變形動畫中（20個錨點），即使通過d值看出來有些曲線時非小c開頭的，但數起來真的很困難，所以額外增加這一部分，可以直接通過修改d值實現同一成小c曲線轉換的方法。只說方法，不說原理哦。
12.1小s→小c
先說最容易出現的小s，看過上篇的設計師們已經知道產生小s的方法是因為轉換點直接拖拽，而且s後面只有四個值，轉化方法如下：
sA,B,C,D←→c前一組倒數第二個數減去倒數第四個數,前一組倒數第一個數減去前一組倒數第三個數,A,B,C,D
啊啊啊，頭暈了對不對，這還是僅限於前面是正常一組小c開頭的曲線的轉換公式，所以除非你只有極個別小s出現，否則多算傷身啊。
12.2小l→小c
設計師小夥伴們一定擦亮眼睛，因為小l與數字1太像，但只要記得我們的d值只支援一位小數，而出現類似3.51這樣的資料時，那一定是3.5和小l。小l是繪製直線的命令，後面只有兩個值，轉換方法如下：
lA,B←→c0,0,A,B,A,B
前面補兩個0，後面複製一組小l後面的兩個值。
小l和小s最常見，下面這兩個則出現的情況少一些，一點出現，建議改一下圖形，為何，來看轉化方法。
12.3小h→小c
h為水平直線繪製命令，後面只有一個值，轉換方法如下：
hA←→c0,0,A,前一組路徑曲線小c的最後一個值,A,前一組路徑曲線小c的最後一個值
12.4小v→小c
v為垂直直線繪製命令，同上同理，轉換方法如下：
vA←→c0,0,前一組路徑曲線小c的倒數第二個值,A,前一組路徑曲線小c的倒數第二個值,A
看，誠不欺你，所以為了不給自己製造困難，稍微挪挪錨點，不要那麼水平垂直的直來直去嘛。
還有出現的情況是絕對定位大寫字母開頭的，這個轉換起來，嘖嘖，反正不借助工具，我是不能接受手動計算的。
就醬。
藉助公式，順便做個動畫效果看看。
想做個拔地而起的小蘑菇，我只需要AI匯出的SVG裡對應的蘑菇的d值就可以了，直線呢？有了上面的公式，我來手動改造，連錨點都懶得在AI里加了，反正也不會匯出我們需要的d值，還要一通調整，太麻煩。那怎麼改呢？先數數，蘑菇一共6段曲線組成，好了，我只需要知道直線路徑的起點座標，我的是（60,490），那我通過手動，把直線的d值改造成下面這種：
d:path('M60,490,c0,0,50,0,50,0,c0,0,100,0,100,0,c0,0,50,0,50,0,c0,0,50,0,50,0,c0,0,50,0,50,0,c0,0,50,0,50,0')複製程式碼這就是相對座標的好處，c0,0,50,0,50,0,表示一根水平的寬度50的直線，對應蘑菇的6段曲線，重複6次就OK了。
雖說一副軟趴趴的樣子，但好歹站起來了。
原來這種調整方法也蠻好用嘛，媽媽再也不用擔心我調整手柄拖拽到吐血了。
13.關於新增虛擬曲線
再來一根直線變飛鳥與魚的，哦，不是飛鳥，是肥鳥。把前面的知識點藉機再嘮叨一遍。順便帶出來壓箱底的技能，虛擬曲線。先賣個關子。
看到這三者之間的變化，心裡先抖一抖，每個形狀都不同。先來最複雜的吧，肥鳥先斷開閉合路徑，然後起點終點錯開，以便生成小c結尾的相對座標繪製的曲線。魚原來只有4段曲線，肥鳥有9段，按理說應該噠噠噠給魚補上錨點，停停停，就是這裡。現在插播一個重磅武器，虛擬曲線c0,0,0,0,0,0。虛擬曲線是我給它的命名（怎麼，不可嘛），這貨實際是不存在的，它存在的價值，聰明的設計師小夥伴一定可以猜出來，就是來補充缺失的曲線的。而且相當具有跟隨性，你把它放在哪裡，它就是前面曲線的終點。
這個例子中，魚有4段曲線，好了，我們的虛擬曲線該上場了，所以我把直線裡面塞進3三段虛擬曲線即增加3個c0,0,0,0,0,0，d值變成了下面這個樣子：
d:path('M40,130,c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,280,0,280');複製程式碼其實這個效果和
d:path('M40,130,c0,0,0,280,0,280');複製程式碼是一樣的，我們只是在欺騙瀏覽器，製造一些不存在的曲線以便彌補變形前後圖形曲線數量的不同。
動畫可以拆成兩部分，銜接起來，也可以像我這樣在一個動畫裡完成，由於最終小胖鳥的曲線數量最多，多以最終我給直線補充了8段虛擬曲線，給小魚補充了5段（全部放到魚嘴的位置），然後看一下效果
是不是感覺太簡單了，而且很憤怒的指出來，為什麼到最後才說這種簡單好用的方法？！勿燥，理由很簡單，加錨點是為了讓變形的過程變得均勻。比如我的小鳥變成魚，如果是通過分散新增錨點來實現，效果是下面這樣的：
所以，即使你用這種偷懶的方法，如果不是為了某種特殊效果，也最好把c0,0,0,0,0,0散佈開，穿插在其他曲線之間。但有時候，你可以利用這種虛擬曲線隨心所欲的實現希望達到的效果。剛才做的拔地而起的蘑菇，我們說它軟趴趴，是因為直線被均勻分割成6段寬50的直線，每個直線對應向組成蘑菇的曲線變換。那怎麼才能讓變形效果變得“剛硬”起來，比如從中心點拔地而起。這時，要換種思路對直線進行改造。
既然需要中心點，那麼第一步，從中間一分為二是少不了的，相當於從起點開始，有2條寬150的水平直線，此時直線的d值如下：
d:path('M60,490c0,0,150,0,150,0c0,0,150,0,150,0')複製程式碼然後把需要增加的4條虛擬曲線塞進去，位置就是中心點，也就是第一段路徑後面。
d:path('M60,490c0,0,150,0,150,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,150,0,150,0')複製程式碼好了，看看是不是從中心點長出的蘑菇：
看這硬朗的變形效果，完美！
14.利用路徑變形動畫實現“描邊”動畫
svg描邊動畫效果在別的文章裡介紹過，利用路徑變形動畫依舊可以完成，只不過這只是種“偽描邊”，更像是從某個點輻射出去的效果，看一下下面這個動畫：
這就是我用變形動畫實現的。
邊看圖邊說，既然我們說過可以新增虛擬曲線，那麼再延伸一下，當一段路徑只有起點M值，剩下全是c0,0,0,0,0,0組成，那麼不管有多少段虛擬曲線，實際這只是一個虛擬點，但這個點看不見，卻是有座標的，座標就是M值。
所以我們這個動畫製作過程就簡單多了，主要獲取我圖中紅圈圈出的四個點的座標就可以了。我實際繪圖的顏色是左上角那個“絕美”的配色，理由很簡單，為了方便自己區分啊，左邊葉子色值#FF0000，中間花莖#00FF00，右邊葉子#0000FF，只看FF值就可以輕鬆分辨出對應的路徑了。
比如我們左邊葉子的綻放點座標值為(X1,Y1)，葉子有2段曲線路徑，那變形前的虛擬點d值對應為MX1,Y1c0,0,0,0,0,0c0,0,0,0,0,0，就能輕鬆實現變形效果了。
程式碼的簡化版即註釋如下：
<svg>
<style>
@keyframes deform1{
0% {d:path('');} /*花莖變形前虛擬點*/
100% {d:path('');}/*花莖曲線路徑*/
}
@keyframes deform2{
0% {d:path('');}/*左邊葉子變形前虛擬點*/
100% {d:path('');}/*左邊葉子曲線路徑*/
}
@keyframes deform3{
0% {d:path('');}/*右邊葉子變形前虛擬點*/
100% {d:path('');}/*右邊葉子曲線路徑*/
}
@keyframes deform4{
0% {d:path('');}/*花朵變形前虛擬點*/
100% {d:path('');}/*花朵曲線路徑*/
}
#animate1 {animation: deform1 1s ease forwards;}/*長出花莖時間1s，forwards表示動畫狀態停留在結束狀態*/
#animate2 {animation: deform2 1s ease 1s forwards;}/*長出左邊葉子時間1s，延遲1s（即花莖動畫時間）開始*/
#animate3 {animation: deform3 1s ease 2s forwards;}/*長出右邊葉子時間1s，延遲2s（即花莖+左邊葉子動畫時間）開始*/
#animate4 {animation: deform4 1s ease 3s forwards;}/*開花時間1s，延遲3s（即花莖+左邊+右邊葉子動畫時間）開始*/
</style>
<path id="animate1"/>
<path id="animate2"/>
<path id="animate3"/>
<path id="animate4"/>
</svg>複製程式碼這裡再提供一個轉換方法，就是關於絕對位置大C繪製路徑。如果你匯出的d值中有大C開頭的曲線，關於這種通過虛擬點變形的話，就沒有必要再去調整路徑了。
c0,0,0,0,0,0等同於CX1,Y1,X1,Y1,X1,Y1。X1和Y1就是你的起始點M值的座標。關於SVG路徑path的貝塞爾曲線繪製方法的介紹網上很多，耐心看一遍就知道轉換的原因了。
實際使用過程中，一定要把握的思路是儘量用最簡單的方法來實現動效，已經開始著手準備寫一篇SVG微動效的文章，畢竟SVG結合CSS3實現的動畫不可與真正的動畫製作軟體同日而語，應用最多的場景，應該是一些微動效。
這篇作為變形動畫的進階篇，涉及的知識點比較雜，包括拼接動畫臨界點的定義及自定義速率曲線實現無縫拼接的方法，結合蒙版變形動畫實現變形動畫，非小c開頭的路徑曲線的轉化，新增虛擬曲線。
變形動畫全篇終。有問題單獨留言。