amp-bodymovin-animation

简介

在您的 AMP HTML 文件中嵌入 Bodymovin 动画。amp-bodymovin-animation 组件嵌入一个 AirBnB Bodymovin 动画播放器，该播放器从 Adobe After Effects 生成的 JSON 渲染动画。描述此元素的文档可以在这里找到，此元素支持的操作可以在 AMP 操作和事件页面上的此处找到。

设置

在标题中导入 amp-bodymovin-animation 组件。

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

基本用法

通过 src 属性嵌入 Bodymovin 动画。

<amp-bodymovin-animation layout="fixed" width="200" height="200" src="https://amp.js.cn/static/samples/json/bodymovin_red_circle.json">
</amp-bodymovin-animation>

属性

本节介绍如何根据您的需要自定义 bodymovin 生成的动画。

src - 导出的 Bodymovin 动画对象的路径。必须是 https 协议。
loop - 指示动画是否应循环播放。默认情况下，此属性设置为 true。此属性的值可以是：true、false 或数字值。如果指定了数字，则动画循环播放该数字的次数。
noautoplay - 默认情况下，动画会自动播放。如果添加此属性，则视频会等待操作开始播放。

以下动画仅循环播放五次。

<amp-bodymovin-animation layout="responsive" width="1920" height="1080" src="https://amp.js.cn/static/samples/json/bodymovin_happy_2016.json" loop="5">
</amp-bodymovin-animation>

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户讨论您的具体用例。

转到 Stack Overflow

一个无法解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为自己特别热衷的问题做出一次性贡献。

在 GitHub 上编辑示例

撰写者： @nainar