裝置方向與 AMP;動態

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

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

  • 偵測裝置的哪一側朝上,以及裝置的旋轉方式。
  • 瞭解何時以及如何回應動作和方向事件。

哪一端朝上?

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

地球座標架構

地球座標架構由 XYZ 值所描述,並根據重力和標準磁性方向進行對齊。

座標系統
X 代表東西方向 (東方為正值)。
Y 代表南北方向 (北方為正向)。
Z 代表垂直於地面的上下方向 (向上為正)。

裝置座標框架

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

裝置座標框架由 xyz 值描述,並根據裝置的中心對齊。

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

在手機或平板電腦上,裝置的方向會根據螢幕的一般方向而定。對於手機和平板電腦,則是根據裝置是否處於直向模式。對於桌上型電腦或筆記型電腦,系統會根據鍵盤來判斷方向。

旋轉資料

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

Alpha 值

裝置座標框架中的 alpha 插圖
裝置座標框架中的 alpha 插圖

沿 Z 軸旋轉。當裝置頂端直接指向北方時,alpha 值為 0°。當裝置以逆時針方向旋轉時,alpha 值會增加。

Beta 版

裝置座標框架的插圖
裝置座標框架中的 beta 插圖

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

Gamma

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

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

裝置螢幕方向

裝置方向事件會傳回旋轉資料,包括裝置前後、左右傾斜的程度,以及 (如果手機或筆電有指南針) 裝置所面向的方向。

請節制使用。測試支援情形。請勿在每次方向事件中更新 UI,而是同步至 requestAnimationFrame

使用裝置方向事件的時機

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

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

檢查支援情形並監聽事件

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

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

處理裝置方向事件

裝置移動或變更方向時,裝置方向事件就會觸發。它會傳回裝置目前位置與地球座標架構之間的差異資料。

事件通常會傳回三個屬性:alphabetagamma。在行動版 Safari 中,系統會傳回指南針方位,以及額外的參數 webkitCompassHeading

裝置動作

裝置方向事件會傳回旋轉資料,包括裝置前後、左右傾斜的程度,以及 (如果手機或筆電有指南針) 裝置所面向的方向。

如需取得裝置目前的動作,請使用裝置動作。rotationRate 以 °/sec 提供。accelerationaccelerationWithGravity 以 m/sec 提供2。請注意不同瀏覽器的實作方式。

使用裝置動作事件的時機

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

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

檢查支援情形並監聽事件

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

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

處理裝置動作事件

裝置動作事件會以固定間隔觸發,並在該時刻傳回裝置旋轉 (以°/秒為單位) 和加速度 (以 m/s2 為單位) 的資料。部分裝置沒有排除重力影響的硬體。

事件會傳回四個屬性:accelerationIncludingGravityacceleration,其中排除重力、rotationRateinterval 的效果。

舉例來說,我們來看看放在平面桌上的手機,螢幕朝上。

旋轉 加速度 (公尺/秒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!」按鈕後,系統會要求使用者跳躍。在此期間,網頁會儲存最大 (和最小) 加速度值,並在跳躍後告知使用者最大加速度。

意見回饋