SVG 變形動畫
這陣子因為參加六角學院舉辦的 2023 F2E 活動有導入 SVG 效果，
故此篇簡單紀錄一下心得。我不知道該分類到哪裡，但現階段我應該不會有長時間研究 SVG 的機會，所以先放在此分類。
免費工具
網路上應該都能看到一些教學文章分享到 SVGator 這套工具，
它是一個免費的線上編輯工具，能夠輸出 SVG 動畫導入到網頁使用，
不過...只有位移、旋轉、縮放這三個動畫效果是免費的，如果是需要簡單的效果，
是可以直接用它做出來。
變形原理
在我興高采烈地設定好關鍵影格做變形後，輸出時發現變形效果 是要錢的，就瞬間絕望了（？
天無絕人之路，嘗試用英文下了關鍵字後，第一篇就是我想要的簡單明瞭懶人包。
SVG 有一個強大的標籤叫做 animate，裡面的屬性和 CSS 動畫類似，
可以控制動畫的時間、次數、時間曲線等等，最重要的是 values 這個屬性！
觀察上面的範例可以發現，values 是長長一串天文數字，
其實這些數字代表每個形變的關鍵影格！
一般不規則的 SVG 圖型會透過 path 這個標籤來定義形狀，
path 標籤裡面會有一個 d 值， 它就是用來描述 path 上每個錨點的位置、曲線變化，
animate 標籤正是透過這個 d 值的變化產生動畫！
編輯 SVG
這時我們只需要任何能編輯 SVG 的工具，常見的以拉、GIMP 就可以了， 或是線上編輯器。
把想要變形的 SVG 圖檔載入，對其拉伸變成想要的形狀再輸出，
就可以得到新的 SVG 檔，我們要擷取裡面 path 的 d 值，
要注意產生新圖案時不能更改錨點的數量！！
因為 SVG 的 animate 主要是依靠錨點對錨點的計算進行自動補間動畫。
組合形狀
回顧剛剛的範例，values 中長長一串的數字，其實是 7 個形狀的 d 值，
放入 values 時要用分號隔開，再來就是見證奇蹟的時候。
要注意的是，如果是想要做循環動畫，第一組 d 與最後一組 d 必須要一樣，
這樣循環銜接才不會有跳轉！
剩下的就比較依賴個人 sense 與影格動畫的熟悉度，慢慢微調出想要的 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