vivus.js- 讓 SVG 圖變成動畫

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

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

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



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

vivus