肯·伯恩斯

简介

肯·伯恩斯以其在纪录片方面的工作而闻名，他开发了一种标志性效果，该效果由在图像上进行平移和缩放的组合组成。自那以后，它被广泛使用。我们可以通过在 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 秒，但您的使用情况可能会有所不同。尝试使用不同的值，看看什么最适合您想要的结果。

在此容器内，添加一个带有 src 属性指向图像的 <amp-img> 元素，使用 <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 撰写