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。

在 AMP 電子郵件中，src 必須指向絕對的 https URL。 在電子郵件中使用 amp-anim 不允許使用以下屬性

• srcset
• object-fit
• object-position

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 規則。