裝置方向與 AMP；動態

Pete LePage

裝置動作和方向事件可讓您存取行動裝置內建的加速計、陀螺儀和指南針。

這些事件有許多用途，例如在遊戲中控制角色的方向或動作。搭配地理位置使用時，它們有助於建立更準確的即時路線導航，或是提供特定地點的相關資訊。

摘要

  • 偵測裝置目前是哪一面，以及裝置的旋轉方式。
  • 瞭解回應動作和方向事件的時機和方式。

哪一邊朝上？

如要使用裝置方向和動作事件傳回的資料，請務必瞭解提供的值。

地球座標架構

地球座標架構由 X、Y 和 Z 值所描述，並根據重力和標準磁性方向進行對齊。

座標系統
X 代表東西向方向 (東正方)。
Y 代表南北向 (北為正向)。
Z 代表向上方向，與地面垂直 (上方為正數)。

裝置座標框架

裝置座標邊框插圖
裝置座標框架插圖

裝置座標框架 (由 x、y 和 z 值所描述) 會根據裝置的中心對齊。

座標系統
X 在螢幕平面中，右側為正向。
Y 在螢幕平面上，正值朝上。
Z 與螢幕或鍵盤垂直，正值向外延伸。

在手機或平板電腦上，裝置的螢幕方向是根據一般螢幕方向而定。手機和平板電腦的判斷依據是裝置處於直向模式。如果是電腦或筆電，系統會考量鍵盤和鍵盤的方向。

輪替資料

旋轉資料會以 歐拉角的形式傳回，代表裝置座標框架和地球座標框架之間的差異度數。

Alpha 值

裝置座標邊框中的 Alpha 版插圖
裝置座標框架中的 alpha 插圖

沿著 Z 軸的旋轉角度。當裝置頂端指向北方時，alpha 值為 0°。當裝置以逆時針方向旋轉時，alpha 值會增加。

Beta 版

裝置座標邊框的插圖
裝置座標頁框中的 Beta 版插圖

沿著 X 軸旋轉的角度。如果裝置頂端和底端與地球表面的距離相等，beta 值為 0°。裝置頂端朝向地表的方向傾斜時，這個值會增加。

伽瑪

裝置座標邊框的插圖
裝置座標框架中的伽瑪插圖

沿著 y 軸旋轉。如果裝置的左側和右側邊緣距離地球表面的距離相等，gamma 值就是 0°。當右側傾向地球表面時，這個值會增加。

裝置螢幕方向

裝置定向事件會傳迴旋轉資料，其中包括裝置正面或側面的傾斜程度，以及手機或筆電有指南針時，裝置面對的方向。

謹慎使用。測試支援。請勿在每次方向事件中更新 UI，而是同步至 requestAnimationFrame。

使用裝置定向事件的時機

裝置方向事件有許多用途。相關示例包括：

  • 隨著使用者移動而更新地圖。
  • 細微的 UI 調整，例如新增視差效果。
  • 可與地理位置資訊搭配使用，用於即時路線導航。

檢查支援情形並監聽事件

如要監聽 DeviceOrientationEvent，請先確認瀏覽器是否支援事件。接著，將事件監聽器附加至監聽 deviceorientation 事件的 window 物件。

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

處理裝置方向事件

裝置方向事件會在裝置移動或變更方向時觸發。並傳回裝置目前位置相對於地球座標框架的差距資料。

事件通常會傳回三個屬性：alpha、beta 和 gamma。在行動版 Safari 中，系統會透過指南針標題傳回額外參數 webkitCompassHeading。

裝置動作

裝置定向事件會傳迴旋轉資料，其中包括裝置正面或側面的傾斜程度，以及手機或筆電有指南針時，裝置面對的方向。

如需取得裝置目前的動作，請使用裝置動作。rotationRate 以 °/sec 提供。acceleration 和 accelerationWithGravity 以 m/sec 提供2。請留意瀏覽器導入方式的差異。

使用裝置動作事件的時機

裝置動作事件有許多用途。相關示例包括：

  • 搖動手勢即可重新整理資料。
  • 在遊戲中，可讓角色跳躍或移動。
  • 適用於健康與健身應用程式。

檢查支援及監聽事件

如要監聽 DeviceMotionEvent，請先檢查瀏覽器是否支援事件。然後將事件監聽器附加至監聽 devicemotion 事件的 window 物件。

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

處理裝置動作事件

裝置動作事件會以固定間隔啟動，並傳回當時裝置旋轉 (以 °/秒) 和加速 (以 m/秒為單位)2 的相關資料。部分裝置沒有排除重力影響的硬體。

這個事件會傳回四個屬性：accelerationIncludingGravity、acceleration，不包括重力、rotationRate 和 interval 的影響。

舉個例子，我們看一下手機放在平面上，螢幕朝上。

州 旋轉 加速度 (公尺/秒2) 重力加速度 (公尺/秒2)
未偵測到活動 [0, 0, 0] [0, 0, 0] [0、0、9.8]
向上移動到天空 [0、0、0] [0, 0, 5] [0, 0, 14.81]
僅向右移動 [0, 0, 0] [3、0、0] [3, 0, 9.81]
向右移動 [0, 0, 0] [5, 0, 5] [5, 0, 14.81]

相反地，如果拿著手機讓螢幕朝向地面垂直，直接顯示在檢視器中：

州 旋轉 加速度 (公尺/秒2) 重力加速度 (公尺/秒2)
未偵測到活動 [0, 0, 0] [0, 0, 0] [0、9.81、0]
向上移動至天空 [0, 0, 0] [0、5、0] [0, 14.81, 0]
只移至右側 [0, 0, 0] [3, 0, 0] [3、9.81、0]
向右移動 [0, 0, 0] [5, 5, 0] [5、14.81、0]

範例：計算物體的最大加速度

使用裝置動作事件的其中一種方式，是計算物件的最大加速度。例如，一個人跳的最大加速是多少？

if (evt.acceleration.x > jumpMax.x) {
  jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
  jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
  jumpMax.z = evt.acceleration.z;
}

輕觸「Go!」按鈕後，系統會提示使用者跳躍。在這段期間，頁面會儲存最大 (和最小值) 的加速值，並在跳轉後告訴使用者最大加速。

意見回饋