AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 网站

方向效果基础

查看演示 在 Playground 中打开

简介

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 背后的核心概念：当设备倾斜时，能够在关键帧动画时间轴中前进的能力。

我们的滚动场景是一个包含一些 Lorem Ipsum 文本的 div。我们在场景中添加一个 amp-orientation-observer 元素作为子元素来监视设备的位置。让我们看一下详细信息： - on:beta：此事件由方向观察器触发，因为设备沿 beta 轴的方向发生变化。该事件提供一个百分比值（0 到 1 之间的十进制数），表示设备在 beta 轴中的位置。 - anim.seekTo(percent=event.percent)：我们将定义一个 amp-animation，它将在下一步中进行旋转，这里我们将 amp-orientation-observer 和 amp-animation 耦合在一起，方法是在 beta 事件发生时触发动画的 seekTo 操作。这就是我们指定我们希望随着设备沿 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 上编辑示例