肯·伯恩斯

檢視示範在 Playground 中開啟

簡介

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

肯·伯恩斯效果

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

首先使用填滿範本建立 <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 撰寫