如何使用 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
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

GitLab Pages:3 + 2 個步驟讓 GitLab 專案產生靜態頁

Front-End

用 JavaScript 將 JSON 轉為 CSV 檔下載

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

Forms Google

Google 表單,輸入 ID 後自動帶入其它欄位資料

Vue

用 VuePress 製作說明文件頁面 – 6:部署

API

GitHub API:建立 Issue、Comment – API、Personal access tokens

Bot LINE

LINE Bot:用 Google Apps Script 建立簡易網站監測機器人

WordPress

WordPress 好用的會員相關外掛:登入安全性、會員系統

WordPress

WordPress:Site Kit by Google 介紹及使用

API

GitHub API:取 Issue、Comments

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言