元素動畫

您可以為 Web Story 頁面中的元素套用動畫進場效果，進一步強化 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="<動畫預設效果>"。舉例來說，如要讓文字掉入頁面，請將 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>

在您的 story 頁面元素中新增 animate-in="<動畫預設效果>" 屬性，探索不同的動畫效果。

動畫有助於讓您的 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 頁面包含兩個圖層：第一個圖層是動物圖片拼貼，第二個圖層則顯示一些橫幅文字。如要建立這個頁面，請在前一個 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>

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

接下來，我們讓所有圖片都淡入。將 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>

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

Web Story 中的動畫有許多可能性 (例如，合併動畫、串連動畫)，而本教學課程僅觸及皮毛。如要進一步瞭解動畫，請參閱 amp-story 參考文件。

作者： @bpaduch