肯·伯恩斯

查看演示在 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 撰写