相關資源

amp-story-animation

說明

用於在 amp-story 中設定自訂動畫的元件。

必要腳本

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

如果需要在預設設定之外使用動畫，可以使用 <amp-story-animation> 元件設定自訂動畫。它讓您可以在 Web Story 內建立 <amp-animation> 類型的動畫。

若要使用此元件，請在您的 <amp-story-page> 下新增 <amp-story-animation layout="nodisplay" trigger="visibility"> 標籤，並包含一個子標籤 <script type="application/json">，其中包含描述動畫的 JSON 設定。在以下範例中，"Custom animation" 文字將使用 <amp-story-animation> 中的 json 設定進行動畫處理

...
      <amp-story-page id="cover">
        <amp-story-grid-layer template="vertical">
          <strong class="custom-animation">Custom animation</strong>
        </amp-story-grid-layer>

        <amp-story-animation layout="nodisplay" trigger="visibility">
          <script type="application/json">
            {
              "selector": ".custom-animation",
              "duration": "1s",
              "easing": "ease-in-out",
              "keyframes": [
                {"transform": "translateY(10px)", "opacity": 0},
                {"transform": "translateY(-5px)", "opacity": 1},
                {"transform": "translateX(0)"}
              ]
            }
          </script>
        </amp-story-animation>
      </amp-story-page>

需要更多協助嗎？

您已經讀過這份文件很多次，但它仍然沒有涵蓋您的所有問題嗎？也許其他人也有相同的感受：請在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能嗎？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的長期參與者，但我們也歡迎您針對您特別關注的問題做出一次性的貢獻。

前往 GitHub

amp-story-animation

說明

必要腳本

相關資源