AE導(dǎo)出json格式的Web動畫腳本Bodymovin

Bodymovin是一款可以從AE中導(dǎo)出Web動畫的腳本，這款腳本導(dǎo)出的web動畫格式為.json格式文件，bodymovin生成的json體積非常小，只有幾百kb左右，讀取速度要比圖片快的多。

更新日志：

V5.5.3 更新內(nèi)容：

– 新功能：為高斯模糊效果添加SVG支持
– 新功能：添加TypeScript類型定義
– 修復(fù)：在通過文本格式創(chuàng)建時刪除文本警告
– 修復(fù)：修復(fù)字體中合并的字符
– 新功能：為擴展添加了多個設(shè)置功能
– 新功能：在表達(dá)式中添加了對遮罩不透明度的支持
– 修復(fù)：修復(fù)＃1552 html渲染器錯誤的字體測量
– 修復(fù)：在JSON文檔中修復(fù)maskProperties鍵名稱

安裝方法：

如果電腦上沒有AE的話，需要安裝AE CC2014或更高版本。以AE CC2017為例：
（AE CC2017 歡迎界面）

AE安裝完成后，安裝Bodymovin插件。

2.1到GitHub的首頁下載Bodymovin插件包（地址：https://github.com/bodymovin/bodymovin），下載或者克隆插件包到本地。

2.2在項目目錄的“/build/extension”目錄下找到“bodymovin.zxp”文件，然后雙擊安裝此插件。（安裝過程中關(guān)閉AE軟件）如果沒有如下圖片，先不用管，先進(jìn)行下一步2.3操作。

2.3下載ZXP Installer（地址：[http://aescripts.com/learn/zxp-installer/），然后雙擊打開軟件，點擊“File”>“Open”菜單項載入上述bodymovin.zxp插件包，ZXP Installer會自動開始安裝。安裝完成后的軟件主頁面如下圖所示，表示插件已成功安裝。

使用方法：

1、打開一個 Adobe After Effect 項目，點擊 Window / Extensions / Bodymovin，出現(xiàn)如圖1所示對話框，點擊 Selected 選中要導(dǎo)出的 Composition，選擇導(dǎo)出文件的路徑（Destination Folder），點擊 RENDER 即可導(dǎo)出。

1、選定一個合成

2、選擇導(dǎo)出文件的路徑，點擊渲染動畫即可。

2、進(jìn)入預(yù)覽拖拽播放進(jìn)度條可預(yù)覽生成js文件的動畫效果。