方向效果的基础

简介

amp-orientation-observer 与 amp-animation 结合使用是一个强大的构建块，可以处理各种依赖于设备方向的用例。

在本教程中，我们将详细介绍其中一些用例。

设置

amp-orientation-observer 是一个功能性组件，它会监控设备在移动时的方向，并根据设备移动的轴发送 alpha、beta 和 gamma 事件。有关 DeviceOrientationEvents 的更多详细信息，请阅读 MDN 上的这篇文章。

这些事件可以反过来用于 seek 由 amp-animation 定义的动画时间线，以创建基于方向的效果。

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

amp-animation 是一个 UI 组件，它依赖于 Web Animations API 来定义和运行 AMP 文档中的关键帧动画。

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

样式

此处包含这些示例所使用的 CSS，以供参考。

这些规则只是为了使示例正常工作，而不是这里涵盖的概念的基础。

<style amp-custom>
#scrollText {
  font-family: Helvetica, sans-serif;
  padding: 10px;
  max-width: 412px;
  height: 500px;
  margin: auto;
  overflow: hidden;
}

#ipsum {
  background-image: linear-gradient(white, deeppink);
}

.clock-hand {
  position: absolute;
  width: 2vw;
  height: 20vw;
  max-height: 90px;
  max-width: 10px;
  top: 50%;
  left: 50%;
  z-index: 2;
  background: #FAFAFA;
  transform-origin: 50% 0%;
  border-radius: 10px;
  transform: rotate(-180deg)
}

.rotate-2 {
  transform: rotate(-270deg)
}
</style>

基于倾斜的滚动动画

让我们创建一个基于倾斜的滚动动画，你可以在沿 y 轴倾斜设备时在页面上上下滚动。

此示例展示了组合 amp-orientation-observer 和 amp-animation 背后的核心概念：随着设备倾斜，在关键帧动画时间线上前进的能力。

我们的滚动场景是一个 div，其中包含一些 Lorem Ipsum 文本。我们在场景中添加一个 amp-orientation-observer 元素作为子元素来监控设备的位置。让我们看一下详细信息：- on:beta：当设备沿 beta 轴的方向更改时，方向观察器会触发此事件。该事件提供一个百分比值（0 到 1 之间的十进制数），表示设备在 beta 轴内的位置。- anim.seekTo(percent=event.percent)：我们将定义一个 amp-animation，它将在下一步中进行旋转，这里我们通过在发生 beta 事件时触发动画上的 seekTo 操作来耦合 amp-orientation-observer 和 amp-animation。这就是我们指定我们希望随着设备沿 beta 轴移动而在动画时间线上前进的方式。- beta-range：每个轴都有一个它跟踪的角度范围。对于 beta 轴，默认范围为 -180 到 180 度。如果你想将范围设置为自定义范围（如我们在本例中所做的那样），你可以使用此处的 beta-range 属性来指定它。在此示例中，我们将 beta-range 设置为“0 180”，以确保文本不会滚动超出其第一段。

沿 y 轴移动手机以滚动

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est et dui maximus sagittis vel imperdiet nibh. Nam finibus nisl sit amet neque gravida pellentesque. Phasellus vulputate, tortor ut pretium ultricies, nibh massa vestibulum nisi, a vestibulum orci velit eget nisl. Maecenas dui nulla, consectetur sed porttitor ac, varius quis nibh. In pellentesque nisi quis ligula fringilla, non lobortis felis tincidunt. Nullam hendrerit sodales purus, nec rhoncus urna ultricies ac. Cras vestibulum pulvinar libero, quis faucibus nisi. Quisque ut lacus vitae justo faucibus mollis vel bibendum neque. Quisque pretium nunc in nunc vulputate, interdum ullamcorper nisl convallis. Cras vitae finibus urna. Sed enim turpis, consectetur eu velit nec, sodales mollis justo. Curabitur pretium luctus felis sagittis rhoncus. Donec vitae vehicula erat, non pellentesque odio. Vestibulum accumsan rhoncus placerat. Donec rutrum ullamcorper sodales. Vestibulum pretium ut diam faucibus tincidunt. Aenean vestibulum nisl nec arcu eleifend posuere. Aliquam nec feugiat nibh. Cras pretium ut purus quis pharetra. Morbi urna augue, lobortis ac porttitor vitae, feugiat eget dui. Nam lacinia commodo tellus vel sagittis. Aliquam id pharetra metus. Nam tristique vulputate maximus. Donec consequat aliquam lacus, ac fermentum magna iaculis tristique. In urna dolor, rutrum non mattis at, luctus nec lectus. Maecenas consequat, massa at placerat convallis, arcu elit consequat nulla, vel egestas justo augue vitae mauris. Nullam est diam, aliquam sit amet posuere non, condimentum et ante. Ut at ullamcorper ipsum. Nullam non efficitur sapien. Praesent vitae odio diam. Nullam dignissim hendrerit neque non tempor. Praesent non arcu volutpat, maximus risus in, rutrum tellus. Quisque nec porttitor purus. Quisque hendrerit erat consequat dignissim vehicula. Quisque tortor orci, bibendum et lacinia at, porttitor nec est. Nunc venenatis sollicitudin dui, et fermentum lectus euismod vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus diam ante, sagittis non finibus sed, pulvinar id dolor. Maecenas ac facilisis lacus. Suspendisse potenti. Curabitur dignissim consequat ante, quis facilisis ipsum faucibus nec. Suspendisse potenti. Mauris lorem eros, finibus id tincidunt quis, bibendum at urna. Aenean quis tortor ultricies, sodales ipsum id, imperdiet felis. Maecenas vestibulum cursus est convallis imperdiet. In convallis tempus lacus, suscipit tempus turpis mattis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin massa massa, molestie eu pretium in, eleifend vel erat. Pellentesque dictum turpis sit amet neque elementum aliquam a sed metus. Donec dignissim laoreet massa vel vehicula. Praesent pretium arcu consequat augue dignissim, at ultrices quam placerat. Proin justo odio, fermentum sed malesuada eu, facilisis non quam. In molestie enim nec ligula tempus, sed condimentum dui molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lacus cursus varius malesuada, lacus enim blandit ipsum, non hendrerit est sapien et ex. Nullam quis pulvinar nulla, vitae venenatis massa. In mattis at eros id ullamcorper. Aenean ac hendrerit magna. Sed volutpat sapien quis justo accumsan eleifend. Praesent lobortis, velit sed elementum molestie, urna nibh malesuada lacus, vitae efficitur tellus elit ac augue. Aliquam erat volutpat. Praesent ultricies felis erat, ut luctus nulla pellentesque in. Etiam lacinia neque id neque egestas tempor.

文本结束

<div id="scrollText">
  <amp-orientation-observer beta-range="0 180" on="beta:anim.seekTo(percent=event.percent)" layout="nodisplay">
  </amp-orientation-observer>
  <div id="ipsum">
    <p>Move phone along y axis to scroll</p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est et dui maximus sagittis vel imperdiet nibh. Nam finibus nisl sit amet neque gravida pellentesque. Phasellus vulputate, tortor ut pretium ultricies, nibh massa vestibulum nisi, a vestibulum orci velit eget nisl. Maecenas dui nulla, consectetur sed porttitor ac, varius quis nibh. In pellentesque nisi quis ligula fringilla, non lobortis felis tincidunt. Nullam hendrerit sodales purus, nec rhoncus urna ultricies ac. Cras vestibulum pulvinar libero, quis faucibus nisi. Quisque ut lacus vitae justo faucibus mollis vel bibendum neque. Quisque pretium nunc in nunc vulputate, interdum ullamcorper nisl convallis. Cras vitae finibus urna. Sed enim turpis, consectetur eu velit nec, sodales mollis justo. Curabitur pretium luctus felis sagittis rhoncus. Donec vitae vehicula erat, non pellentesque odio. Vestibulum accumsan rhoncus placerat. Donec rutrum ullamcorper sodales. Vestibulum pretium ut diam faucibus tincidunt.

    Aenean vestibulum nisl nec arcu eleifend posuere. Aliquam nec feugiat nibh. Cras pretium ut purus quis pharetra. Morbi urna augue, lobortis ac porttitor vitae, feugiat eget dui. Nam lacinia commodo tellus vel sagittis. Aliquam id pharetra metus. Nam tristique vulputate maximus. Donec consequat aliquam lacus, ac fermentum magna iaculis tristique. In urna dolor, rutrum non mattis at, luctus nec lectus. Maecenas consequat, massa at placerat convallis, arcu elit consequat nulla, vel egestas justo augue vitae mauris. Nullam est diam, aliquam sit amet posuere non, condimentum et ante. Ut at ullamcorper ipsum. Nullam non efficitur sapien. Praesent vitae odio diam. Nullam dignissim hendrerit neque non tempor.

    Praesent non arcu volutpat, maximus risus in, rutrum tellus. Quisque nec porttitor purus. Quisque hendrerit erat consequat dignissim vehicula. Quisque tortor orci, bibendum et lacinia at, porttitor nec est. Nunc venenatis sollicitudin dui, et fermentum lectus euismod vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus diam ante, sagittis non finibus sed, pulvinar id dolor. Maecenas ac facilisis lacus. Suspendisse potenti.

    Curabitur dignissim consequat ante, quis facilisis ipsum faucibus nec. Suspendisse potenti. Mauris lorem eros, finibus id tincidunt quis, bibendum at urna. Aenean quis tortor ultricies, sodales ipsum id, imperdiet felis. Maecenas vestibulum cursus est convallis imperdiet. In convallis tempus lacus, suscipit tempus turpis mattis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin massa massa, molestie eu pretium in, eleifend vel erat. Pellentesque dictum turpis sit amet neque elementum aliquam a sed metus. Donec dignissim laoreet massa vel vehicula. Praesent pretium arcu consequat augue dignissim, at ultrices quam placerat. Proin justo odio, fermentum sed malesuada eu, facilisis non quam. In molestie enim nec ligula tempus, sed condimentum dui molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lacus cursus varius malesuada, lacus enim blandit ipsum, non hendrerit est sapien et ex. Nullam quis pulvinar nulla, vitae venenatis massa.

    In mattis at eros id ullamcorper. Aenean ac hendrerit magna. Sed volutpat sapien quis justo accumsan eleifend. Praesent lobortis, velit sed elementum molestie, urna nibh malesuada lacus, vitae efficitur tellus elit ac augue. Aliquam erat volutpat. Praesent ultricies felis erat, ut luctus nulla pellentesque in. Etiam lacinia neque id neque egestas tempor.
    <h3>End of text</h3>
  </div>
</div>

此处的动画是沿 Y 轴的平移，以模拟滚动动作。

<amp-animation id="anim" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#ipsum",
        "keyframes": [
          { "transform": "translateY(0)" },
          { "transform": "translateY(-1170px)" }
        ]
      }
    ]
  }
  </script>
</amp-animation>

基于倾斜的平移动画

让我们创建一个基于倾斜的动画，其中时钟的指针会随着你沿特定轴倾斜设备而移动。第一个动画是沿 beta 轴的，要查看此操作，请沿 y 轴旋转你的手机。

<div id="clock-scene-1" class="clock-scene">
  <amp-orientation-observer beta-range="0 180" on="beta:clockAnim1.seekTo(percent=event.percent)" layout="nodisplay">
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
    <div class="clock-hand rotate-1"></div>
  </amp-img>
</div>

这种情况下的动画是时钟指针从 -180 度旋转到 180 度，以允许指针在 12 点钟位置开始和结束。

<amp-animation id="clockAnim1" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#clock-scene-1 .rotate-1",
        "keyframes": [
          { "transform": "rotate(-180deg)" },
          { "transform": "rotate(180deg)" }
        ]
      }
    ]
  }
  </script>
</amp-animation>

第二个动画是沿 gamma 轴的，要查看此操作，请沿 x 轴旋转你的手机

<div id="clock-scene-2" class="clock-scene">
  <amp-orientation-observer on="gamma:clockAnim2.seekTo(percent=event.percent)" layout="nodisplay">
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
    <div class="clock-hand rotate-2"></div>
  </amp-img>
</div>

这种情况下的动画是时钟指针从 -270 度旋转到 90 度，以允许指针在 12 点钟位置开始和结束。这里的运动限制在 9 点钟位置到 3 点钟位置之间。

<amp-animation id="clockAnim2" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#clock-scene-2 .rotate-2",
        "keyframes": [
          { "transform": "rotate(-270deg)" },
          { "transform": "rotate(-90deg)" }
        ]
      }
    ]
  }
  </script>
</amp-animation>

第三个动画是沿 alpha 轴的，要查看此操作，请沿水平轴旋转你的手机

<div id="clock-scene-3" class="clock-scene">
  <amp-orientation-observer alpha-range="0 360" on="alpha:clockAnim3.seekTo(percent=event.percent)" layout="nodisplay">
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
    <div class="clock-hand rotate-3"></div>
  </amp-img>
</div>

在这种情况下，动画是时钟指针从 90 度旋转到 -270 度，以允许指针在 12 点钟位置开始和结束。

<amp-animation id="clockAnim3" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#clock-scene-3 .rotate-3",
        "keyframes": [
          { "transform": "rotate(90deg)" },
          { "transform": "rotate(-270deg)" }
        ]
      }
    ]
  }
  </script>
</amp-animation>

需要进一步解释吗？

如果此页面上的解释未能涵盖您的所有问题，请随时联系其他 AMP 用户讨论您的具体用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您针对您特别感兴趣的问题提供一次性贡献。

在 GitHub 上编辑示例

由 @nainar 撰写