动画元素

您可以通过将动画入场效果应用于页面内的元素来进一步增强 Web 故事。例如，您可以让标题从左侧飞入，或掉入页面，或淡入等等。AMP 故事框架提供了以下预设动画，可在 Web 故事中使用

动画预设	默认持续时间（毫秒）	默认延迟（毫秒）
`drop（掉落）`	1600	0
`fade-in（淡入）`	500	0
`fly-in-bottom（从底部飞入）`	500	0
`fly-in-left（从左侧飞入）`	500	0
`fly-in-right（从右侧飞入）`	500	0
`fly-in-top（从顶部飞入）`	500	0
`pulse（脉冲）`	500	0
`rotate-in-left（从左侧旋转进入）`	700	0
`rotate-in-right（从右侧旋转进入）`	700	0
`twirl-in（旋转进入）`	1000	0
`whoosh-in-left（从左侧嗖嗖进入）`	500	0
`whoosh-in-right（从右侧嗖嗖进入）`	500	0
`pan-left（向左平移）`	1000	0
`pan-right（向右平移）`	1000	0
`pan-down（向下平移）`	1000	0
`pan-up（向上平移）`	1000	0
`zoom-in（放大）`	1000	0
`zoom-out（缩小）`	1000	0

要将动画入场效果应用于元素，您必须指定 animate-in="<animation preset>"，并使用其中一个动画预设值。例如，要将一些文本掉入页面，请将 animate-in="drop" 添加到文本元素

<amp-story-page id="page3">
  ...
  <amp-story-grid-layer template="vertical">
    <p animate-in="drop">Drop this text into the page</p>
</amp-story-page>

通过将 animate-in="<animation preset>" 属性添加到故事页面上的元素，探索不同的动画效果。

动画可以帮助使您的 Web 故事更具视觉吸引力和吸引力，但请谨慎使用它们。一些用户可能会觉得长而连续的动画分散注意力。其他用户可能对运动敏感，并且会因过度使用运动和视差效果而受到不利影响。此跟踪问题旨在遵守 prefers-reduced-motion 指令。

动画计时

每个动画预设都有一个内置的默认时间值，用于

delay（延迟）：这是延迟启动动画的时间量。例如，延迟 .3 秒意味着动画在 .3 秒后进入页面。延迟 0 秒意味着立即启动动画。
duration（持续时间）：这是动画发生的时间量。例如，从开始到结束的淡入动画需要 500 毫秒。

您可以通过 animate-in-delay 和 animate-in-duration 属性更改延迟或持续时间来自定义动画的计时。在以下示例中，my-element 在 .3 秒后从页面左侧飞入，并在 .5 秒内完全飞入

<amp-story-page id="my-page">
  ...
  <p class="my-element"
      animate-in="fly-in-left"
      animate-in-delay="0.3s"
      animate-in-duration="0.5s">
    I'm going to fly into the page from the left!
  </p>
</amp-story-page>

为最后一页添加动画

我们最后一页 Web 故事由两层组成：第一层是动物图像拼贴，第二层显示一些横幅文本。要创建此页面，请在上一个故事页面之后添加以下代码

<amp-story-page id="page5">
  <amp-story-grid-layer template="vertical" class="noedge">
    <div class="wrapper">
      <amp-img src="assets/cat.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/dog.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/bird.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/rabbit.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
    </div>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical" class="center-text">
    <p class="banner-text">Pets can lower your stress levels!</p>
  </amp-story-grid-layer>
</amp-story-page>

在浏览器中重新加载 AMP 故事，并验证页面是否正确渲染，并且看起来像这样

它看起来很棒，但一切都是静态的！让我们添加动画！

我们将首先为横幅文本的入场添加动画，使其从页面右侧“嗖嗖进入”。将 animate-in="whoosh-in-right" 添加到 <p> 元素，如下所示

<p class="banner-text"
  animate-in="whoosh-in-right">
Pets can lower your stress levels!</p>

在浏览器中重新加载您的故事页面，并验证横幅是否嗖嗖进入。

接下来，让我们让所有图像淡入。将 animate-in="fade-in" 添加到每个 amp-img 元素，使代码如下所示

<amp-img src="assets/cat.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/dog.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/bird.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/rabbit.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>

如果您刷新并重新加载页面，则每个图像都会淡入。这很棒，但您几乎注意不到效果，因为所有图像都同时淡入！我们可以通过更改这些动画的计时来改善视觉效果。

让我们延迟第一张图像的入场，使其在文本横幅完成进入时（即 .4 秒左右）进入。其余三张图像可以在上一张图像入场后 .2 秒进入。对于每个 amp-img 元素，添加 animate-in-delay="" 并使用适当的延迟时间值。您的代码应如下所示

<amp-img src="assets/cat.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="0.4s">
</amp-img>
<amp-img src="assets/dog.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="0.6s">
</amp-img>
<amp-img src="assets/bird.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay=".8s">
</amp-img>
<amp-img src="assets/rabbit.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="1s">
</amp-img>

刷新并重新加载您的故事。您的最后一页应该看起来像这样

Web 故事中的动画有很多可能性（例如，组合动画、链接动画），本教程仅略微涉及。要了解有关动画的更多信息，请参阅 amp-story 参考文档。

由 @bpaduch 撰写