文章彙整

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

By Astral Web 9 months agoNo Comments
首頁  /  網站設計與開發  /  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 動畫。

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。