Bodymovin是一款專為AE軟件打造的動畫導(dǎo)出插件，能夠幫你快速導(dǎo)出json文件和png圖片，并且導(dǎo)出的json文件可以以Android/iOS原生動畫的形式在移動設(shè)備上渲染播放，用戶還可以在svg，canvas和html上在瀏覽器中渲染動畫，幫助提高實現(xiàn)動效效率，同時提高動效質(zhì)量！

Bodymovin插件功能

1、支持的功能

形狀

路徑，橢圓，星星，矩形

填充，描邊，漸變填充和漸變筆畫

破折號

修剪路徑（部分）

圓角

變換（位置，錨點，旋轉(zhuǎn)，縮放，不透明度，傾斜，傾斜軸）

固體

圖片

譜曲

空值

文本

支持大多數(shù)字體，只要您在瀏覽器上加載字體，它們就可以導(dǎo)出為形狀或文本

每個文本框支持單個文本偏差。

不支持：文本裝飾，如小型大寫或垂直縮放。

相機（部分）

表達式

表達式。部分支持。每個版本都支持越來越多的表達式。

如果您遇到任何問題，請告訴我們。

支持表達式滑塊。

2、一般支持的屬性

變換（旋轉(zhuǎn)，縮放，位置，錨點，不透明度）

時間重新映射

面具（添加劑，在某些情況下差異，倒置和減少）

亮度和alpha蒙版（使用svg渲染器）

3、支持的效果（使用svg / html渲染器）

填

職業(yè)水平

投影

著色

全音

插件優(yōu)點

它可以支持 Android、iOS平臺；

導(dǎo)出的文件體積小，方便開發(fā)使用；

實現(xiàn)效果佳，可以支持漸變等效果。

安裝教程

1.拷貝bodymovin文件夾到以下位置:

Win : C:Program Files (x86)Common FilesAdobeCEPextensions

Mac : /Library(中文叫資源庫)/Application Support/Adobe/CEP/extensions

2.Win運行一下Add Keys.reg，Mac運行一下install-as-admin

3.打開AE軟件設(shè)置，勾選上*允許腳本讀寫和訪問網(wǎng)絡(luò)

Win：編輯-首選項-常規(guī)

Mac：After Effects CC-首選項-常規(guī)

4.在軟件頂部window窗口菜單-擴展下即可看到bodymovin腳本

注意事項

在使用前期，這種方法是否適合你現(xiàn)在所做的動效，lottie 是針對矢量動畫開發(fā)的，不太適合圖片過多的情況，圖片過多會增加文件負荷，所以最好是將圖片轉(zhuǎn)化為路徑動畫。

在 AE 里導(dǎo)入到 Lottie 的圖層不能識別矢量漸變。

不能支持外置插件的效果，比如粒子、光效等。

需要與前端開發(fā)溝通，他們是否愿意使用。

導(dǎo)出給開發(fā)的文件中需要有完整視頻參考，開發(fā)可以通過完整視頻知道 loading 位置和效果，同時如果出現(xiàn) json 導(dǎo)出錯誤的情況，開發(fā)可以查看，遇到不一樣的地方可以詢問設(shè)計師。

開發(fā)完成后需要走查，看是否與你預(yù)期一致。

更新日志

V5.7.7 新功能特性：

-修正：xhr open order

-功能：添加標記支持

-修正：減少副本的中繼器

-修正：無意中對大筆劃寬度形狀的筆劃剪輯（感謝Manan Jadhav）

-修復(fù)：IE11追加丟失

-修正：中繼器呼叫修剪兩次