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