svg 動畫

After Effect 轉 svg 動畫 – 神奇的 bodymovin 插件

在製作網頁的過程中,以往遇到太複雜的動畫時我不會用 css 處理,而是直接轉成 gif 檔,但 gif 檔實在是超級大,如今在螢幕尺寸百家爭鳴的生態之下,更需準備多組大小才能讓動畫看起來銳利。對於這話題,Ivan Wei 寫過一篇文章 Android — 讓 apk 裡的切圖容量減少95%的好方法" 非常詳細的介紹如何運用 svg 處理圖樣 icon,現在我們面對 svg 動畫 而言又有甚麼方案呢?

最近發現了一個叫做 bodymovin 的 After Effect 插件能直接將動畫轉成 svg,實在是非常方便。過往如要製作 svg 動畫 通常會由設計師用 AI 之類的軟體製作 svg 圖樣,再交由前端處理動畫,不過處理 svg 動畫 需要面對眾多座標數值,處理起來相當費時,設計師與前端之間需花更多時間溝通。以下介紹 bodymovin 插件。

插件網址:https://github.com/bodymovin/bodymovin
插件限制:
限 Abobe Affer Effect CC 2015 使用
插件匯出檔案與使用:
匯出 json 描述 svg,使用需包含 bodymovin.js(約84kb)。
匯出檔案樣式請參考這裡,所描述為一個變小的長方形。
Demo:(更多例子請參考這裡)

See the Pen behind the Grunt by kittons (@airnan) on CodePen.0

設計師如何安裝

  1. 下載 bodymovin,解壓縮後只需要 \build\extension\bodymovin.zxp 這個檔案就可以
    svg, bodymovin

2. 手動安裝 plugin,依照不同 os 有不同方式,請進入這個連結,拉到下方 Install third-party extensions 依照說明做就可以。
svg, third-party extensions


以 windows 系統而言,要先下載 ExMan Command Line tool 並解壓縮。

再來把 bodymovin.zxp 這個檔案複製進去同一個資料夾。
svgani3

 

去找 cmd,並以系統管理員身分執行。
svgani4

 

打 “cd C:/ExManCmd_win 所在的路徑“,進入 ExManCmd 的資料夾中
svgani5

 

接者打 ExManCmd.exe /install bodymovin.zxp 就完成了
svgani6

 

3. 再來進入 AE 後,可以在 windows/extentions/bodymovin 找到插件,開啟後按下 Render 就完成了
svgani7

 

程式設計師要如何使用

1. include bodymovin.js
<script src="js/bodymovin.js" type="text/javascript"></script>

2. 詳情語法和選項請參考 github, wrapper 為要出現動畫的 DOM,path 為匯出的 json 檔位置。

var svgContainer = document.getElementById(‘svgContainer’);
var animItem = bodymovin.loadAnimation({
wrapper: svgContainer,
animType: ‘svg’,
loop: true,
path: ‘data.json’
});

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文:
  • NKi

    LIU HANK你好,我每次在安裝bodymovin 后,windows/extentions/bodymovin 找到插件,開啟後,總是會彈出這個提示框。在另外的系統中安裝也是如此,CC2014 和 CC2015都試過了……還是找不到原因。

    • 創新就從思想開始

      Hi NKi,
      很開心你真的嘗試使用! 這個插件需符合相容性(前提是軟體必須是正版的XD)
      詳情請參閱作者GITHUB,有問題也可以直接mail給作者詢問。
      https://github.com/bodymovin/bodymovin

      • NKi

        好的,謝謝 : )