Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
ZH
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe

为元素添加动画效果

您可通过向网页中的元素应用入场动画效果来进一步完善 AMP 故事。例如，您可以让标题从左侧飞入、落入网页中、淡入，等等。AMP 故事框架提供了以下预设动画：

动画预设 默认持续时长（毫秒） 默认延迟（毫秒）
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>" 属性，即可探索各种不同的动画效果。

动画时间设置

每个动画预设都内置了以下两项的默认时间值：

  • 延迟：这是指动画会延迟多久才开始播放。例如，如果延迟为 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!
  </div>
</amp-story-page>

为最后一个网页添加动画效果

我们的最后一个 AMP 故事网页由两个图层组成：第一个图层由动物图片拼贴而成，第二个图层展示了一段横幅文本。要创建该网页，请将以下代码添加到上一个故事网页后面：

<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">
      </amp-img>
      <amp-img src="assets/dog.jpg"
          width="720" height="1280"
          layout="responsive">
      </amp-img>
      <amp-img src="assets/bird.jpg"
          width="720" height="1280"
          layout="responsive">
      </amp-img>
      <amp-img src="assets/rabbit.jpg"
          width="720" height="1280"
          layout="responsive">
      </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 故事，然后验证并确保网页能够正确呈现且具有如下显示效果：

看起来不错，但所有内容都是静态的！下面我们就来添加动画效果吧！

首先，让我们为横幅文本添加入场动画效果，使它从网页右侧快速飞入。向 <p> 元素添加 animate-in="whoosh-in-right"，如下所示：

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

在浏览器中重新加载您的故事网页，然后验证并确保该横幅会快速飞入。

接下来，让我们将所有图片都设为淡入。为每个 amp-img 元素分别添加 animate-in="fade-in"；待添加完毕后，代码将会如下所示：

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

此时，如果您刷新并重新加载该网页，则所有图片都会淡入。虽然设置成功了，但这种效果却不易察觉，因为所有图片都是同时淡入的！我们可通过更改这些动画的时间设置来改进视觉效果。

我们将第一张图片的入场时间延迟一下（例如延迟 0.4 秒），使其等到文本横幅的入场行为快要完成时再开始入场。其余 3 张图片可分别比上一张图片晚 0.2 秒再开始入场。为每个 amp-img 元素分别添加 animate-in-delay=""，并设置适当的时间延迟值。待添加完毕后，代码应该会如下所示：

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

刷新并重新加载您的故事。此时，最后一个网页应该会如下所示：

您可以采用诸多形式（例如动画组合、动画链）在 AMP 故事中实现动画效果，本教程只是浅谈则止。若想详细了解动画，请查阅 amp-story 参考文档。

前一章 下一章