如何使用vivus.js製作輕量快速svg動畫

如何使用vivus.js製作輕量快速svg動畫

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出現在螢幕中時,才會執行動畫,很考慮使用者的心情。

推薦這個套件,花個幾分鐘就可以做出看上去很厲害的作品。


Summary
如何使用vivus.js製作輕量快速svg動畫
Article Name
如何使用vivus.js製作輕量快速svg動畫
Description
本篇大綱:vivus.js主要在做svg的邊框動畫、安裝、使用、頁面引用svg、執行vivus.js、實作範例、svg圖、壓縮svg、寫code。最後完成的範例頁面在這,基本上都是使用vivus包含的ajax方法,可以直接看頁面上的原始碼。推薦這個套件,花個幾分鐘就可以做出看上去很厲害的作品。
Augustus
Let's Write
Let's Write
Publisher Logo

留言

avatar
  訂閱  
通知