这是 bodymovin 插件说明的中文版，由BigXiXi翻译, 原文地址： https://github.com/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)"]
***完整更新说明（英文）参见 https://github.com/bodymovin/bodymovin/blob/master/History.md ***

直接从 adobe 在线商店获取！ https://creative.adobe.com/addons/products/12557
支持 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 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
来保证正确复制了文件)
编辑注册表:
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 插件，地址如下(英文): https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html
直接跳到 "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 快照，可以利用一些工具比如 https://jakearchibald.github.io/svgomg/ 并好好设置一番。

用于 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 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) 跳转到某一时间（或帧）并停在那。第一个参数(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 文件夹中的例子，或者访问 http://codepen.io/airnan/ 可以看到精彩的演示动画

一些建议

文件

如果你使用了图片资源或者未转成形状图层的 Adobe Illustrator 文件图层, 将会同时生成一个 images 文件夹存放这些图片资源。(我建议将 ai 图层转换为形状图层，这样他们会被导出为矢量数据，只需在 AE 中导入的 ai 图层上右键 > 从矢量图层创建形状) 注意，如果不同的带图片资源的动画导出到同一地址， images 文件夹将会被覆盖。

性能

Bodymovin 的动画都是实时渲染的。虽然经过了大量优化，最好还是控制 AE 工程文件体积在一个必要的值。
更多的优化也正在进行中，但请避免这种情况：绘制了一个巨大的形状图层，但是只通过遮罩使用其中一小部分。
过多的节点同样会影响性能。

帮助

如果你有动画导出失败或者想让我帮你导出, 不要犹豫请告诉我。
我很乐意能找到这个插件的不足之处。
我的邮箱是 hernantorrisi@gmail.com

演示

访问 codepen 查看动画演示

支持的 AE 特性

插件支持预合成、形状图层、固态层、图片、空对象以及文字图层。
支持遮罩和反向遮罩。也许别的模式也会支持，但是会对性能造成巨大影响。
支持时间重映射（是的没错！）。
支持形状图层的形状、矩形、椭圆和星形。
目前只支持滑块效果。
支持部分表达式。更多介绍可以查看这里（英文）
不支持：图像序列、视频和音频 (也许未来会支持)。
不要伸缩图层！不知为何，伸缩图层会破坏导出的数据，所以不要做这个操作。

其他说明

如果你想修改或者解析动画播放器，有一些 gulp 命令可以简化这个操作。
看看这些 codepen 上的优秀作品访问 codepen 作品集
gzip 压缩一下动画 json 数据文件和播放器 js 文件可以有效减少文件体积。如果你用在项目里，我建议你这么做。

翻译了 AE 动效插件 Bodymovin 的项目介绍，将 AE 做的动画导出为 svg/canvas/html + js。