方向效果基础
简介
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 上编辑示例-