vivus.js- 讓 SVG 圖變成動畫

最近上課的時候同學問說怎麼樣可以做出線條動畫,稍微查了一下先看到 svg animation,可以把 svg 動畫化,再找下去發現 vivus.js 這個 plugin,直接套用就可以把線條變動畫,真的超方便的。

使用方法一樣把js讀入後,可以用 var myVivus = new Vivus('my-svg-id'); 的方式,選擇要變成動畫的地方再指定 svg 位置就可以把 svg 變成動畫了。

我簡單畫了一張圖使用效果,點圖可以連結到效果網址。



動畫方式分為 Delayed(每一條線稍微延遲)、Sync(每條線同步)、OneByOne(每條線會在前一條跑完後才繼續),加上一些參數設定,就可以快速製作漂亮的 svg 動畫了,更多說明可以看官網文件。

vivus

留言