/
/
如何製作 SVG 動畫?使用線上編輯工具 SVGator 讓網站圖片動起來!
SVG 動畫

如何製作 SVG 動畫?使用線上編輯工具 SVGator 讓網站圖片動起來!

SVGator 是一個線上 SVG 動畫編輯工具,以往製作 SVG 動畫會需要使用到 CSS 或是 JavaScript 來達成,SVGator 可以透過瀏覽器操作,不需要寫任何程式碼就可以完成一個網頁動畫,設定介面直覺、好操作,一起讓網站圖片動起來吧!

happy halloween 1

什麼是 SVG?

可縮放向量圖形 (英語:Scalable Vector Graphics,縮寫:SVG),是一種向量圖形格式,具有放大、縮小都不會有鋸齒邊緣的特性,檔案尺寸比 PNG、JPG 還小,常用於網站的 Logo、Icon 等,可以確保圖片在任何大小不失真。

線上 SVG 動畫編輯工具 SVGator

SVGator 是一個線上 SVG 動畫編輯工具,可以透過瀏覽器,不需要另外安裝任何軟體,即可進行 SVG 動畫設定,快速完成一個網頁動畫。

SVGator 連結:https://www.svgator.com/

svgator 02
圖片來源:SVGator

免費版與付費版的差異

SVGator 免費版與付費版詳細差異請參閱:https://www.svgator.com/pricing

免費版

  • 一個月可以輸出 3 次動畫
  • 時間軸不能超過 10 秒
  • 基礎動畫效果

付費版

  • 一個月可以輸出 10 次動畫
  • 時間軸不能超過 60 秒
  • 進階動畫效果

製作 SVG 動畫

利用 Figma 繪製向量圖形

首先需要繪製一個向量圖形,可以透過 Adobe IllustratorFigma 或其他可以繪製向量圖形的軟體繪製圖片,在這裡我們使用 Figma 進行操作,因為 Figma 在瀏覽器即可進行設計,不需要額外安裝軟體,且在免費的方案就可以完成簡易的向量圖形。

Figma 連結:https://www.figma.com/

svgator 03
Figma 登入後畫面

註冊完成 Figma 後,即可進入如上圖的介面,這時選擇 「New design file」新增檔案。

安裝 Figma Plugin:Iconify 快速建立向量圖形

svgator 04
  1. 返回 Figma 首頁,點擊「Community」。
svgator 05
  1. 點選「Plugins」。
  2. 搜尋「Iconify」後,點擊「Installed」進行安裝。
svgator 06
  1. 於工作區域點擊滑鼠右鍵,選擇「Plugins / Iconify」展開 Iconify 的視窗。
  2. 在 Iconify 搜尋欄位搜尋想要的圖形,文字必須要為英文。
  3. 使用拖拉的方式或是點擊下方按鈕「Import Icon」將圖形插入至工作區域。

網路上也有許多可以取得向量圖形的平台,請參考這篇:如何正確、安全使用免費素材,免費素材網站懶人包 (2021最新) 🙂

svgator 07
  1. 編輯完成的圖形記得將全部物件群組 (Ctrl+G)。
  2. 於右側 Export 選擇 SVG 後點擊按鈕輸出圖形。

將向量圖形匯入 SVGator

svgator 08 1
  1. 登入 SVGator 後,選擇「Import SVG」,將剛剛輸出的圖形匯入。
  2. 將滑鼠移動至匯入的圖形,點擊「Open」開啟檔案。

利用 SVGator 製作 SVG 動畫

svgator 09
  1. 在 Elements 這個區域會顯示組成向量圖形的物件,選擇到的物件會在右側工作區域呈現框選 (藍色框) 的狀態。
  2. 於物件點選右鍵,選擇「Animate」,有不同的動畫效果可以選擇,如:Position (位置)、Scale (縮放)、Rotate (旋轉) 等,物件選擇動畫效果後,會將效果新增在時間軸。
  3. 時間軸,可以調整動畫變化的秒數,上排的刻度為時間,1s 表示為 1 秒。

調整時間軸

svgator 10
  1. 黑色圓圈為此物件的定位點,預設在物件的中心,因此執行任何動畫效果都會從中心開始,例如:從中心縮放;此外,可以透過滑鼠拖曳可以更改物件的定位點。
  2. 菱形圖示為物件在該秒數呈現的樣式,可以製作位置、大小、透明度等變化。
  3. 秒數刻度上的尺標表示工作區域目前停留的秒數,如上圖為停留在 0.5s 的時候。

輸出設定完成的 SVG 動畫

svgator 11
  1. 完成動畫設定後,點擊右上角「Export」。
  2. 為確保動畫可以在網站上正常運行,在 Animation type 可以選擇「CSS Only」。
  3. 若希望動畫重複播放,可以選擇「Infinite」。
  4. 輸出設定完成後,點擊「Export」按鈕,注意上方有顯示每個月剩餘輸出次數。

完成,在網站置入 SVG 動畫吧!

將製作完成的 SVG 檔案上傳至後台媒體庫後,即可將 SVG 圖檔插入至文章或頁面中。

svgator 12

若上傳檔案出現「系統不接受這個檔案類型」的訊息,則需要另外安裝「SVG Support」這個外掛,讓 SVG 檔案可以順利上傳至媒體庫。

happy halloween 1

完成,一起使用線上 SVG 動畫編輯工具 SVGator,讓網站圖片動起來吧!

延伸閱讀
相關標籤:
SHARE
分享在 facebook
分享在 twitter
分享在 linkedin
WRITTEN BY
Hend Chen
Hend Chen
專長於網頁設計 、UI 設計、品牌設計。我的英文名字取自中文名字發音,發音和手的英文 “hand“ 沒有差異,如果您正面臨網站設計的困擾,我很樂意成為協助您的那雙手!

目錄

Subscribe