在製作網頁的過程中，以往遇到太複雜的動畫時我不會用 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
設計師如何安裝
- 下載 bodymovin，解壓縮後只需要 \build\extension\bodymovin.zxp 這個檔案就可以
2. 手動安裝 plugin，依照不同 os 有不同方式，請進入這個連結，拉到下方 Install third-party extensions 依照說明做就可以。
以 windows 系統而言，要先下載 ExMan Command Line tool 並解壓縮。
再來把 bodymovin.zxp 這個檔案複製進去同一個資料夾。
去找 cmd，並以系統管理員身分執行。
打 “cd C:/ExManCmd_win 所在的路徑“，進入 ExManCmd 的資料夾中
接者打 ExManCmd.exe /install bodymovin.zxp 就完成了
3. 再來進入 AE 後，可以在 windows/extentions/bodymovin 找到插件，開啟後按下 Render 就完成了
程式設計師要如何使用
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’
});
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
