SVG邊框動畫提升網頁質感(上)

這次要為大家介紹一個好用的 JS plugin – vivus，不過在介紹前先稍微了解一下基本 SVG  動畫如何製作！

可縮放向量圖形（Scalable Vector Graphics，簡稱SVG）是W3C所制定的開放性網路標準之一。除了其向量特性能夠隨意縮放的優勢，SVG 更能夠簡單地搭配 CSS、Script 腳本和 DOM 完成多種特效。有關 SVG 的特性這裡就不再多做說明，本次重點是利用 SVG  的stroke-dasharray和stroke-dashoffset屬性與 CSS3 animation 結合做出類似手寫風格的動畫。

 

 

1.產出 SVG 向量

 

最快速的方法是利用 Illustrator 或 Sketch 繪製圖形後轉存 .svg，再使用編輯器節錄其中 <path> 路徑標籤。

 

2.了解Stroke-dasharray 與 Stroke-dashoffset

 

Stroke-dasharray：線段的「虛線間距」，可為單一值或可以是一陣列

Stroke-dashoffset： 線段的「偏移量」，要實現動畫則要動態改變這個偏移值

3.利用@keyframes實現動態

 

 

這樣就可以簡單自己完成基本 SVG 動畫，若再搭配其他屬性則會有更多有趣的呈現 (詳細請參考 https://www.w3schools.com/graphics/svg_intro.asp )，而下一篇文章將套用 vivus.js ，只要加上一些參數設定，即可迅速製作出多層次又具有質感的 SVG 動畫。