Ken Burns

查看示範在 Playground 中開啟

簡介

肯·伯恩斯因其紀錄片作品而聞名，他開發了一種標誌性特效，包含在影像上平移和縮放的組合。此特效隨後廣為使用。我們可以結合 amp-story 中的「平移」和「縮放」動畫，來達成這種簡單卻引人入勝的效果。以下說明如何操作。

肯·伯恩斯特效

一般概念是巢狀元素會結合動畫：容器元素會產生縮放動畫，而容器內部的影像則會透過平移動畫產生動畫效果。

首先，使用填滿範本建立含有 <amp-story-grid-layer 的 <amp-story-page>。
新增一個 <div> 元素，作為影像容器。將其樣式類別設為 position:absolute。這會確保影像座標對應到視埠的座標，這對動畫來說很重要。
將其動畫設為 animate-in="zoom-in" 或 animate-in="zoom-out"，並使用 "animate-in-duration=30s" 設定其持續時間。

在此示範中，我們使用 30 秒，但您的結果可能會有所不同。請嘗試使用不同的值進行實驗，看看哪種效果最符合您的需求。

在這個容器內，新增一個 <amp-img> 元素，並使用 src 屬性指向您的影像，使用 <amp-img> 元素的 width 和 height 屬性描述影像大小。設定 layout="fixed"，使影像大於螢幕實際大小 (我們想要使用可以平移的大影像。建議使用 1600 x 1200 像素或更大的影像)。
使用 animate-in="pan-right" 為 <amg-img> 元素製作動畫。(您也可以使用 pan-left、pan-up 和 pan-down)。請參閱 amp-story 動畫清單。

重點是影像設定平移動畫，而影像容器設定縮放動畫。否則，影像的尺寸會變更，導致動畫中出現不想要的效果。

動畫可以讓您的 Web Story 更生動有趣且更引人入勝，但請有意識地使用。有些使用者可能會覺得長時間、連續的動畫令人分心。其他使用者可能對動態效果敏感，並且可能因過度使用動態和視差效果而受到不良影響。為了讓內容盡可能方便存取，請讓您的進入動畫保持簡短且連貫。

<amp-story-page id="ken-burns-effect1">
  <amp-story-grid-layer template="fill">
    <div animate-in="zoom-in" animate-in-duration="30s" class="img-container">
      <amp-img id="ken-burns-img1" src="https://picsum.photos/1600/1200?image=1077" animate-in="pan-left" animate-in-duration="30s"
        layout="fixed" width="1600" height="1200" alt="...">
      </amp-img>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

使用多張圖片

您甚至可以使用這種效果實作在多個頁面之間轉換的投影片放映。

只需結合動畫，如結合動畫章節中所述。請記住，在特定動畫之後要製作動畫的所有元素都必須包含 animate-in-after 屬性。包括要製作動畫的子項。請參閱下方的程式碼範例。

我們也會重設巢狀 <div> 元素的大小，使其不會變更用於動畫的尺寸。請參閱程式碼範例中的 img-container 樣式類別。

請記住，結果可能會因影像大小和您使用的動畫而異。請嘗試使用不同的動畫持續時間和預設值，看看您最喜歡哪種效果！

<amp-story-page id="ken-burns-effect2">
  <amp-story-grid-layer template="fill">
    <div animate-in="zoom-in" animate-in-duration="5s" class="img-container">
      <amp-img id="ken-burns-img2" src="https://picsum.photos/1600/1200?image=1078" animate-in="pan-right" animate-in-duration="5s"
        layout="fixed" width="1600" height="1200" alt="...">
      </amp-img>
    </div>
    <div animate-in="fade-in" animate-in-after="ken-burns-img2" animate-in-duration="1s" class="img-container">
      <div animate-in="zoom-out" animate-in-duration="5s" class="img-container" animate-in-after="ken-burns-img2">
        <amp-img id="ken-burns-img3" src="https://picsum.photos/1600/1200?image=1026" layout="fixed" width="1600" height="1200" animate-in="pan-down"
          animate-in-duration="5s" animate-in-after="ken-burns-img2" alt="...">
        </amp-img>
      </div>
    </div>
    <div animate-in="fade-in" animate-in-after="ken-burns-img3" animate-in-duration="1s" class="img-container">
      <div animate-in="zoom-in" animate-in-duration="5s" class="img-container" animate-in-after="ken-burns-img3">
        <amp-img id="ken-burns-img4" src="https://picsum.photos/1600/1200?image=1029" layout="fixed" width="1600" height="1200" animate-in="pan-right"
          animate-in-duration="5s" animate-in-after="ken-burns-img3" alt="...">
        </amp-img>
      </div>
    </div>
    <div animate-in="fade-in" animate-in-after="ken-burns-img4" animate-in-duration="1s" class="img-container">
      <div animate-in="zoom-out" animate-in-duration="5s" class="img-container" animate-in-after="ken-burns-img4">
        <amp-img id="ken-burns-img5" src="https://picsum.photos/1600/1200?image=1033" layout="fixed" width="1600" height="1200" animate-in="pan-up"
          animate-in-duration="5s" animate-in-after="ken-burns-img4" alt="...">
        </amp-img>
      </div>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

如果您想要每個影像的移動速度較慢，且不想要等待第一個影像完成動畫後才開始為第二個影像製作動畫，則可以在第二個影像上使用 animate-in-delay 屬性。將其設定為您希望第一個影像在第二個影像出現之前顯示的秒數。

<amp-story-page id="ken-burns-effect3">
  <amp-story-grid-layer template="fill">
    <div>
      <div animate-in="zoom-in" animate-in-duration="30s" class="img-container">
        <amp-img src="https://picsum.photos/1600/1200?image=1078" animate-in="pan-right" animate-in-duration="30s" layout="fixed"
          width="1600" height="1200" alt="...">
        </amp-img>
      </div>
      <div animate-in="fade-in" animate-in-delay="5s" animate-in-duration="1s" class="img-container">
        <div animate-in="zoom-out" animate-in-duration="30s" class="img-container" animate-in-delay="5s">
          <amp-img src="https://picsum.photos/1600/1200?image=1026" layout="fixed" width="1600" height="1200" animate-in="pan-up" animate-in-duration="30s"
            animate-in-delay="5s" alt="...">
          </amp-img>
        </div>
      </div>
      <div animate-in="fade-in" animate-in-delay="10s" animate-in-duration="1s" class="img-container">
        <div animate-in="zoom-out" animate-in-duration="30s" class="img-container" animate-in-delay="10s">
          <amp-img src="https://picsum.photos/1600/1200?image=1029" layout="fixed" width="1600" height="1200" animate-in="pan-right"
            animate-in-duration="30s" animate-in-delay="10s" alt="...">
          </amp-img>
        </div>
      </div>
      <div animate-in="fade-in" animate-in-delay="15s" animate-in-duration="1s" class="img-container">
        <div animate-in="zoom-out" animate-in-duration="30s" class="img-container" animate-in-delay="15s">
          <amp-img src="https://picsum.photos/1600/1200?image=1033" layout="fixed" width="1600" height="1200" animate-in="pan-left"
            animate-in-duration="30s" animate-in-delay="15s" alt="...">
          </amp-img>
        </div>
      </div>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

需要進一步說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

不明功能？

AMP 專案強烈鼓勵您參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性的貢獻。

在 GitHub 上編輯範例

作者： @Enriqe