[譯]AE 插件 Bodymovin 項目介紹

01-26

2017.04.05更新

漢化了bodymovin.zxp插件(v4.6.2)，下載地址點我

說明：

1.安裝方法見正文，建議用方式1。自簽名打包，如介意請使用英文原版。

2.自帶預覽失效，似乎是作者未在github更新（可能更新在adobe在線商店版？），如有更新我將跟進。請通過導出html播放的方式預覽。

3.修正了原版導出帶透明通道png圖片資源會有黑邊問題。

在macOS 10.11.6 用 AE CC 2014.2版本測試通過，其他版本不保證ok哦

—————以下是正文—————

這是 bodymovin 插件說明的中文版，由BigXiXi翻譯, 原文地址： bodymovin/bodymovin

注意！項目中除了 readme 保持更新，其他文件最新版請移步原版獲取。
文中 After Effects 術語參考自官方中文版 AE 。

bodymovin

After Effects 插件，用於將動畫導出為 svg/canvas/html + js 。

V 4.6.1

修正 3D 方向控制[3D orientation fix]
渲染性能提升[render improvements]

V 4.6.0

新操作界面！[New UI!]
支持投影效果器[Drop shadow effect support]
做了偏移的圖層動畫效能提升[performance improvement on animations with offsetted layers]
表達式效能提升[big performance improvement on expressions]
加強了表達式支持[expressions expressions expressions]

V 4.5.9

修正表達式變數聲明[expressions variable declaration fix]
修正效果器控制類型[effect control type fix]

V 4.5.8

形狀圖層的填充規則（奇偶 /非零纏繞）及漸變填充模式[fill-rule for fills and gradient fills on shapes]
用額外的小數位計算色值（提高計算精度）[rounding colors values with an extra decimal]
如果屬性表達式返回值為字元串，現在將作為數字計算[property expressions that return strings are evaluated as numbers]

V 4.5.7

修正單機模式自動播放問題[standalone autoplay fix]

V 4.5.6

CEP 插件平台表達式實例修正[expression instance fix for CEP]
表達式中條件判斷語句的變數聲明支持[new variables declarations in expression conditional statements]
減少了不同端點數的形狀導出時的文件體積[reduced filesize on exported shapes with different vertex count]
當調用銷毀時設置父級上下文（修正 webpack 的問題）[setting parents context when calling destroy (fixes webpack issue)]

V 4.5.5

文字動畫選擇器-三角形選擇器修正[Text selector Triangle fix]
對啟用了表達式的效果器中的屬性增加表達式支持[Expressions support for "active" property on effects]
重新安排導出屬性[Rearranged exporting properties]
為做了動畫的屬性包含「 a 」屬性[Included "a" property for animated props]
文檔更新[Docs updated]

V 4.5.4

增加單獨修建路徑支持[Trim path individually supported]
修正 webpack 打包時的錯誤[bug fix that messed with webpack build]

V 4.5.3

跳過文字中的不換行空格[Skipping non breaking space on characters]
優化色階(單獨控制項)效果器[levels effect optimizations]
加入形狀圖層「變換」屬性表達式支持（還有幾個 Rubberhose 腳本的 bug 待解決）[shape expressions transform properties added (Needed to fix a Rubberhose 2 issue)]
在「變換」操作界面用表達式控制「變換」屬性[transform properties in expression through transformInterface]

V 4.5.2

合成表達式界面默認返回[Comp expression interface default return]
HTML 渲染驗證修復[HTML renderer validation fix]

V 4.5.1

修正修剪路徑[Trim path fix]
修正 HTML 渲染[Html renderer fixes]

V 4.5.0

三色調效果器支持[Tritone effect supported]
色階（單獨控制項）效果支持[Levels effect supported. The one called "Levels (Individual Controls)"]
***完整更新說明（英文）參見 bodymovin/bodymovin ***

直接從 adobe 在線商店獲取！Adobe Add-ons

支持 AE CC2014 及以上版本。

如果需要最最新的版本，可以從這裡安裝：

安裝方式 1 （推薦）：

打包為 zip 下載整個項目到本地。
解壓縮並從 /build/extension 找到 bodymovin.zxp 文件
使用 aescripts.com 出品的 ZXP 安裝器進行安裝。

安裝方式 2 ：

關閉 After Effects
打包為 zip 下載整個項目到本地並解壓 build/extension/bodymovin.zxp 文件到 Adobe CEP 文件夾（ CEP 插件擴展平台）：
WINDOWS:
C:Program Files (x86)Common FilesAdobeCEPextensions 或者

C:<用戶名>AppDataRoamingAdobeCEPextensions
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
來保證正確複製了文件)
編輯註冊表:
WINDOWS:

找到註冊表鍵值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一個鍵值名為 PlayerDebugMode, 類型為字元串(String), 值為 1 。
MAC:
打開文件 ~/Library/Preferences/com.adobe.CSXS.6.plist （ com.adobe.CSXS.？？？.plist 其中問號根據 AE 版本不同會有不同）新加一行，鍵(key)為 PlayerDebugMode, 類型為字元串(String), 值為 1 。

安裝方式 3 ：

按照官方手冊的指導安裝 zxp 插件，地址如下(英文): Install add-ons and extensions for Adobe apps

直接跳到 "Install third-party extensions"

安裝完成後

在 AE 里勾選編輯 > 首選項 > 常規 > 允許腳本寫入文件和訪問網路（ Mac 下為 After Effects > 首選項 > 常規 > 允許腳本寫入文件和訪問網路）。

如何使用

在 After Effects 中

運行 AE 程序，選擇 bodymovin 插件，位置是窗口 > 擴展 > bodymovin [Window > Extensions > bodymovin]
此時將彈出一個面板，列出了項目中的所有合成。
在面板上點擊刷新[Refresh]。
選擇你想要導出的合成。
選擇要導出到的地址[Destination Folder]。
點擊渲染[Render]。
找到導出的 json 文件 (如果動畫中有圖片資源或者 AI 圖層, 將會同時生成一個 images 文件夾存放這些圖片資源)。

設置：

分段： 分段導出你的動畫。如果你的動畫有很多層，可以選擇分段導出，這樣就不會一次性全部載入。導出工具將會根據圖層開始時間進行分段。

快照： 保存一張 svg 格式的快照作為動畫的封面。渲染完動畫後, 你可以截取任意一幀快照並保存到硬碟上。我建議優化這張 svg 快照，可以利用一些工具比如 SVGOMG - SVGOs Missing GUI 並好好設置一番。

用於 HTML

查看 demo ，有不同的動畫載入方式：

從 build/player/獲取最新 bodymovin.js 文件
在你的 html 文件中包含 bodymovin.js (發布時可以 gzip 壓縮一下減少體積)

<script src="js/bodymovin.js" type="text/javascript"></script>

你可以調用 bodymovin.loadAnimation() 來開始動畫。可以用一個對象傳遞這些參數：

animationData: 包含導出的動畫數據的對象。
path: 動畫數據文件的相對路徑。 (animationData 和 path 參數是互斥的)
loop: 循環設置，值為 true / false / number （循環 /不循環 /循環 n 次（ n 為輸入值））
autoplay: 自動播放設置。 true 為準備就緒後自動播放， false 為不自動播放。
name: 動畫名，用於後續引用。
renderer: 選擇渲染器，值為svg / canvas / html 。
container: 需要渲染動畫的 dom 元素。

返回一個動畫對象，你可以控制它播放、暫停、設置速度。。。。

bodymovin.loadAnimation({ container: element, // 渲染動畫的 dom 元素 renderer: svg, loop: true, autoplay: true, animationData: JSON.parse(animationData) // 動畫數據});

如果想用已有的 canvas 畫布來繪製, 可以額外傳遞一個對象: renderer 並按參考如下配置：

bodymovin.loadAnimation({ container: element, // 渲染動畫的 dom 元素 renderer: svg, loop: true, autoplay: true, animationData: animationData, // 動畫數據 rendererSettings: { context: canvasContext, // canvas 畫布上下文 scaleMode: noScale, clearCanvas: false }});

如果你這麼做了, 必須在每一幀渲染後清除畫布。

另一個載入動畫的辦法是為 dom 元素加上特定的屬性。你需要包含一個 div 元素，並設置他的 class 為 bodymovin 。如果你在頁面載入前這麼做了，它將自動檢測頁面上所有 class 標籤值為"bodymovin"的元素。或者你可以在頁面載入完成後調用 bodymovin.searchAnimations()，同樣會檢測頁面上所有 class 標籤值為"bodymovin"的元素。

步驟：

將 data.json 文件放到 html 文件同級的一個文件夾中。
創建一個將要包含動畫的 div 元素。

必要屬性

一個名為"bodymovin"的 class

一個 "data-animation-path" 屬性，值為 data.json 的相對路徑。

可選屬性

一個 "data-anim-loop" 屬性，控制循環。

一個 "data-name" 屬性，用於指定一個名字作為播放控制的控制目標。

示例

<div stylex="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) 跳轉到某一時間（或幀）並停在那。第一個參數(value)是數值。第二個參數是布爾值，"true"則第一個參數表示「幀」，「 false 」則表示「時間」。

anim.goToAndPlay(value, isFrame) 跳轉到某一時間（或幀）並播放。第一個參數(value)是數值。第二個參數是布爾值，"true"則第一個參數表示「幀」，「 false 」則表示「時間」。

anim.setDirection(direction) -- 播放方向，正數和 0 為正常播放，負數為倒放。

anim.playSegments(segments, forceFlag) -- 播放指定段落。第一個參數是一個數組，形式為[(a,b),(c,d),(e,f)...]則播放第 a 幀到 b 幀，然後第 c 幀到 d 幀， e 到 f …… ，第二個參數為布爾值，「 true 」則立刻播放參數一中的片段，「 false 」則播放完當前動畫後再開始播放片段。

anim.destroy()

bodymovin 有 8 個方法:

bodymovin.play() -- 播放指定動畫， 1 個參數動畫名。

bodymovin.stop() -- 停止播放指定動畫， 1 個參數動畫名。

bodymovin.setSpeed() -- 第一個參數設置動畫速度 (1 為正常速度），第二個參數動畫名可選。

bodymovin.setDirection() -- f 播放方向，正數和 0 為正常播放，負數為倒放，第二個參數動畫名可選。

bodymovin.searchAnimations() -- 檢測 class 值為"bodymovin"的元素。

bodymovin.loadAnimation() -- 前面已有介紹，返回一個可單獨控制的動畫實例。

bodymovin.destroy() --銷毀和釋放資源。 DOM 元素將會被清空。

bodymovin.registerAnimation() -- 你可以直接用 registerAnimation 來註冊一個自定義元素，它必須包含"data-animation-path"屬性並指向 data.json 的地址。

bodymovin.setQuality() -- 畫質設置，調整動畫播放器性能。默認為高畫質(high), 可選值為high、medium、low, 或者大於 1 的數字。對於有的動畫這些設置差別不大。

事件

onComplete
onLoopComplete
onEnterFrame
onSegmentStart

或者你可以對以下事件設置監聽(addEventListener)：

complete
loopComplete
enterFrame
segmentStart

查看 demo 文件夾中的例子，或者訪問 kittons on CodePen 可以看到精彩的演示動畫

一些建議

文件

如果你使用了圖片資源或者未轉成形狀圖層的 Adobe Illustrator 文件圖層, 將會同時生成一個 images 文件夾存放這些圖片資源。(我建議將 ai 圖層轉換為形狀圖層，這樣他們會被導出為矢量數據，只需在 AE 中導入的 ai 圖層上右鍵 > 從矢量圖層創建形狀) 注意，如果不同的帶圖片資源的動畫導出到同一地址， images 文件夾將會被覆蓋。

性能

Bodymovin 的動畫都是實時渲染的。雖然經過了大量優化，最好還是控制 AE 工程文件體積在一個必要的值。

更多的優化也正在進行中，但請避免這種情況：繪製了一個巨大的形狀圖層，但是只通過遮罩使用其中一小部分。

過多的節點同樣會影響性能。

幫助

如果你有動畫導出失敗或者想讓我幫你導出, 不要猶豫請告訴我。

我很樂意能找到這個插件的不足之處。

我的郵箱是 hernantorrisi@gmail.com

演示

訪問 codepen 查看動畫演示

支持的 AE 特性

插件支持預合成、形狀圖層、固態層、圖片、空對象以及文字圖層。
支持遮罩和反向遮罩。也許別的模式也會支持，但是會對性能造成巨大影響。
支持時間重映射（是的沒錯！）。
支持形狀圖層的形狀、矩形、橢圓和星形。
目前只支持滑塊效果。
支持部分表達式。更多介紹可以查看這裡（英文）
不支持：圖像序列、視頻和音頻 (也許未來會支持)。
不要伸縮圖層！不知為何，伸縮圖層會破壞導出的數據，所以不要做這個操作。

其他說明

如果你想修改或者解析動畫播放器，有一些 gulp 命令可以簡化這個操作。
看看這些 codepen 上的優秀作品訪問 codepen 作品集
gzip 壓縮一下動畫 json 數據文件和播放器 js 文件可以有效減少文件體積。如果你用在項目里，我建議你這麼做。