amp-bodymovin-animation

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

用法

<amp-bodymovin-animation> 元件會嵌入 AirBnB Bodymovin 動畫播放器，此播放器會從 Adobe After Effects 產生的 JSON 檔案中呈現動畫。

width 和 height 屬性決定嵌入於回應式版面配置中動畫的長寬比。

<amp-bodymovin-animation
  layout="fixed"
  width="200"
  height="200"
  src="https://nainar.github.io/loader.json"
  loop="5"
>
</amp-bodymovin-animation>

屬性

src

匯出的 Bodymovin 動畫物件的路徑。必須為 https 協定。

loop (選填)

指出動畫是否應循環播放。預設情況下，此屬性設定為 true。此屬性的值可以是：true、false 或數字值。如果指定數字，動畫會循環播放該次數。

noautoplay (選填)

預設情況下，動畫會自動播放。如果新增此屬性，影片會等到有動作觸發才開始播放。

renderer (選填)

支援多個 renderer (渲染器)，且可以指定

• canvas
• html
• svg (預設)

title (選填)

為元件定義 title 屬性，以傳遞至底層的 <iframe> 元素。預設值為 "Airbnb BodyMovin animation"。

通用屬性

此元素包含 通用屬性，這些屬性已擴充至 AMP 元件。

動作

播放

播放動畫。

暫停

暫停動畫。

停止

停止動畫。

seekTo(time=INTEGER)

將動畫的 currentTime 設定為指定值，並暫停動畫。

seekTo(percent=[0,1])

使用指定的百分比值來判斷動畫的 currentTime，並將其設定為指定值，然後暫停動畫。

驗證

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