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.org.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.org.cn/static/samples/json/bodymovin_happy_2016.json" loop="5">
</amp-bodymovin-animation>

需要进一步解释？

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

转到 Stack Overflow

一个无法解释的功能？

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

在 GitHub 上编辑示例

作者： @nainar