沒想到就這麼簡單？ 用 illustrator 來畫網頁 SVG 動畫吧！

想要做更進一步的網頁動畫，不一定只有 Animate.css ，或者一些需要 js 運算的動態效果。如果你想做的是線條類特效的話，那這一篇你或許就可以參考看看！

要做線性特效之前，會先需要將形狀繪畫出來，那你可能會想到用 canvas 或 svg 來做。而有個辦法可以讓我們將圖形「畫」出來，再轉存為 svg ，就可以省下 coding 的時間來細條特效了！ 此篇需要的兩種工具只有下列兩種：illustrator 跟 CSS 。準備好一起開始玩吧！關於 svg 的相關資訊，可以參考 MDN 填充與框邊。

Step 01. 用 illustrator 繪製形狀

首先，打開 Illustrator ， 設定大小後開始畫吧。我們以圓形與叉叉當作範例。一個是形狀畫的，另一個是使用鋼筆工具。

Step 02. 存擋為 .svg

畫好之後，點選「檔案 > 存擋 > 轉存為...」，在這邊就可以將繪製好的圖，轉存為 svg 唷！

點選轉存後，會跳出個視窗可以讓我們直接獲得程式碼，點選下圖框框的地方，把程式碼複製後貼到你習慣用的編輯器吧！

Step.03 貼上並整理 code

將這一組程式碼，貼到你要放置的html位置。我們將code整理一下，移除不需要的部分後，設定一些基本的class與樣式。

然後打開網頁後，你就會看到靜態的圖形基本已經完成了！

Step.04 利用 css animation 賦予生命

圖形準備好了，接下來就可以來利用 css 跟 animation 來讓線條動起來。主要會使用到下列兩種svg屬性：60只是範例數字，可以自己設看看不同數字會有什麼不同的效果。

// 設置 stroke 為虛線，60 為虛線長度
stroke-dasharray: 60;
// 推移虛線位置
stroke-dashoffset: 60;

套用到範例圖，圖形的框線就出現了變化。我們要利用虛線長度與推移的位置，再套用 animation 與 delay， 就可以客制你的圖形特效了唷！

我們分別在圓形與叉叉設定虛線長度與推移位置。目前虛線設置的數值已經大於圖形的長度，這時在推移設上相同數字，一開始就會推移所以圖形是看不到線的。這邊設 600 主要是以圓周長來計算，調整後大約在 600 時就能將圖形整個推移消失。若是你想要逆時鐘的話，請試看看用負數，不過要記得看看不同瀏覽器有沒有問題唷！

// 圓形
.svg-circle {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
// 叉叉
.svg-line-01,
.svg-line-02 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

在設定 animation 時，也可以各別設定 delay 的時間來做出連貫的線性特效唷！

.animated {
  animation: drawing-svg 5s infinite;
  // animation-delay: 2s;
}

@keyframes drawing-svg {
  100% {
    stroke-dashoffset: 0;
  }
}

OK~做到這裡就可以在網頁上看看效果了，下圖就是此次範例呈現的效果！

結論

你可以試著用這樣的方式，來繪製線性的特效，畢竟動態效果最花時間的是對位置與時機，省下 coding 來繪製這些圖形的時間，想必是一個不錯的選擇！

在這個方式中，最不熟悉的應該是 stroke-dasharray 與 stroke-dashoffset 這兩個設定，不過網頁上有很多資訊是可以參考的，例如：CSS + SVG stroke 動態描繪。亂調數值試看看效果是什麼，一定很快就會用嘍！