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 相同。您可以實作 placeholder 元素，以進一步最佳化 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"。

width 和 height

提供圖片的明確尺寸。

通用屬性

amp-anim 包含延伸至 AMP 元件的 通用屬性。

樣式設定

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

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

驗證

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