重要事項：本文件不適用於您目前選取的格式 stories！

amp-orientation-observer

說明

監控使用者捲動時，viewport (可視區域) 內元素的方位，並派遣可與其他 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)，以 angle 和 percent 為單位，報告裝置方位沿著 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