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"> 標記，並加上包含 JSON 設定的子項 <script type="application/json">，以描述您的動畫。在以下範例中，「自訂動畫」文字將使用 <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

說明

必要指令碼

相關資源