amp-bodymovin-animation

<script async custom-element="amp-bodymovin-animation" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-0.1.js"></script>

用法

<amp-bodymovin-animation> 组件嵌入一个 AirBnB Bodymovin 动画播放器，该播放器渲染一个由 Adobe After Effects 生成的 JSON 动画。

width 和 height 属性确定嵌入在响应式布局中的动画的纵横比。

<amp-bodymovin-animation
  layout="fixed"
  width="200"
  height="200"
  src="https://nainar.github.io/loader.json"
  loop="5"
>
</amp-bodymovin-animation>

属性

src

导出 Bodymovin 动画对象的路径。必须为 https 协议。

loop（可选）

指示动画是否应循环播放。默认情况下，此属性设置为 true。此属性的值可以是：true、false 或一个数字值。如果指定了一个数字，则动画循环播放该次数。

noautoplay（可选）

默认情况下，动画自动播放。如果添加此属性，则视频将等待操作开始播放。

renderer（可选）

支持并可以指定多个 渲染器

• canvas
• html
• svg（默认）

title（可选）

为组件定义一个 title 属性以传播到底层的 <iframe> 元素。默认值为 "Airbnb BodyMovin animation"。

通用属性

此元素包括扩展到 AMP 组件的 通用属性。

操作

播放

播放动画。

暂停

暂停动画。

停止

停止动画。

seekTo(time=INTEGER)

将动画的 currentTime 设置为指定值并暂停动画。

seekTo(percent=[0,1])

使用给定的百分比值确定动画的 currentTime 并暂停动画。

验证

请参阅 AMP 验证器规范中的 amp-bodymovin-animation 规则。