元素動畫效果

您可以為網頁故事中的元素套用動畫進場效果，進一步強化網頁故事。例如，您可以讓標題從左側飛入，或掉入網頁中，或淡入等等。AMP 故事架構提供下列預設動畫，可用於網頁故事中

動畫預設效果	預設持續時間 (毫秒)	預設延遲時間 (毫秒)
`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>

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

動畫有助於讓您的網頁故事在視覺上更為生動有趣且引人入勝，但請謹慎使用。部分使用者可能會覺得長時間、持續的動畫令人分心。其他使用者可能對動態效果較為敏感，過度使用動態和視差效果可能會對他們造成不良影響。這個追蹤問題會追蹤尊重 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>

為最後一頁加入動畫效果

我們的最後一個網頁故事頁面包含兩個圖層：第一個圖層是動物圖片拼貼，第二個圖層顯示一些橫幅文字。若要建立這個頁面，請在您前一個故事頁面之後新增下列程式碼

<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 故事，並確認網頁正確轉譯且外觀如下

看起來很棒，但所有內容都是靜態的！讓我們加入動畫效果！

我們先從橫幅文字的進場動畫開始，讓它從網頁右側「嗖地飛入」。將 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>

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

網頁故事中的動畫有很多可能性 (例如，結合動畫、串連動畫)，而本教學課程僅觸及皮毛。如要進一步瞭解動畫，請參閱 amp-story 參考說明文件。

作者： @bpaduch