SVG 變形動畫

這陣子因為參加六角學院舉辦的 2023 F2E 活動有導入 SVG 效果，所以簡單紀錄一下心得！

免費工具

網路上應該都能看到一些教學文章分享到 SVGator 這套工具，它是一個免費的線上編輯工具，能夠輸出 SVG 動畫導入到網頁使用。

不過…只有位移、旋轉、縮放這三個動畫效果是免費的，如果需要簡單的效果可以直接用它做出來。

變形原理

在我興高采烈地設定好關鍵影格後，輸出時發現變形效果是要錢的，就瞬間絕望了 QQ

不過嘗試用英文搜尋後，第一篇就是我想要的簡單明瞭懶人包！

SVG 有一個強大的標籤叫做 <animate>，裡面可以設定的屬性和 CSS 動畫類似，可以控制動畫的時間、次數、時間函式等等，最重要的是 values 這個屬性。



觀察上面的範例可以發現，values 是長長一串天文數字，中間其實有分號 ; 隔開每一組數字，一組代表一個關鍵影格。

一般不規則的 SVG 圖型會透過 <path> 這個標籤來定義形狀，<path> 標籤裡面會有一個 d="" 的數值， 它ß是用來描述 <path> 上每個錨點的位置、曲度變化等等，
<animate> 正是透過這個 d 值的變化產生動畫！

編輯 SVG

這時我們只需要任何能編輯 SVG 的工具，例如 Ai、GIMP，或是其他線上編輯器。

匯入 SVG 圖檔後拉伸出想要的形狀再輸出，就可以得到新的 SVG 檔，我們要擷取裡面 <path> 的 d 值。

警告

產生新圖檔時不能更改錨點的數量！因為 <animate> 主要是靠錨點對錨點的計算，進行關鍵影格的補間動畫。

組合形狀

回顧剛剛的範例，values 中的天文數字，其實是 7 個形狀的 d 值，依序放入 values 時要用分號 ; 隔開，再來就是見證奇蹟的時刻。

資訊

如果是想做循環動畫，第一組的 d 值必須與最後一組的 d 值必一樣，這樣動畫的銜接才不會有瞬間跳轉的抖動感！

剩下的就比較憑個人感覺與動畫的熟悉度，慢慢微調出想要的形狀變化。

天文數字：

1.
M222,7.8C301.6-1.6,403.6-14.8,449.3,51c45.6,65.6-20.4,149.4-39.5,226.9c-12.1,49.2-15.8,100.2-50.3,137.3c-35.8,38.6-84.8,64-137.5,64.7c-53.3,0.7-102-24.9-141.2-61C39.7,381.1,9.2,333.4,2.6,278c-7.5-63.1,0.1-129.7,40.2-179C86.7,44.9,152.8,16,222,7.8z;

2.
M244.9,102.8c79.6-9.4,122.9-30,159.9,14.9c32.9,39.9,40.7,100.1,3.9,142.4c-64.9,74.8-10.2,126-50.9,151.8c-44.4,28.2-88.2-12.4-140.9-11.7c-53.3,0.7-18-58.7-68.9-90c-41.1-37.9-101.7,3.9-108-51.7c-13.3-118.2,23.6-145.2,61-124.4
C164.5,169.3,175.7,111,244.9,102.8z;

3.
M315.5,62.9c79.6-9.4,53.8,63.9,90.8,108.8c32.9,39.9,11.7,97,16.6,147.1c8.3,86.6-28.1,113.8-76,119c-47,5.1-78-70.4-130.7-69.7c-53.3,0.7-90-13.3-140.9-44.6c-41.1-37.9-14.3-81.1-15.7-137C57.2,87.2,89.4,69.5,130,55.9C239.6,19.1,242,100.5,315.5,62.9z;

4.
M260,87c79.6-9.4,84,53.1,121,98c32.9,39.9,8.9,52.4-13,104c-13.7,32.3,3,76-31,93c-47,23.5-70.3-33.7-123-33c-53.3,0.7-81.1,45.3-132,14c-41.1-37.9,8.1-65.6-8-119.2C48.6,159.2,63.1,111.1,142,110C237.7,108.7,190.8,95.2,260,87z;

5.
M256,66c46-15,58,39.1,95,84c32.9,39.9,59,63.4,44.5,95.9C381.1,277.9,359,267,325,284c-47,23.5-24.3,70.3-77,71c-53.3,0.7-21-27-91-19c-55.5,6.3-26-49.8-66-91c-61.6-63.4-2.9-103.9,76-105C262.7,138.7,213.3,79.9,256,66z;

6.
M315.5,62.9c79.6-9.4,53.8,63.9,90.8,108.8c32.9,39.9,11.7,97,16.6,147.1c8.3,86.6-28.1,113.8-76,119c-47,5.1-78-70.4-130.7-69.7c-53.3,0.7-90-13.3-140.9-44.6c-41.1-37.9-14.3-81.1-15.7-137C57.2,87.2,89.4,69.5,130,55.9C239.6,19.1,242,100.5,315.5,62.9z;

7.
M222,7.8C301.6-1.6,403.6-14.8,449.3,51c45.6,65.6-20.4,149.4-39.5,226.9c-12.1,49.2-15.8,100.2-50.3,137.3c-35.8,38.6-84.8,64-137.5,64.7c-53.3,0.7-102-24.9-141.2-61C39.7,381.1,9.2,333.4,2.6,278c-7.5-63.1,0.1-129.7,40.2-179
	C86.7,44.9,152.8,16,222,7.8z

參考資料