在製作網頁的過程中,以往遇到太複雜的動畫時我不會用 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.
設計師如何安裝
- 下載 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’
});
本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知。