以前玩 SVG 的時候，就一直在想能不能用路徑的方式，讓 CSS 動畫控制「非 SVG」的形狀，有一天我在麥塊裡面跑著直到膝蓋中了一箭，赫然發現好像可以誒！所以就用純 CSS 刻了相關的效果 ( 並不是這樣 )，但這個效果然仍有缺陷，就是節點太多仍然可能會失敗，至於什麼是節點，往下看就知道囉～

正文開始

通常製作 CSS 動畫時，都只是單純的位移、旋轉或放大縮小，但如果透過 path() 函式搭配 clip-path，就能展現更多 CSS 動畫的創意，這篇教學會介紹如何建立「可以製作動畫」的路徑，以及透過 clip-path 和 animation 製作不規則形狀動畫。

注意這張 banner 裡面黑板的圖，然後再看一下範例最後一張圖，猜猜看 AI 怎麼畫的～

如何繪製路徑？

在 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 動畫專用」的路徑，所謂動畫專用需要符合下列幾種條件：

• 節點數需要相同。
• 調整控制點數量需要相同。

舉例來說，下方是一個單純四邊形的路徑，以及一個單純圓形的路徑，由於四邊形的四個點沒有「貝茲曲線調整控制點」，因此路徑編碼和圓形的路徑編碼截然不同。

如果節點、調整控制點的數量不同，進行動畫 animation 或轉場 transition 效果時，由於 CSS 無法計算需要加入的補間值，就會發生「忽略補間值」，直接從開頭跳到結尾的現象，下方的例子會使用上述的四邊形和圓形路徑編碼，當滑鼠移動到四邊形上方時，可以發現完全沒有補間動畫效果，直接從正方形變成了圓形，原本設定的 transition: .5s 也由於沒有補間動畫，變成了延遲 0.5 秒。

線上展示：https://codepen.io/oxxo/pen/yyBKdqR

<!-- 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>

因此如果要做到具有補間動畫效果，就必須在向量繪圖軟體中，將正方形的四個節點修改成「有調整控制點」的路徑，且控制點的數量也需要和圓形相同，都是一個節點搭配兩個控制點。

特別注意，目前 clip-path 無法正確判斷「控制點」，因此如果要實現此效果，盡可能不要使用過多的控制點，或使用具有太大變化幅度的控制點。

完成後儲存成 SVG 並讀取原始碼取的路徑，替換正方形的路徑之後，就能產生漂亮的補間動畫效果，如果發生「位移較大」的狀況，通常是「起點位置」不同所導致，修改路徑起點就能解決這個狀況。

線上展示：https://codepen.io/oxxo/pen/ZYzxdjw

<!-- 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>

運用同樣的方式，在「固定節點與控制點」的前提下，將正方形改成愛心圖案，並記下愛心圖案的路徑編碼。

修改剛剛的程式碼，將圓形的路徑編碼換成愛心路徑編碼，執行後當滑鼠移動到四邊形上方時，就會看見變成愛心圖案的效果。

線上展示：https://codepen.io/oxxo/pen/JoPLQeo

<!-- 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 製作動畫，就能產生漂亮的不規則形狀動畫。

• 參考：CSS 動畫 animation、clip-path 使用 path 繪製不規則形狀
• 線上展示：https://codepen.io/oxxo/pen/QwLmXXV

<!-- 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 製作不規則形狀的程式碼其實相當簡單，最困難的其實是「繪製路徑」，除了要精準控制節點和控制點數量，如何繪製出漂亮的形狀以及掌握補間動畫效果才是重點，不過只要多次嘗試練習，就可以做出漂亮的不規則形狀效果囉。

• 原文參考：純 CSS 製作不規則形狀動畫
• 延伸閱讀：CSS 教學大全