为元素添加动画

你可以通过向页面内的元素应用进入动画来进一步增强 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 指令的努力。

动画时序

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

延迟：这是延迟开始动画的时间量。例如，延迟 0.3 秒意味着动画在 0.3 秒后进入页面。延迟 0 秒表示动画立即开始。
时长：这是动画发生的时间量。例如，淡入动画从开始到结束需要 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