amp-anim

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

用法

amp-anim 元件顯示 GIF 動畫，並具有最佳化的 CPU 管理。

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。

srcset

指定在不同情況下使用的圖片 URL。 與 img 標籤上的 srcset 屬性 運作方式相同。

alt

提供替代文字字串，以實現無障礙功能。 與 img 標籤上的 alt 屬性 運作方式相同。

attribution

指示圖片的來源。例如：attribution="CC 授權，圖片來自 Flicker 上的 Cats"。

width 和 height

提供圖片的明確大小。

通用屬性

amp-anim 包含 通用屬性，這些屬性已擴展到 AMP 元件。

樣式

您可以使用 CSS 屬性直接設定 amp-anim 的樣式。以下範例設定了灰色的背景預留位置：

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

驗證

請參閱 AMP 驗證器規格中的 amp-anim 規則。