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 (選填)

支援多個 轉譯器，而且可以指定

• canvas (畫布)
• html
• svg (預設)

title (選填)

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

通用屬性

此元素包含擴充至 AMP 元件的通用屬性。

動作

play (播放)

播放動畫。

pause (暫停)

暫停動畫。

stop (停止)

停止動畫。

seekTo(time=INTEGER) (跳轉至 (time=整數))

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

seekTo(percent=[0,1]) (跳轉至 (百分比=[0,1]))

使用指定的百分比值來決定動畫的 currentTime 為指定值並暫停動畫。

驗證

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