四月 30, 2019 | 前端與Vue

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

想要做更進一步的網頁動畫,不一定只有 Animate.css ,或者一些需要 js 運算的動態效果。如果你想做的是線條類特效的話,那這一篇你或許就可以參考看看! 要做線性特效之前,會先需要將形狀繪畫出來,那你可能會想到用 canvas 或 svg 來做。而有個辦法可以讓我們將圖形「畫」出來,再轉存為 svg ,就可以省下 coding 的時間來細條特效了! 此篇需要的兩種工具只有下列兩種:illustrator 跟 CSS 。準備好一起開始玩吧!關於 svg 的相關資訊,可以參考 MDN 填充與框邊。 Step 01. 用 illustrator 繪製形狀 首先,打開 Illustrator , 設定大小後開始畫吧。我們以圓形與叉叉當作範例。一個是形狀畫的,另一個是使用鋼筆工具。

想要做更進一步的網頁動畫,不一定只有 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-dasharraystroke-dashoffset 這兩個設定,不過網頁上有很多資訊是可以參考的,例如:CSS + SVG stroke 動態描繪。亂調數值試看看效果是什麼,一定很快就會用嘍!