动画元素

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

动画预设	默认持续时间 (毫秒)	默认延迟 (毫秒)
`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="<动画预设>"`，其中值之一为动画预设值。例如，要将一些文本掉入页面，请将 `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="<动画预设>"` 属性添加到故事页面的元素上来探索不同的动画效果。

动画可以帮助你的 Web Story 在视觉上更加令人兴奋和引人入胜，但请谨慎使用。某些用户可能会觉得长时间、连续的动画令人分心。其他用户可能对运动敏感，并且会因过度使用运动和视差效果而受到不利影响。此跟踪问题将跟进尊重 `prefers-reduced-motion` 指令的工作。

动画计时

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

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

你可以通过 `animate-in-delay` 和 `animate-in-duration` 属性来更改延迟或持续时间来定制动画的计时。在以下示例中，`my-element` 在 0.3 秒后从页面左侧飞入，并在 0.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 Story 页面由两层组成：第一层是动物图像的拼贴，第二层显示一些横幅文本。要创建此页面，请在之前的故事页面之后添加以下代码

<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 Story，并验证页面是否正确呈现并如下所示

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

我们将从动画横幅文本的入场开始，并使其从页面的右侧“嗖嗖”进入。将 `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>

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

让我们延迟第一个图像的进入，使其在文本横幅完成进入时接近 0.4 秒。其余三个图像可以在前一个图像进入后 0.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 Story 中的动画有很多可能性（例如，组合动画、链接动画），本教程仅触及表面。要了解有关动画的更多信息，请参阅 `amp-story` 参考文档。

撰写者： @bpaduch