">文档:<amp-anim> - amp.dev - AMP 框架
AMP

amp-anim

描述

管理动画图像,通常是 GIF。

 

必需脚本

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

示例

用法

amp-anim 组件以优化的 CPU 管理方式显示 GIF 动画。

amp-anim 组件允许 AMP 框架在动画处于屏幕外时减少其在动画上花费的资源。否则,amp-anim 的行为与 amp-img 相同。你可以实现一个 占位符 元素以进一步优化 amp-anim

<amp-anim width="400" height="300" src="my-gif.gif">
  <amp-img placeholder width="400" height="300" src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

属性

src

指定 GIF 图片的 URL。

alt

提供一个备用文本字符串以实现辅助功能。与 img 标签上的 alt 属性 具有相同的功能。

attribution

表示图片的归属。例如,attribution="CC courtesy of Cats on Flicker"

widthheight

提供图片的显式大小。

通用属性

amp-anim 包含扩展到 AMP 组件的 通用属性

样式

你可以使用 CSS 属性直接对 amp-anim 进行样式设置。以下示例设置了一个灰色背景占位符

<style amp-custom>
  .amp-anim {
      background-color: grey;
  }
</style>

验证

请参阅 AMP 验证器规范中的 amp-anim 规则

需要更多帮助?

你已经阅读了本文档十几次,但它并没有真正涵盖你所有的问题?也许其他人也有同感:在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现了一个错误或缺少一个功能?

AMP 项目强烈鼓励你的参与和贡献!我们希望你成为我们开源社区的持续参与者,但我们也欢迎针对你特别热衷的问题进行一次性贡献。

转到 GitHub