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