amp-bodymovin-animation
簡介
在您的 AMP HTML 檔案中嵌入 Bodymovin 動畫。amp-bodymovin-animation 元件嵌入 AirBnB Bodymovin 動畫播放器，此播放器會從 Adobe After Effects 產生的 JSON 呈現動畫。描述此元素的文件可在此處找到，而此元素支援的動作可在 AMP 動作和事件頁面此處找到。
設定
在標頭中匯入 amp-bodymovin-animation 元件。
<script async custom-element="amp-bodymovin-animation" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-0.1.js"></script>
基本用法
透過 src 屬性嵌入 Bodymovin 動畫。
<amp-bodymovin-animation layout="fixed" width="200" height="200" src="https://amp.dev.org.tw/static/samples/json/bodymovin_red_circle.json">
</amp-bodymovin-animation>
屬性
本節說明如何自訂 bodymovin 產生的動畫以符合您的需求。
src- 匯出的 Bodymovin 動畫物件的路徑。必須為https通訊協定。loop- 指出動畫是否應循環播放。預設情況下，此屬性設定為true。此屬性的值可以是：true、false或數字值。如果指定數字，動畫會循環播放該次數。noautoplay- 預設情況下，動畫會自動播放。如果新增此屬性，影片會等待動作開始播放。
以下動畫只會循環播放五次。
<amp-bodymovin-animation layout="responsive" width="1920" height="1080" src="https://amp.dev.org.tw/static/samples/json/bodymovin_happy_2016.json" loop="5">
</amp-bodymovin-animation>
需要更詳細的說明嗎？
如果本頁的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。
前往 Stack Overflow 未說明的特色功能？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別關注的問題提供一次性的貢獻。
在 GitHub 上編輯範例-