元素动画

你可以通过为页面内的元素应用动画入场效果来进一步增强 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="<动画预设>"` 属性添加到你的 story 页面上的元素，来探索不同的动画效果。

动画可以帮助使你的 Web Story 更具视觉冲击力和吸引力，但请谨慎使用。一些用户可能会发现长时间的持续动画令人分心。其他用户可能对运动敏感，并会受到过度使用运动和视差效果的不良影响。此跟踪问题旨在尊重 `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 Story 页面由两个图层组成：第一个图层是动物图像的拼贴画，第二个图层显示一些横幅文本。要创建此页面，请在你的前一个 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>

在浏览器中重新加载你的 story 页面，并验证横幅是否嗖地一声进入。

接下来，让我们使所有图像淡入。将 `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>

刷新并重新加载你的 story。你的最后一页应如下所示

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

作者： @bpaduch