重要提示：此文档不适用于您当前选择的格式故事！

amp-orientation-observer

描述

监控用户滚动时视口内元素的朝向，并分发可与其他 AMP 组件一起使用的事件。

必需脚本

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

支持的布局

nodisplay

用法

amp-orientation-observer 组件监控设备的朝向，并分发低信任级别的事件 (alpha、beta、gamma)，这些事件以 角度和 百分比 形式报告设备沿 alpha、beta 和 gamma 轴的朝向变化。这些事件可用于触发其他组件（例如，amp-animation）上的操作（仅限低信任操作）。

amp-orientation-observer 组件只有与其他组件一起使用时才有用，它本身不执行任何操作。

目前，amp-animation 和 AMP 中的几个视频播放器是唯一允许低信任事件触发其操作的组件（例如，开始动画、查找动画中的位置、暂停视频等）。

滚动绑定动画

想象一个动画，其中时钟的时针随着用户滚动页面而旋转。

<!-- An animation that rotates a clock hand 180 degrees. -->
<!--
   Note that we are NOT setting `trigger=visibility`
   since we will manually trigger the animation.
-->
<amp-animation id="clockAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": "#clock-scene .clock-hand",
          "keyframes": [
            {"transform": "rotate(-180deg)"},
            {"transform": "rotate(0deg)"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

<!-- The clock container -->
<div id="clock-scene">
  <!--
    Use amp-orientation-observer to tie the movement of the clock scene within
    the viewport to the timeline of the animation
  -->
  <amp-orientation-observer
    on="beta:clockAnim1.seekTo(percent=event.percent)"
    layout="nodisplay"
  >
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="./img/clock.jpg">
    <div class="clock-hand"></div>
  </amp-img>
</div>

属性

alpha-range（可选）

指定关联操作仅应在沿 z 轴的指定范围内的更改时发生。指定为以空格分隔的 2 个值列表（例如，alpha-range="0 180"）。默认情况下，相关操作会在 0 到 360 度之间的所有更改时触发。

beta-range（可选）

指定关联操作仅应在沿 x 轴的指定范围内的更改时发生。指定为以空格分隔的 2 个值列表（例如，beta-range="0 180"）。默认情况下，相关操作会在 0 到 360 度之间的所有更改时触发。

示例：使用 beta-range 限制沿 x 轴观看的角度范围

想象一个动画，其中时钟的时针随着用户滚动页面而旋转。

<amp-orientation-observer
  beta-range="0 180"
  on="beta:clockAnim1.seekTo(percent=event.percent)"
  layout="nodisplay"
>
</amp-orientation-observer>

gamma-range（可选）

指定关联操作仅应在沿 y 轴的指定范围内的更改时发生。指定为以空格分隔的 2 个值列表（例如，gamma-range="0 90"）。默认情况下，相关操作会在 0 到 360 度之间的所有更改时触发。

smoothing（可选）

启用后，输出最后 n 个值的移动平均值，而不是从传感器读取的原始值。默认情况下，激活时，平滑将设置为 4 个点。

活动

这些是 amp-orientation-observer 组件分发的低信任级别事件

`alpha`

表示设备绕 z 轴的运动。

`beta`

表示设备绕 x 轴的运动。

`gamma`

表示设备绕 y 轴的运动。这表示设备的左右运动。

验证

请参阅 AMP 验证器规范中的 amp-orientation-observer 规则。

需要更多帮助？

您已经阅读过此文档很多遍了，但它并没有真正涵盖您的所有问题？也许其他人也有同感：请在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

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

转到 GitHub