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 上編輯範例-