Build with Gemini, our largest and most capable AI model. Get an API key.

此页面由 Cloud Translation API 翻译。

美观的互动式 AMP 网页

AMP 可让您更轻松地构建可靠、快速且高性能的网页。借助 AMP，您无需编写 JavaScript 即可创建常见的网站互动。amp.dev 网站包含预设计的快速入门模板。

构建内容

在此 Codelab 中，您将构建一个能够完全响应、美观的 AMP 网页，其中包含许多 AMP 功能和扩展组件：

自适应导航
全屏主打图片
自适应图片
带自动播放功能的视频
Instagram 等嵌入内容
操作和选择器
与 amp-bind 进行数据绑定
使用 amp-fx-collection 和 amp-animation 实现视觉效果

所需条件

现代网络浏览器
Node.js 和文本编辑器或者访问 CodePen 或类似的在线游乐场
具备 HTML、CSS、JavaScript 和 Google Chrome 开发者工具的基础知识

用于提供内容的工具

我们将使用 Node.js 运行本地 HTTP 服务器，以提供我们的 AMP 网页。请访问 Node.js 网站了解如何安装。

我们选择在本地提供内容的工具是 serve，一种基于 Node.js 的静态内容服务器。如需进行安装，请运行以下命令：

npm install -g serve

从 amp.dev 下载模板

AMP 模板是快速入门 AMP 模板和组件的存储库，可帮助您快速创建现代自适应 AMP 网页。

请访问 AMP 模板，并下载适用于“年度最佳动物照片”模板的“简单文章”的代码。

运行模板代码

解压 ZIP 文件的内容。

在 article 文件夹中运行 serve 命令以在本地提供文件。

在浏览器中访问 http://localhost:5000/template/article.amp.html。（端口可能会是 3000 或不同的数字，具体取决于 serve 的版本。请在控制台上查看确切的地址。）

在我们打开期间，我们打开 Chrome 开发者工具并切换 Device 模式。

剪裁模板代码

至此，我们已经完成了大部分都可正常运行的 AMP 网页的构建工作，但此 Codelab 的目的是供您学习和练习，因此...

删除 <body></body> 内的所有内容。

现在，我们得到一个只包含一些样板代码的空页面：

在此 Codelab 中，您将向此空白页面添加很多组件，为其中的部分部分重新创建了更多功能。

AMP 网页是一个包含额外代码的 HTML 网页，并且存在一些限制，以实现可靠的性能。

虽然 AMP 网页中的大多数代码都是常规 HTML 代码，但是有些 HTML 代码会被替换为 AMP 专用代码。这些自定义元素称为 AMP HTML 组件，能够轻松高效地实现常用模式。

最简单的 AMP HTML 文件如下所示（有时称为 AMP 样板）：

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

请查看您在设置过程中创建的空白页的代码，其中有此样板并包含一些新增内容，重要的是包含大量已压缩 CSS 的 <style amp-custom> 标记。

AMP 不支持设计，因此不会强制使用一组特定样式。大多数 AMP 组件都具有非常基本的样式。网页作者需要提供自己的自定义 CSS。这时候<style amp-custom>就能派上用场了。

不过，AMP 模板提供其自己的独有 CSS 样式，这些样式设计美观、跨浏览器且具有自适应能力，可帮助您快速构建优雅的 AMP 网页。您下载的模板代码包含 <style amp-custom>. 中这些您个人喜欢的 CSS 样式

我们首先要重新添加我们从模板中删除的一些组件，为页面创建 shell，包括导航菜单、页面标题图片和标题。

我们会从 AMP Start UI 组件页面获取帮助，但不会深入研究它们的实现详情。此 Codelab 中的后续步骤将为您提供大量机会。

请转到 https://ampstart.com/components#navigation，然后将为 RESPONSIVE MENUBAR 提供的 HTML 代码复制并粘贴到您网页的 body 中。

AMP Start 提供的代码包含为网页实现自适应导航栏所必需的 HTML 和 CSS 类结构。

试试看：调整窗口大小，看看它如何适应不同的屏幕尺寸。

此代码使用 CSS 媒体查询以及 amp-sidebar 和 amp-accordion AMP 组件。

添加主打图片和标题

此外，AMP Start 还提供现成的代码段，可用于撰写精美的自适应主打图片和标题。

请访问 https://ampstart.com/components#media，复制为 Fullpage Hero 提供的 HTML 代码并将其粘贴到您的代码中，紧跟 body. 中的  comment

现在我们来更新图片和标题。

您可能已经注意到，代码段中有两个不同的 amp-img 标记。其中一个用于较小宽度，应指向较低分辨率的图片，另一个用于较大显示屏。它们会根据 media 属性自动切换，而 AMP 元素支持所有 AMP 元素。

将现有的 <figure>...</figure>，替换为不同的 src，将 width、height 和 height 更新为不同的图片，并用“太平洋西北部最美的徒步旅行”标题来替代：

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

现在，我们来看看页面：

摘要

您为页面创建了 shell，包括自适应导航以及主打图片和标题。
您已详细了解 AMP 模板，并使用 AMP 开始界面组件快速整理了页面 shell。

本部分的完整代码位于以下位置：http://codepen.io/aghassemi/pen/RpRdzV

在本部分中，我们将为网页添加自适应图片、视频、嵌入内容和一些文字。

我们来添加一个将托管网页内容的 main 元素。我们会将它添加到 body: 的末尾

<main id="content">

</main>

添加标题和段落

在 main 中添加以下代码：

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

由于 AMP 只是 HTML，因此除了这些 CSS 类名称之外，此代码没有什么特别之处。什么是 px3、mb2 和 ampstart-dropcap？他们从何而来？

这些类不是 AMP HTML 的一部分。AMP Start 模板使用 Basscss 来提供较低级别的 CSS 工具包，并添加特定于 AMP Start 的类。

在此代码段中，px3 和 mb2 由 Basscss 定义，并分别转换为 padding-left-right 和 edge-bottom。ampstart-dropcap 由 AMP Start 提供，让段落的第一个字母变大。

您可以在 http://basscss.com/ 和 https://ampstart.com/components 上找到关于这些预定义 CSS 类的文档。

让我们看看该网页现在的样子：

添加图片

在 AMP 中制作自适应网页非常简单。在许多情况下，将 AMP 组件设为自适应只需添加 layout="responsive" 属性即可。与 HTML img 标记类似，amp-img 还支持 srcset，以便针对不同的视口宽度和像素密度指定不同的图片。

将 amp-img 添加到 main：

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

利用此代码，我们将通过指定 layout="responsive" 并提供 width 和 height. 来创建自适应图片

为什么使用自适应布局时需要指定宽度和高度？

有两个原因：

AMP 会使用宽度和高度来计算宽高比，并在宽度发生变化时保持正确的高度，以适应父级容器。
AMP 为所有元素强制采用静态大小以确保良好的用户体验（在页面中不会跳转），并确定各元素的尺寸和位置，以便在资源下载前布局页面。

现在，我们来看看页面：

添加自动播放的视频

AMP 支持许多视频播放器，例如 YouTube 和 Vimeo。AMP 会在 amp-video 扩展组件下拥有自身版本的 HTML5 video 元素。部分视频播放器（包括amp-video和amp-youtube）也支持在移动设备上静音播放。

与 amp-img 类似，添加 layout="responsive" 后，amp-video 可能变为自适应

让我们来向网页中添加自动播放的视频。

向 main: 中添加另一个段落和以下 amp-video 元素

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

我们来看一下：

添加嵌入内容

AMP 为许多第三方嵌入内容（例如 Twitter 和 Instagram）提供了扩展组件。对于缺少 AMP 组件的嵌入内容，始终会显示 amp-iframe。

让我们向您的页面添加 Instagram 嵌入内容。

与 amp-img 和 amp-video 不同，amp-instagram 不是内置组件。相应组件的导入脚本代码必须明确包含在 AMP 网页的 head 中，才能使用该组件。

我们使用的 AMP Start 样板文件包含多个导入脚本代码。请在 head 标记的开头查找这些标记，并确保包含以下导入脚本行：

<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>

向 main: 中添加另一个段落和以下 amp-instagram 元素

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

我们来看一下：

这些内容可能就目前而言已足够。

摘要

您已了解 AMP 中的自适应组件。
您添加了不同类型的媒体和文字内容。

本部分的完整代码位于以下位置：http://codepen.io/aghassemi/pen/OpXGoa

到目前为止，我们仅为自己的页面创建了静态内容。在本部分中，我们将使用轮播、灯箱和 AMP 操作等组件创建互动式照片库。

虽然 AMP 不支持自定义 JavaScript，但它仍然公开了若干基础组件，可用于接收和处理用户操作。

添加照片轮播界面

在页面上显示我们以照片为中心的 AMP 网页中的每一张图片都不能带来出色的用户体验。幸运的是，我们可以使用 amp-carousel 制作可水平滑动的幻灯片。

首先，请确保 amp-carousel 的脚本标记包含在 head 中：

<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

现在，我们来向 main: 中添加类型为 slides 且包含多张图片的自适应 amp-carousel

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" 可确保用户一次只看到一张图片，并允许用户滑动浏览图片。

对于轮播界面中的图片，我们使用 layout="fill"，因为幻灯片轮播始终使用子元素填充其尺寸，所以无需指定需要宽度和高度的其他布局。

我们来试试看：

添加缩略图轮播界面

现在，我们来为这些图片的缩略图添加一个水平可滚动容器。我们将再次使用 <amp-carousel>，但不使用 type="slides"，并且使用高度固定的布局。

在上一个 amp-carousel 元素之后添加以下代码。

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

请注意，对于缩略图，我们直接使用同一图片的 layout="fixed" 和低分辨率版本。

我们来看一下：

在用户点按缩略图时更改图片

为此，我们需要将 tap 等事件与操作（例如更改幻灯片）相关联。

事件：我们可以使用 on 属性在元素上安装事件处理程序，并且所有元素都支持 tap 事件。

操作：amp-carousel 会显示 goToSlide(index=INTEGER) 操作，我们可以通过每张缩略图的点按事件处理程序调用该操作。

至此我们已经了解了事件和操作，接下来让我们将它们关联起来。

首先，我们需要为幻灯片轮播界面提供 id，以便我们可以从缩略图上的点按事件处理程序引用它。

修改现有代码以将 id 属性添加到幻灯片轮播界面中（第一项）：

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

现在，在每个缩略图映像上安装事件处理程序（on="tap:imageSlides.goToSlide(index=<slideNumber>)")）：

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

请注意，我们还必须为此提供 tabindex，并设置无障碍 ARIA role。

大功告成。现在点按每张缩略图图片，即可看到幻灯片轮播界面中显示的对应图片。

在用户点按缩略图时突出显示

我们可以这样做吗？似乎没有任何可改变从点按事件处理脚本调用元素的 CSS 类的操作。那么，如何才能突出显示所选缩略图呢？

<amp-selector>为您解忧！

amp-selector 与我们目前使用的组件不同。它不是演示文稿组件，因为它不会影响网页的布局；相反，它是一个构建块，可以让 AMP 网页了解用户选择了哪个选项。

amp-selector 的功能相当简单，但功能强大：

amp-selector 可以包含任意 HTML 元素或 AMP 组件。
如果 amp-selector 的任何后代元素具有 option=<value> 属性，则可以成为选项。
当用户点按某个选项的元素时，amp-selector 只会向该元素添加一个 selected 属性（并将其从单选模式中的其他选项元素中移除）。
您可以使用 CSS 属性选择器来定位 selected 属性，从而为自定义 CSS 中的选定元素设置样式。

我们来看看这个工具如何帮助我们完成当前任务。

将 amp-selector 的脚本标记添加到 head：

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>

将缩略图轮播界面封装在 amp-selector 中
添加 option=<value> 属性，让每个缩略图都成为选项。
添加 selected 属性，默认选中第一个缩略图。

<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

现在，我们需要添加样式，以突出显示所选的缩略图。

在 AMP Start 缩减的 CSS 样板之后，在 <style amp-custom> 中添加以下自定义 CSS：

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

我们来看一下：

看起来不错，但您是否注意到了错误？

如果用户滑动幻灯片轮播界面，所选缩略图不会随之更新。如何将轮播界面中的当前幻灯片与所选缩略图绑定？

在下一部分中，我们将了解具体方法。

摘要

您了解了不同类型的轮播界面及其使用方法。
您使用 {0/} 操作和事件更改了用户点按缩略图时图片轮播界面中可见的幻灯片。
您了解了 amp-selector 以及如何将其用作实现有趣用例的构建块。

本部分的完整代码位于以下位置：http://codepen.io/aghassemi/pen/gmMJMy

在本部分中，我们将使用 amp-bind 提高上一部分中的图库互动性。

什么是 `amp-bind`？

核心 AMP 组件 amp-bind 可让您通过数据绑定和表达式创建自定义互动。

amp-bind 有三个关键部分：

州/省级行政区
绑定
Mutation

状态是一种应用状态变量，包含从单个值到复杂数据结构的任何内容。所有组件都可以对此共享变量执行读写操作。

绑定是一种将状态与 HTML 属性或元素内容相关联的表达式。

突变是指因某些用户操作或事件而改变状态值的操作。

当发生变更时，amp-bind 的强大功能便会开始：与这个状态绑定的所有组件都将收到通知，并会自动更新以反映新状态。

我们来看看实际用例！

使用 `amp-bind` 重新实现图库

以前，我们使用 AMP 操作（例如 goToSlide()）将全图幻灯片轮播与缩略图关联 tap 事件，并使用 amp-selector 突出显示所选缩略图。

让我们看看如何使用 amp-bind 方法进行数据绑定，完全重新实现此代码。

但在开始编码之前，我们先设计我们的方法：

1. 我们的状态如何？

在我们的示例中，我们只关注当前的幻灯片编号，非常简单。selectedSlide 就是我们的状态。

2. 什么是绑定？

selectedSlide 发生更改后，哪些方面需要更改？

全图轮播界面的可见 slide：

<amp-carousel [slide]="selectedSlide" ...

“amp-selector”中的“selected”项也需要更改。这将修复我们在上一部分中遇到的错误。

<amp-selector [selected]="selectedSlide" ...

3. 我们发生了哪些变化？

什么时候需要更改selectedSlide？

在用户通过滑动滑动切换到全图轮播的新幻灯片时：

<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...

用户选择缩略图后：

<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

让我们使用 AMP.setState 触发突变，这意味着我们不再需要缩略图上已有的所有 on="tap:imageSlides.goToSlide(index=n)" 代码！

让我们总结一下：

将 amp-bind 的脚本标记添加到 head：

<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>

用新的方法替换现有的图库代码：

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

开始测试吧。点按缩略图后，图片幻灯片会发生变化。滑动图片幻灯片，突出显示的缩略图即会更改。

将文本库添加到库中

我们已完成了为当前幻灯片定义和更改状态这一繁重工作。现在，我们可以轻松提供其他绑定，以根据当前幻灯片编号更新其他信息。

让我们向图库添加“图片 x/of y”文本：

在幻灯片轮播元素上方添加以下代码：

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

这一次，我们要使用 [text]= 绑定到元素的内部文本，而不是绑定到 HTML 属性。

我们来试试看：

摘要

您已了解amp-bind。
您已使用 amp-bind 实现图库的改进版本。

本部分的完整代码位于以下位置：http://codepen.io/aghassemi/pen/MpeMdL

在本部分中，我们将使用两项新功能为页面添加动画。

在标题中添加视差效果

amp-fx-collection 是一个扩展组件，提供一组预设视觉效果（例如视差），您可以轻松地为任何具有属性的元素启用该效果。

使用视差效果时，当用户滚动页面时，相应元素会根据为该属性指定的值滚动得更快或更慢。

您可以向任何 HTML 或 AMP 元素添加 amp-fx="parallax" data-parallax-factor="<a decimal factor>" 属性，从而启用视差效果。

通过大于 1 的系数值，当用户向下滚动页面时，元素可更快地滚动。
小于 1 的系数值会让用户向下滚动网页时滚动速度变慢。

让我们将视差系数为 1.5 的视差添加到页面标题中，看看效果如何！

将 amp-fx-collection 的脚本标记添加到 head：

<script custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" async></script>

现在，在代码中找到现有的标题标题元素，并为其添加 amp-fx="parallax" and data-parallax-factor="1.5" 属性：

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

我们来看一下结果：

现在，标题的滚动速度比网页其余部分更快。棒极了！

向页面添加动画

amp-animation 功能可将 Web Animations API 引入 AMP 网页中。

在本部分中，我们将使用 amp-animation 为封面图片创建细微的放大效果。

将 amp-animation 脚本代码添加到 head 中：

<script custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" async></script>

现在，我们需要定义动画及其适用的目标元素。

动画在顶级 amp-animation 标记内定义为 JSON。

将以下代码直接插入网页中起始 body 标记的下方。

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

这段代码定义了一种动画，它会持续播放 30 秒，并将图片缩放到原来的 30%。

我们定义了正向 fill，以允许图片在动画结束后继续放大。target 是动画适用的元素的 HTML id。

让我们向网页上的主打图片元素添加一个 id，以便 amp-animation 可以对其执行操作。

找到代码中的现有主打图片（高分辨率的 layout="fixed-height"），并将 id="heroimage" 添加到 amp-img 标记中。
为简单起见，我们还将删除 media="(min-width: 416px)" 并移除其他低分辨率 amp-img，这样我们就无需立即在 amp-animation 中处理多个动画和媒体查询。

<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

您可能已经注意到，缩放图片会使其溢出到其父项，因此我们需要通过隐藏溢出来解决此问题。

将以下 CSS 规则添加到现有 <style amp-custom> 的末尾：

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

我们来试试看：

轻微！

但我本可以通过 CSS 来实现这一点。amp-animation有什么意义？

在这种情况下就是这样，但 amp-animation 可以实现单靠 CSS 无法实现的额外功能。例如，动画可以根据可见性触发（也可以根据可见性暂停），也可以通过 AMP 操作触发。amp-animation 还基于 Web Animations API，它本身的功能比 CSS 动画多，特别是围绕可组合项的动画。

摘要

您已了解如何使用 amp-fx-collection 创建视差效果。
您已了解amp-animation。

本部分的完整代码位于以下位置：http://codepen.io/aghassemi/pen/OpXKzo

您刚刚创建了一个精美的互动式 AMP 网页。

让我们再次庆祝今天的成就，庆祝一下。

以下是完成后的页面链接：http://s.codepen.io/aghassemi/debug/OpXKzo

... 最后生成代码：http://codepen.io/aghassemi/pen/OpXKzo

无标题 GIF

此 Codelab 的 CodePen 条目集合可在以下位置找到：https://codepen.io/collection/XzKmNB/

在开始前...

我们忘了检查网页在其他类型的设备（例如横向模式下的平板电脑）上的显示效果。

让我们看看：

无标题 GIF

非常好！

祝你今天过得开心。

后续步骤

此 Codelab 仅介绍了 AMP 中可能实现的功能。有许多资源和 Codelab 可帮助您创建出色的 AMP 网页：

如果您有疑问或遇到问题，请在 AMP Slack 频道上找到我们，或在 GitHub 上创建讨论、错误报告或功能请求。

美观的互动式 AMP 网页

构建内容

所需条件

用于提供内容的工具

从 amp.dev 下载模板

运行模板代码

剪裁模板代码

添加自适应导航

添加主打图片和标题

摘要

添加标题和段落

添加图片

添加自动播放的视频

添加嵌入内容

摘要

添加照片轮播界面

添加缩略图轮播界面

在用户点按缩略图时更改图片

在用户点按缩略图时突出显示

摘要

什么是 amp-bind？

使用 amp-bind 重新实现图库

将文本库添加到库中

摘要

在标题中添加视差效果

向页面添加动画

摘要

在开始前...

后续步骤

什么是 `amp-bind`？

使用 `amp-bind` 重新实现图库