肯·伯恩斯

查看示範在 Playground 中開啟

簡介

肯·伯恩斯以其紀錄片作品聞名，他開發了一種標誌性效果，包含在影像上進行平移和縮放的組合。此後，這種效果被廣泛使用。我們可以透過在 amp-story 中結合「平移」和「縮放」動畫來實現這種簡單但引人入勝的效果。以下是如何做到這一點。

肯·伯恩斯效果

一般概念是巢狀元素來結合動畫：容器元素將動畫縮放，而容器內的影像將動畫平移。

首先，使用 fill 範本建立一個 <amp-story-page>，其中包含 <amp-story-grid-layer。
新增一個 <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 撰寫