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 组件的通用属性。

操作

play

播放动画。

pause

暂停动画。

stop

停止动画。

seekTo(time=整数)

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

seekTo(percent=[0,1])

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

验证

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