肯·伯恩斯

查看演示在 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 故事更具视觉吸引力和吸引力，但请有目的地使用它们。一些用户可能会觉得长时间、连续的动画会分散注意力。其他用户可能对运动敏感，并且会受到过度使用运动和视差效果的不利影响。为了使内容尽可能易于访问，请保持进入动画简短且有凝聚力。

<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 编写