Lottie (网页版)

在网页上原生渲染 After Effects 动画
24,399
作者Lottie团队

Lottie 网页版

Lottie 是一个适用于网页、Android 和 iOS 的移动端库，它解析使用 Adobe After Effects 导出为 json 格式的动画（通过 Bodymovin），并在移动端原生渲染它们！

设计师们第一次可以创建并发布精美的动画，而无需工程师费力地手动重新创建。俗话说，一图胜千言，这里有 13000 字的解读。

查看文档、常见问题解答、帮助、示例等内容，请访问 airbnb.io/lottie

Example1

Example2

Example3

Community

Example4

插件安装

方法 1（推荐）

从 aescripts + aeplugins 下载： http://aescripts.com/bodymovin/

方法 2

或从 Adobe 商店获取： https://creative.adobe.com/addons/products/12557 CC 2014 及更高版本。

其他安装方法

方法 3

  • 从代码库下载 ZIP 文件。
  • 解压内容，从 '/build/extension' 获取 .zxp 文件。
  • 使用 aescripts.com 提供的 ZXP 安装程序。

方法 4

  • 关闭 After Effects。

  • 将压缩文件解压到 `build/extension/bodymovin.zxp` ，然后复制到 Adobe 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 YOURUNZIPEDFOLDERPATH/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` 的项，类型为字符串，值为 `1`。
    Mac
    打开文件 `~/Library/Preferences/com.adobe.CSXS.6.plist` 并添加一行，键名为 `PlayerDebugMode`，类型为字符串，值为 `1`。

方法 5

按照此处的说明手动安装 zxp：https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html 直接跳到“安装第三方扩展”。

方法 6

使用 Homebrew-adobe 安装

brew tap danielbayley/adobe
brew cask install lottie

安装后

  • Windows：转到编辑 > 首选项 > 常规 > 并选中“允许脚本写入文件并访问网络”。
  • Mac：转到 Adobe After Effects > 首选项 > 常规 > 并选中“允许脚本写入文件并访问网络”。

HTML 播放器安装

# with npm
npm install lottie-web

# with bower
bower install bodymovin

或者您可以使用此处的脚本文件：https://cdnjs.com/libraries/bodymovin 或者直接从 AE 插件中点击“获取播放器”。

演示

在此处查看基本实现。

示例

在 CodePen 上查看示例。

工作原理

这里是一个视频教程，解释如何导出基本动画并在 HTML 页面中加载它。

After Effects

  • 打开您的 AE 项目，然后在窗口 > 扩展 > bodymovin 中选择 bodymovin 扩展。
  • 将打开一个面板，其中包含一个列出所有项目组合的“组合”选项卡。
  • 选择要导出的组合。
  • 选择目标文件夹。
  • 点击渲染。
  • 查找导出的 json 文件（如果您在动画中使用了图像或 AI 图层，则将有一个包含导出文件的 images 文件夹）。

HTML

  • 从 build/player/ 文件夹获取最新的 lottie.js 文件。

  • 在您的 html 中包含 .js 文件（记住为生产环境 gzip 压缩它）。

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

    您可以调用 lottie.loadAnimation() 来启动动画。它采用一个对象作为唯一参数，其中包含：

  • animationData：包含导出动画数据的对象。
  • path：动画对象的相对路径。（animationData 和 path 互斥）
  • loop：true / false / 数字
  • autoplay：true / false，它将在准备好后立即开始播放
  • name：动画名称，供日后参考
  • renderer：'svg' / 'canvas' / 'html' 用于设置渲染器
  • container：用于渲染动画的 DOM 元素

它返回您可以使用 play、pause、setSpeed 等方法控制的动画实例。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

组合设置

查看此 wiki 页面以了解每个设置的说明。https://github.com/airbnb/lottie-web/wiki/Composition-Settings

用法

动画实例具有以下主要方法：

play

stop

pause

setLocationHref(href)

  • href：通常传递为 `location.href`。当您在 Safari 中遇到蒙版问题（您的 url 没有 `#` 符号）时，它非常有用。

setSpeed(speed)

  • speed：1 为正常速度。

goToAndStop(value, isFrame)

  • value：数值。
  • isFrame：定义第一个参数是基于时间的值还是基于帧的值（默认为 false）。

goToAndPlay(value, isFrame)

  • value：数值。
  • isFrame：定义第一个参数是基于时间的值还是基于帧的值（默认为 false）。

setDirection(direction)

  • direction：1 为正向，-1 为反向。

playSegments(segments, forceFlag)

  • segments：数组。可以包含 2 个数值，用作动画的第一帧和最后一帧。或者可以包含一系列数组，每个数组包含 2 个数值。

  • forceFlag：布尔值。如果设置为 false，它将等到当前片段完成。如果设置为 true，它将立即更新值。

    setSubframe(useSubFrames)

  • useSubFrames：如果为 false，则将遵循原始 AE fps。如果为 true，则将在每个 requestAnimationFrame 更新中间值。默认为 true。

    destroy()

    getDuration(inFrames)

  • inFrames：如果为 true，则以帧为单位返回持续时间；如果为 false，则以秒为单位返回持续时间。

其他方法

  • updateTextDocumentData -- 更新文本图层的数据 更多信息

Lottie 有 8 个全局方法，将影响所有动画：

lottie.play() -- 可选参数 name 用于指定目标动画
lottie.stop() -- 可选参数 name 用于指定目标动画
lottie.setSpeed() -- 第一个参数为速度（1 为正常速度）-- 可选参数 name 用于指定目标动画
lottie.setDirection() -- 第一个参数为方向（1 为正常方向）-- 可选参数 name 用于指定目标动画
lottie.searchAnimations() -- 查找具有类 "lottie" 或 "bodymovin" 的元素
lottie.loadAnimation() -- 如上所述。返回一个动画实例以单独控制。
lottie.destroy() -- 用于销毁并释放资源。DOM 元素将被清空。
lottie.registerAnimation() -- 您可以使用 registerAnimation 直接注册元素。它必须具有指向 data.json url 的 "data-animation-path" 属性。
lottie.setQuality() -- 默认值为 'high'，设置为 'high'、'medium'、'low' 或大于 1 的数字以提高播放器性能。在某些动画中，低至 2 也看不到任何区别。

活动

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

您还可以使用 addEventListener 使用以下事件：

  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready（初始配置完成时）
  • data_ready（动画的所有部分都加载完毕时）
  • data_failed（动画的部分无法加载时）
  • loaded_images（所有图像加载都成功或失败时）
  • DOMLoaded（元素已添加到 DOM 时）
  • destroy

其他加载选项

  • 如果您想使用现有画布进行绘制，您可以传递一个额外的对象：'rendererSettings'，其中包含以下配置。

    lottie.loadAnimation({
container: element, // the dom element
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData, // the animation data
rendererSettings: {
context: canvasContext, // the canvas context
scaleMode: 'noScale',
clearCanvas: false,
progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
className: 'some-css-class-name'
}
});

    这样做，您将必须在每一帧后处理画布的清除。
    另一种加载动画的方法是向 dom 元素添加特定属性。您必须包含一个 div 并将其类设置为“lottie”。如果您在页面加载前执行此操作，它将自动搜索所有具有类“lottie”的标签。或者您可以在页面加载后调用 `lottie.searchAnimations()`，它将搜索所有具有类“lottie”的元素。

  • 将 data.json 添加到相对于 html 的文件夹中。
  • 创建一个将包含动画的 div。

  • 必需

    • 名为“lottie”的类
    • 具有 data.json 相对路径的“data-animation-path”属性

  • 可选

    • 一个“data-anim-loop”属性
    • 一个“data-name”属性，用于指定一个名称以专门定位播放控件

示例

 <div style="width:1067px;height:600px"  class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>

预览

您可以预览或获取动画的 svg 快照以用作海报。渲染动画后，您可以获取动画中任何帧的快照并将其保存到磁盘。我建议您将 svg 通过 svg 优化器（如 https://jakearchibald.github.io/svgomg/）处理，并尝试调整其设置。

建议

文件

如果您有任何尚未转换为形状的图像或 AI 图层（我建议您将它们转换为形状，以便它们作为矢量导出，右键单击每个图层并执行：“从矢量图层创建形状”），它们将保存到相对于目标 json 文件夹的 images 文件夹中。注意不要覆盖同一位置上的现有文件夹。

性能

这是实时渲染。虽然它已经过很好的优化，但如果您将 AE 项目保持在必要范围内，总是有帮助的。
更多优化正在进行中，但请尽量不要在 AE 中使用巨大的形状来仅仅遮罩其一小部分。
过多的节点也会影响性能。

帮助

如果您有任何无法工作的动画，或者希望我导出它们，请随时联系我。
我非常有兴趣了解该插件存在哪些问题。
我的邮箱是 hernantorrisi@gmail.com

AE 功能支持

  • 该脚本支持预组合、形状、纯色、图像、空对象、文本。
  • 它支持蒙版和反向蒙版。也许其他模式也会出现，但它会严重影响性能。
  • 它支持时间重新映射。
  • 该脚本支持形状、矩形、椭圆和星形。
  • 表达式。查看 wiki 页面以获取 更多信息。
  • 不支持：图像序列、视频和音频不受支持。
  • 不支持负图层拉伸！不知道为什么，但是拉伸图层会弄乱所有数据。

开发

首先 `npm install` 或 `bower install`，然后 `npm start`

备注

  • 如果您想修改解析器或播放器，有一些 gulp 命令可以简化任务。
  • 查看 CodePen 上导出的精彩动画 在 CodePen 上查看示例。
  • 对动画 json 和播放器进行 gzip 压缩可以大幅减少文件大小。如果您将其用于项目，我建议这样做。

问题

  • 对于 Safari 浏览器中缺少蒙版的问题，请在生成动画之前调用 anim.setLocationHref(locationHref)。这通常是由 html 中使用 base 标签引起的。（请参阅以上 setLocationHref 的描述）
链接