Vivus.js 主要在做 SVG 的邊框動畫
看一下 Vivus.js 的 Demo 頁面：
https://maxwellito.github.io/vivus/
第一次看的時候沒注意，後來實際使用時，才發現 Vivus.js 的 SVG 動畫是在邊框上做動作的。
但，覺得也可以騙騙人夠用了，就花了點時間試玩一下。
Vivus.js 在 GitHub 上的說明蠻清楚的了，可以設定的參數也有表列出來，還有一點蠻好的是，它有提供生成器的頁面：
https://maxwellito.github.io/vivus-instant/
用生成器時要注意的是，Vivus.js 是處理邊框效果的，如果 SVG 的 stroke 不是寫在 SVG 內，而是寫在外部的 CSS，生成器上就看不到效果。
安裝 Vivus.js
Vivus.js的安裝方式，有 NPM、Bower、CDN。
CDN 有兩個網址：
https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js
https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js頁面上直接引用就行。
使用 Vivus.js
頁面引用 SVG
首先頁面上要先有 SVG 的檔案，因為是處理 SVG 的 path 做動畫，所以不能是用 img src 的：
<!-- 這樣子用會失敗 --> <img src="sample.svg">
必需是 SVG 直接寫在頁面上，或是用 object、AJAX 後 append 進去的。
而 Vivus.js 很貼心的是，它也處理好了 AJAX 的方法。
以下是文件中說明支援 SVG 的三種引入方式：
用 object 或是 Vivus 的方法，會有快取的問題，如果發現 SVG 有更新，但頁面的 SVG 讀到舊的，那就清掉快取或是 XXX.svg 後面加個版本號的參數就行，像這樣：
new Vivus('my-div', {
duration: 200,
file: 'link/to/my.svg?v=1.0.2'
}, myCallback);執行 Vivus.js
頁面上有 SVG 檔後，加一段 JS 就可以使用了，Vivus 會去針對設定的參數對 path 做 stroke 上的動畫：
type
type 主要是 SVG 下的每個 path 出現的時間，總共有三個值：
- sync：每個 path 同時出現
- delayed：每個 path 都各間隔一點時間才出現
- oneByOne：前一個 path 畫完後，下一個 path 才出現
animTimingFunction
就跟 CSS3 的 animation-timing-function 一樣，官方提供的值有以下四種：
- EASE
- EASE_IN
- EASE_OUT
- EASE_OUT_BOUNCE
callback
當 Vivus.js 執行完 SVG 的動畫，就會 trigger callback。
之後的範例就會是在動畫執行完後，callback 裡面填上 fill。
實作範例
SVG 圖
SVG 大部份是用 Illustrator 製作後轉存，這邊直接用線上圖庫 iconfinder 下載。
搜尋完圖庫後，左邊項目的 PRICE 選 Free，LICENSE TYPE 選 No link back，下載的圖才會是可商用又不用署名作者的，以免侵權：
壓縮 SVG
一般下載下來的 SVG，裡面會有一些可以刪減的程式碼，推薦一個線上工具，可以協助刪掉這些不一定要存在的 code：SVGOMG
寫 code
最後完成的範例頁面在這：
https://letswritetw.github.io/letswrite-vivus/
基本上都是使用 Vivus 包含的 AJAX 方法，可以直接看頁面上的原始碼。
Vivus.js 也處理了一件事，就是當 SVG 出現在螢幕中時，才會執行動畫，很考慮使用者的心情。
推薦這個套件，花個幾分鐘就可以做出看上去很厲害的作品。
