2018.03.19 更新bodymovin5.1.8 zxp插件漢化版
https://github.com/bigxixi/bodymovin_cn
安裝方式1（推薦）：
- 打包為zip下載整個項目到本地。
- 解壓縮并從 '/build/extension' 找到 bodymovin.zxp 文件
- 使用aescripts.com出品的 ZXP安裝器 進行安裝。
安裝方式2：
關(guān)閉After Effects
打包為zip下載整個項目到本地并解壓 build/extension/bodymovin.zxp 文件到 Adobe CEP 文件夾（CEP插件擴展平臺）：
WINDOWS:
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions 或者
C:<用戶名>\AppData\Roaming\Adobe\CEP\extensions
MAC:
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
(你可以在終端中輸入:
cp -R 你解壓后的目錄/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
然后輸入:
ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
來保證正確復(fù)制了文件)編輯注冊表:
WINDOWS:
找到注冊表鍵值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一個鍵值名為 PlayerDebugMode, 類型為字符串(String), 值為 1。
MAC:
打開文件 ~/Library/Preferences/com.adobe.CSXS.6.plist（com.adobe.CSXS.？？？.plist其中問號根據(jù)AE版本不同會有不同） 新加一行，鍵(key)為PlayerDebugMode, 類型為字符串(String), 值為 1。
安裝方式3：
按照官方手冊的指導(dǎo)安裝zxp插件，地址如下(英文): https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html
直接跳到 "Install third-party extensions"
安裝完成后
在AE里勾選 編輯 > 首選項 > 常規(guī) > 允許腳本寫入文件和訪問網(wǎng)絡(luò)（Mac 下為 After Effects > 首選項 > 常規(guī) > 允許腳本寫入文件和訪問網(wǎng)絡(luò)）。
如何使用
在After Effects中
- 運行AE程序，選擇bodymovin插件，位置是
窗口 > 擴展 > bodymovin[Window > Extensions > bodymovin] - 此時將彈出一個面板，列出了項目中的所有合成。
- 在面板上點擊刷新[Refresh]。
- 選擇你想要導(dǎo)出的合成。
- 選擇要導(dǎo)出到的地址[Destination Folder]。
- 點擊渲染[Render]。
- 找到導(dǎo)出的json文件 (如果動畫中有圖片資源或者AI圖層, 將會同時生成一個images文件夾存放這些圖片資源)。
設(shè)置：
分段： 分段導(dǎo)出你的動畫。 如果你的動畫有很多層，可以選擇分段導(dǎo)出，這樣就不會一次性全部加載。 導(dǎo)出工具將會根據(jù)圖層開始時間進行分段。
快照： 保存一張svg格式的快照作為動畫的封面。渲染完動畫后, 你可以截取任意一幀快照并保存到硬盤上。 我建議優(yōu)化這張svg快照，可以利用一些工具比如 https://jakearchibald.github.io/svgomg/ 并好好設(shè)置一番。
用于HTML
查看demo，有不同的動畫加載方式：
- 從build/player/獲取最新 bodymovin.js 文件
- 在你的html文件中包含 bodymovin.js (發(fā)布時可以gzip壓縮一下減少體積)
<script src="js/bodymovin.js" type="text/javascript"></script>
你可以調(diào)用 bodymovin.loadAnimation() 來開始動畫。 可以用一個對象傳遞這些參數(shù)：
- animationData: 包含導(dǎo)出的動畫數(shù)據(jù)的對象。
- path: 動畫數(shù)據(jù)文件的相對路徑。 (animationData 和 path 參數(shù)是互斥的)
- loop: 循環(huán)設(shè)置，值為true / false / number（循環(huán)/不循環(huán)/循環(huán)n次（n為輸入值））
- autoplay: 自動播放設(shè)置。true為準(zhǔn)備就緒后自動播放，false為不自動播放。
- name: 動畫名，用于后續(xù)引用。
- renderer: 選擇渲染器，值為'svg' / 'canvas' / 'html' 。
- container: 需要渲染動畫的dom元素。
返回一個動畫對象，你可以控制它播放、暫停、設(shè)置速度。。。。
bodymovin.loadAnimation({
container: element, // 渲染動畫的dom元素
renderer: 'svg',
loop: true,
autoplay: true,
animationData: JSON.parse(animationData) // 動畫數(shù)據(jù)
});
- 如果想用已有的canvas畫布來繪制, 可以額外傳遞一個對象: 'renderer' 并按參考如下配置：
bodymovin.loadAnimation({
container: element, // 渲染動畫的dom元素
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData, // 動畫數(shù)據(jù)
rendererSettings: {
context: canvasContext, // canvas畫布上下文
scaleMode: 'noScale',
clearCanvas: false
}
});
如果你這么做了, 必須在每一幀渲染后清除畫布。
另一個加載動畫的辦法是為dom元素加上特定的屬性。 你需要包含一個div元素，并設(shè)置他的class為bodymovin。 如果你在頁面加載前這么做了，它將自動檢測頁面上所有class標(biāo)簽值為"bodymovin"的元素。 或者你可以在頁面加載完成后調(diào)用bodymovin.searchAnimations()，同樣會檢測頁面上所有class標(biāo)簽值為"bodymovin"的元素。
步驟：
將data.json文件放到html文件同級的一個文件夾中。
創(chuàng)建一個將要包含動畫的div元素。
必要屬性
一個名為"bodymovin"的class
一個 "data-animation-path" 屬性，值為 data.json 的相對路徑。
可選屬性
一個 "data-anim-loop" 屬性，控制循環(huán)。
一個 "data-name" 屬性，用于指定一個名字作為播放控制的控制目標(biāo)。
示例
<div style="width:1067px;height:600px"
class="bodymovin"
data-animation-path="animation/"
data-anim-loop="true"
data-name="ninja"></div>
用法
動畫實例可用的方法如下：
anim.play()
anim.stop()
anim.pause()
anim.setSpeed(speed) -- 播放速度 ，1 為正常速度。
anim.goToAndStop(value, isFrame) 跳轉(zhuǎn)到某一時間（或幀）并停在那。第一個參數(shù)(value)是數(shù)值。第二個參數(shù)是布爾值，"true"則第一個參數(shù)表示“幀”，“false”則表示“時間”。
anim.goToAndPlay(value, isFrame) 跳轉(zhuǎn)到某一時間（或幀）并播放。第一個參數(shù)(value)是數(shù)值。第二個參數(shù)是布爾值，"true"則第一個參數(shù)表示“幀”，“false”則表示“時間”。
anim.setDirection(direction) -- 播放方向，正數(shù)和0為正常播放，負數(shù)為倒放。
anim.playSegments(segments, forceFlag) -- 播放指定段落。第一個參數(shù)是一個數(shù)組，形式為[(a,b),(c,d),(e,f)...]則播放第a幀到b幀，然后第c幀到d幀，e到f…… ，第二個參數(shù)為布爾值，“true”則立刻播放參數(shù)一中的片段，“false”則播放完當(dāng)前動畫后再開始播放片段。
anim.destroy()
bodymovin有8個方法:
bodymovin.play() -- 播放指定動畫，1個參數(shù)動畫名。
bodymovin.stop() -- 停止播放指定動畫，1個參數(shù)動畫名。
bodymovin.setSpeed() -- 第一個參數(shù)設(shè)置動畫速度 (1為正常速度），第二個參數(shù)動畫名可選。
bodymovin.setDirection() -- f播放方向，正數(shù)和0為正常播放，負數(shù)為倒放，第二個參數(shù)動畫名可選。
bodymovin.searchAnimations() -- 檢測class值為"bodymovin"的元素。
bodymovin.loadAnimation() -- 前面已有介紹， 返回一個可單獨控制的動畫實例。
bodymovin.destroy() --銷毀和釋放資源。 DOM 元素將會被清空。
bodymovin.registerAnimation() -- 你可以直接用registerAnimation來注冊一個自定義元素，它必須包含"data-animation-path"屬性并指向data.json的地址。
bodymovin.setQuality() -- 畫質(zhì)設(shè)置，調(diào)整動畫播放器性能。默認為高畫質(zhì)(high), 可選值為'high'、'medium'、'low', 或者大于1的數(shù)字。對于有的動畫這些設(shè)置差別不大。
事件
- onComplete
- onLoopComplete
- onEnterFrame
- onSegmentStart
或者你可以對以下事件設(shè)置監(jiān)聽(addEventListener)：
- complete
- loopComplete
- enterFrame
- segmentStart
查看demo文件夾中的例子，或者訪問 http://codepen.io/airnan/ 可以看到精彩的演示動畫
一些建議
文件
如果你使用了圖片資源或者未轉(zhuǎn)成形狀圖層的Adobe Illustrator文件圖層, 將會同時生成一個images文件夾存放這些圖片資源。(我建議將ai圖層轉(zhuǎn)換為形狀圖層，這樣他們會被導(dǎo)出為矢量數(shù)據(jù)，只需在AE中導(dǎo)入的ai圖層上右鍵 > 從矢量圖層創(chuàng)建形狀) 注意，如果不同的帶圖片資源的動畫導(dǎo)出到同一地址，images文件夾將會被覆蓋。
性能
Bodymovin的動畫都是實時渲染的。 雖然經(jīng)過了大量優(yōu)化，最好還是控制AE工程文件體積在一個必要的值。
更多的優(yōu)化也正在進行中，但請避免這種情況：繪制了一個巨大的形狀圖層，但是只通過遮罩使用其中一小部分。
過多的節(jié)點同樣會影響性能。
幫助
如果你有動畫導(dǎo)出失敗或者想讓我?guī)湍銓?dǎo)出, 不要猶豫請告訴我。
我很樂意能找到這個插件的不足之處。
我的郵箱是 hernantorrisi@gmail.com
演示
支持的AE特性
- 插件支持預(yù)合成、形狀圖層、固態(tài)層、圖片、空對象以及文字圖層。
- 支持遮罩和反向遮罩。也許別的模式也會支持，但是會對性能造成巨大影響。
- 支持時間重映射（是的沒錯！）。
- 支持形狀圖層的形狀、矩形、橢圓和星形。
- 目前只支持滑塊效果。
- 支持部分表達式。更多介紹可以查看這里（英文）
- 不支持： 圖像序列、視頻和音頻 (也許未來會支持)。
- 不要伸縮圖層！不知為何，伸縮圖層會破壞導(dǎo)出的數(shù)據(jù)，所以不要做這個操作。
其他說明
- 如果你想修改或者解析動畫播放器，有一些 gulp 命令可以簡化這個操作。
- 看看這些codepen上的優(yōu)秀作品 訪問codepen作品集
- gzip壓縮一下動畫json數(shù)據(jù)文件和播放器js文件可以有效減少文件體積。如果你用在項目里，我建議你這么做。
