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 圖片的網址。

srcset

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

alt

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

attribution

指出圖片的歸屬。例如，attribution="CC courtesy of Cats on Flicker"。

width 和 height

提供圖片的明確尺寸。

通用屬性

amp-anim 包含擴充至 AMP 元件的通用屬性。

樣式設定

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

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

驗證

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