美观的互动式 AMP 网页

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

构建内容

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

  • 自适应导航
  • 全屏主打图片
  • 自适应图片
  • 带自动播放功能的视频
  • Instagram 等嵌入内容
  • 操作和选择器
  • amp-bind 进行数据绑定
  • 使用 amp-fx-collectionamp-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-sidebaramp-accordion AMP 组件。

添加主打图片和标题

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

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

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

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

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

<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 类名称之外,此代码没有什么特别之处。什么是 px3mb2ampstart-dropcap?他们从何而来?

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

在此代码段中,px3mb2 由 Basscss 定义,并分别转换为 padding-left-rightedge-bottomampstart-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" 并提供 widthheight. 来创建自适应图片

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

有两个原因:

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

现在,我们来看看页面:

添加自动播放的视频

AMP 支持许多视频播放器,例如 YouTube 和 Vimeo。AMP 会在 amp-video 扩展组件下拥有自身版本的 HTML5 video 元素。部分视频播放器(包括amp-videoamp-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 为许多第三方嵌入内容(例如 TwitterInstagram)提供了扩展组件。对于缺少 AMP 组件的嵌入内容,始终会显示 amp-iframe

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

amp-imgamp-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",因为幻灯片轮播始终使用子元素填充其尺寸,所以无需指定需要宽度和高度的其他布局。

我们来试试看:

1.gif

现在,我们来为这些图片的缩略图添加一个水平可滚动容器。我们将再次使用 <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

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

2.gif

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

我们可以这样做吗?似乎没有任何可改变从点按事件处理脚本调用元素的 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>
  1. 将缩略图轮播界面封装在 amp-selector
  2. 添加 option=<value> 属性,让每个缩略图都成为选项。
  3. 添加 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>

我们来看一下:

3.gif

看起来不错,但您是否注意到了错误?

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

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

摘要

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

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

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

什么是 amp-bind

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

amp-bind 有三个关键部分:

  1. 州/省级行政区
  2. 绑定
  3. Mutation

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

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

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

当发生变更时,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>

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

4.gif

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

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

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

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

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

我们来试试看:

5.gif

摘要

  • 您已了解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>

我们来看一下结果:

6.gif

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

向页面添加动画

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 可以对其执行操作。

  1. 找到代码中的现有主打图片(高分辨率的 layout="fixed-height"),并将 id="heroimage" 添加到 amp-img 标记中。
  2. 为简单起见,我们还将删除 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;
}

我们来试试看:

7.gif

轻微!

但我本可以通过 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 上创建讨论、错误报告或功能请求。