純 CSS 製作不規則形狀動畫
通常製作 CSS 動畫時，都只是單純的位移、旋轉或放大縮小，但如果透過 path() 函式搭配 clip-path，就能展現更多 CSS 動畫的創意，這篇教學會介紹如何建立「可以製作動畫」的路徑，以及透過 clip-path 和 animation 製作不規則形狀動畫。
快速導覽：
如何繪製路徑？
在 CSS 中使用的路徑，基本上和 SVG 的路徑相同，差別只在於 SVG 多了許多填色、粗細、視圖等圖形專用的屬性，但對於 CSS 而言，只需要有「路徑」的編碼，就可以開心的透過路徑創造出各種效果，通常要繪製路徑，通常都會使用 Adobe Illustrator 等向量繪圖軟體繪製，幾乎不會有人透過撰寫程式碼繪製 ( 參考「認識路徑 path 」)，如果手邊沒有 Adobe Illustrator，也可以透過免費的線上向量繪圖工具 Vectorpea 繪製，從下方的連結開啟 Vectorpea。
開啟 Vectorpea：https://www.vectorpea.com/
啟 Vectorpea 之後，點擊「新增專案」，建立一個尺寸為 300x300 的空白檔案，尺寸可以按照個人需求調整，不過因為是網頁動畫圖片，建議不需要太大尺寸 ( 使用 Illustrator 也是同樣做法 )。
使用左側「鋼筆 Pen」工具，在畫布中點擊繪製路徑，單純點擊可以產生直線 ( 使用 Illustrator 也是同樣做法 )。
如果點擊時壓著滑鼠不放，就可以繪製貝茲曲線 ( 使用 Illustrator 也是同樣做法 )。
編輯路徑後，用滑鼠拖拉節點調整鈕就能調整貝茲曲線形狀，連續點擊節點就能變成「尖角」或「圓角」。
繪製完成後，從左上選單 File 裡選擇「Export as > SVG」，將檔案輸出為 SVG 格式 ( 勾選 minify )。
使用瀏覽器打開 SVG 觀察原始碼，就可以看見 SVG 的 path 元素，當中的 d 參數就是路徑，進行到這個步驟後就已經完成了路徑繪製。
製作 CSS 動畫專用的路徑
知道如何繪製路徑之後，接著要繪製「CSS 動畫專用」的路徑，所謂動畫專用需要符合下列幾種條件：
- 節點數需要相同。
- 調整控制點數量需要相同。
舉例來說，下方是一個單純四邊形的路徑，以及一個單純圓形的路徑，由於四邊形的四個點沒有「貝茲曲線調整控制點」，因此路徑編碼和圓形的路徑編碼截然不同。
如果節點、調整控制點的數量不同，進行動畫 animatino 或轉場 transition 效果時，由於 CSS 無法計算需要加入的補間值，就會發生「忽略補間值」，直接從開頭跳到結尾的現象，下方的例子會使用上述的四邊形和圓形路徑編碼，當滑鼠移動到四邊形上方時，可以發現完全沒有補間動畫效果，直接從正方形變成了圓形，原本設定的 transition: .5s 也由於沒有補間動畫，變成了延遲 0.5 秒。
<!-- HTML 程式碼 -->
<div></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
background: orange;
transition: .5s;
clip-path: path("m173 24v147h-147v-147z");
}
div:hover {
clip-path: path("m99.5 178c-43.4 0-78.5-35.1-78.5-78.5 0-43.4 35.1-78.5 78.5-78.5 43.4 0 78.5 35.1 78.5 78.5 0 43.4-35.1 78.5-78.5 78.5z");
}
</style>
因此如果要做到具有補間動畫效果，就必須在向量繪圖軟體中，將正方形的四個節點修改成「有調整控制點」的路徑，且控制點的數量也需要和圓形相同，都是一個節點搭配兩個控制點。
完成後儲存成 SVG 並讀取原始碼取的路徑，替換正方形的路徑之後，就能產生漂亮的補間動畫效果，如果發生「位移較大」的狀況，通常是「起點位置」不同所導致，修改路徑起點就能解決這個狀況。
<!-- HTML 程式碼 -->
<div></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
background: orange;
transition: .5s;
clip-path: path("m26 173c0-52.1 0.1-104.5 0.1-147 39.7 0 117 0.1 147 0.1 0 40.9-0.1 114.7-0.1 147-30 0-117-0.1-147-0.1z");
}
div:hover {
clip-path: path("m99.5 178c-43.4 0-78.5-35.1-78.5-78.5 0-43.4 35.1-78.5 78.5-78.5 43.4 0 78.5 35.1 78.5 78.5 0 43.4-35.1 78.5-78.5 78.5z");
}
</style>
運用同樣的方式，在「固定節點與控制點」的前提下，將正方形改成愛心圖案，並記下愛心圖案的路徑編碼。
修改剛剛的程式碼，將圓形的路徑編碼換成愛心路徑編碼，執行後當滑鼠移動到四邊形上方時，就會看見變成愛心圖案的效果。
<!-- HTML 程式碼 -->
<div></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 200px;
height: 200px;
background: orange;
transition: .5s;
clip-path: path("m26 173c0-52.1 0.1-104.5 0.1-147 39.7 0 117 0.1 147 0.1 0 40.9-0.1 114.7-0.1 147-30 0-117-0.1-147-0.1z");
}
div:hover {
clip-path: path("m101 171.2c-79.9-14.5-97-110.2-72.9-125.5 30.2-19.3 57.7-8.2 72.9 23 18.9-32 42.4-55 74.8-25.8 20.2 18.1 0.4 100-74.8 128.3z");
}
</style>
製作不規則形狀動畫
了解繪製 CSS 動畫路徑的原理之後，就可以開始著手製作「不規則形狀動畫」，首先繪製一個圓形，接著在圓形的邊緣上新增一些節點 ( 根據個人喜好新增 )，將圓形另存為 SVG 產生路徑編碼後，利用「節點調整」工具調整節點位置，使其變成另外一個形狀，依此類推產生兩個形狀，並都另存為 SVG 產生路徑編碼。
三個圖形的路徑編碼完成後，使用下方範例，利用 CSS animation 製作動畫，就能產生漂亮的不規則形狀動畫。
<!-- HTML 程式碼 -->
<div></div>
<!-- CSS 程式碼 -->
<style>
div {
background: orange;
width: 200px;
height: 200px;
animation: oxxo 2s infinite;
}
@keyframes oxxo {
0% {clip-path: path("m100 178c-18 0-34.6-6.1-47.8-16.3-10.8-8.4-19.4-19.6-24.6-32.5-3.6-9-5.6-18.9-5.6-29.2 0-14.3 3.8-27.7 10.6-39.3 7.3-12.5 18-22.8 30.9-29.7 10.9-5.7 23.3-9 36.5-9 17.9 0 34.5 6 47.6 16.2 10.7 8.2 19.2 19.2 24.4 31.8 3.9 9.2 6 19.4 6 30 0 14.4-3.9 28-10.7 39.6-6.8 11.4-16.3 20.9-27.7 27.7-11.6 6.8-25.2 10.7-39.6 10.7z");}
25% {clip-path: path("m96.7 113.1c-18 0-31.3 58.8-44.5 48.6-10.8-8.4 30.1-41.4 24.9-54.3-3.6-9.1-55.1 2.9-55.1-7.4 0-14.3 49.6-0.4 56.3-12 7.3-12.5-27.7-50.1-14.8-57 10.9-5.7 23.3 54.3 36.5 54.3 17.9 0 34.5-57.3 47.6-47.1 10.7 8.2-35.5 40.3-30.2 53 3.8 9.2 60.6-1.8 60.6 8.8 0 14.4-59.1-5.4-65.9 6.2-6.8 11.4 38.9 54.3 27.5 61.1-11.6 6.8-28.5-54.2-42.9-54.2z");}
50% {clip-path: path("m100 178c-18 0 6.2-50.2-7-60.5-10.8-8.4-60.2 24.6-65.4 11.7-3.6-9 52.1-22.1 52.1-32.4 0-14.3-53.9-24.5-47.1-36.1 7.3-12.5 41.4 21.2 54.3 14.4 10.8-5.8-0.1-53.1 13.1-53.1 17.9 0 1.9 39.1 15 49.2 10.7 8.3 51.8-13.8 57-1.2 3.9 9.2-47.8 15.2-47.8 25.8 0 14.5 49.9 32.2 43.1 43.8-6.8 11.4-41.4-28.3-52.9-21.6-11.6 6.8 0 60-14.4 60z");}
75% {clip-path: path("m96.7 113.1c-18 0-31.3 58.8-44.5 48.6-10.8-8.4 30.1-41.4 24.9-54.3-3.6-9.1-55.1 2.9-55.1-7.4 0-14.3 49.6-0.4 56.3-12 7.3-12.5-27.7-50.1-14.8-57 10.9-5.7 23.3 54.3 36.5 54.3 17.9 0 34.5-57.3 47.6-47.1 10.7 8.2-35.5 40.3-30.2 53 3.8 9.2 60.6-1.8 60.6 8.8 0 14.4-59.1-5.4-65.9 6.2-6.8 11.4 38.9 54.3 27.5 61.1-11.6 6.8-28.5-54.2-42.9-54.2z");}
100% {clip-path: path("m100 178c-18 0-34.6-6.1-47.8-16.3-10.8-8.4-19.4-19.6-24.6-32.5-3.6-9-5.6-18.9-5.6-29.2 0-14.3 3.8-27.7 10.6-39.3 7.3-12.5 18-22.8 30.9-29.7 10.9-5.7 23.3-9 36.5-9 17.9 0 34.5 6 47.6 16.2 10.7 8.2 19.2 19.2 24.4 31.8 3.9 9.2 6 19.4 6 30 0 14.4-3.9 28-10.7 39.6-6.8 11.4-16.3 20.9-27.7 27.7-11.6 6.8-25.2 10.7-39.6 10.7z");}
}
</style>
小結
透過 CSS 製作不規則形狀的程式碼其實相當簡單，最困難的其實是「繪製路徑」，除了要精準控制節點和控制點數量，如何繪製出漂亮的形狀以及掌握補間動畫效果才是重點，不過只要多次嘗試練習，就可以做出漂亮的不規則形狀效果囉。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～