動畫元素

您可以進一步強化 Web Story，方法是對頁面中的元素套用動畫進入效果。例如，您可以讓標題從左側飛入、掉入頁面或淡入等等。AMP story 框架提供以下預設動畫，可用於 Web Story 中

動畫預設	預設持續時間 (毫秒)	預設延遲時間 (毫秒)
`drop`	1600	0
`fade-in`	500	0
`fly-in-bottom`	500	0
`fly-in-left`	500	0
`fly-in-right`	500	0
`fly-in-top`	500	0
`pulse`	500	0
`rotate-in-left`	700	0
`rotate-in-right`	700	0
`twirl-in`	1000	0
`whoosh-in-left`	500	0
`whoosh-in-right`	500	0
`pan-left`	1000	0
`pan-right`	1000	0
`pan-down`	1000	0
`pan-up`	1000	0
`zoom-in`	1000	0
`zoom-out`	1000	0

若要對元素套用動畫進入效果，您必須使用其中一個動畫預設值指定 animate-in="<animation preset>"。例如，若要讓某些文字掉入頁面，請將 animate-in="drop" 新增至文字元素

<amp-story-page id="page3">
  ...
  <amp-story-grid-layer template="vertical">
    <p animate-in="drop">Drop this text into the page</p>
</amp-story-page>

在您的故事頁面上，將 animate-in="<animation preset>" 屬性新增至元素，即可探索不同的動畫效果。

動畫有助於讓您的 Web Story 在視覺上更令人興奮且更具吸引力，但請謹慎使用。有些使用者可能會覺得長時間、連續的動畫令人分心。其他使用者可能對動態敏感，並且可能因過度使用動態和視差效果而受到負面影響。此追蹤問題追蹤尊重 prefers-reduced-motion 指令的努力。

動畫時序

每個動畫預設都具有內建的預設時間值，適用於

delay：這是延遲動畫開始的時間量。例如，延遲 0.3 秒表示動畫會在 0.3 秒後進入頁面。延遲 0 秒會立即開始動畫。
duration：這是動畫發生的時間量。例如，從開始到結束的淡入動畫需要 500 毫秒。

您可以透過 animate-in-delay 和 animate-in-duration 屬性變更延遲或持續時間，來自訂動畫的時序。在以下範例中，`my-element` 會在 0.3 秒後從頁面左側飛入，並在 0.5 秒內完全飛入

<amp-story-page id="my-page">
  ...
  <p class="my-element"
      animate-in="fly-in-left"
      animate-in-delay="0.3s"
      animate-in-duration="0.5s">
    I'm going to fly into the page from the left!
  </p>
</amp-story-page>

為最後一頁加入動畫效果

我們的最後一個 Web Story 頁面由兩層組成：第一層是動物圖片拼貼，第二層顯示一些橫幅文字。若要建立此頁面，請在先前的故事頁面之後新增下列程式碼

<amp-story-page id="page5">
  <amp-story-grid-layer template="vertical" class="noedge">
    <div class="wrapper">
      <amp-img src="assets/cat.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/dog.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/bird.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/rabbit.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
    </div>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical" class="center-text">
    <p class="banner-text">Pets can lower your stress levels!</p>
  </amp-story-grid-layer>
</amp-story-page>

在瀏覽器中重新載入 AMP story，並確認頁面正確呈現且看起來像這樣

看起來很棒，但一切都是靜態的！讓我們加入動畫效果吧！

我們先從為橫幅文字的進入加入動畫效果開始，並讓它從頁面右側「呼嘯而入」。將 animate-in="whoosh-in-right" 新增至 `<p>` 元素，如下所示

<p class="banner-text"
  animate-in="whoosh-in-right">
Pets can lower your stress levels!</p>

在瀏覽器中重新載入您的故事頁面，並確認橫幅呼嘯而入。

接下來，讓我們讓所有圖片都淡入。將 animate-in="fade-in" 新增至每個 `amp-img` 元素，讓程式碼看起來像這樣

<amp-img src="assets/cat.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/dog.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/bird.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/rabbit.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>

如果您重新整理並重新載入頁面，則每個圖片都會淡入。這很棒，但您幾乎注意不到效果，因為所有圖片都同時淡入！我們可以透過變更這些動畫的時序來改善視覺效果。

讓我們延遲第一個圖片的進入，使其在文字橫幅完成進入時接近進入，例如 0.4 秒。其餘三個圖片可以在前一個圖片進入後 0.2 秒進入。針對每個 `amp-img` 元素，新增具有適當延遲時間值的 animate-in-delay=""。您的程式碼應如下所示

<amp-img src="assets/cat.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="0.4s">
</amp-img>
<amp-img src="assets/dog.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="0.6s">
</amp-img>
<amp-img src="assets/bird.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay=".8s">
</amp-img>
<amp-img src="assets/rabbit.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="1s">
</amp-img>

重新整理並重新載入您的故事。您的最後一頁應如下所示

Web Stories 中的動畫有很多可能性 (例如，結合動畫、鏈結動畫)，而本教學課程僅觸及表面。若要深入瞭解動畫，請參閱 `amp-story` 參考文件。

由 @bpaduch 撰寫