裝置動作和方向事件可讓您存取行動裝置內建的加速計、陀螺儀和指南針。
這些事件可用於多種用途，例如在遊戲中控制角色的方向或動作。搭配地理位置資訊使用時，這些資訊可協助建立更準確的即時路線導航，或提供特定位置的相關資訊。
摘要
- 偵測裝置的哪一側朝上，以及裝置的旋轉方式。
- 瞭解何時以及如何回應動作和方向事件。
哪一端朝上？
如要使用裝置方向和動作事件傳回的資料，請務必瞭解提供的值。
地球座標架構
地球座標架構由 X、Y 和 Z 值所描述，並根據重力和標準磁性方向進行對齊。
| 座標系統 | |
|---|---|
X |
代表東西方向 (東方為正值)。 |
Y |
代表南北方向 (北方為正向)。 |
Z |
代表垂直於地面的上下方向 (向上為正)。 |
裝置座標框架
裝置座標框架由 x、y 和 z 值描述，並根據裝置的中心對齊。
| 座標系統 | |
|---|---|
X |
在螢幕平面上，正向是向右。 |
Y |
在螢幕平面上，正值朝上。 |
Z |
與螢幕或鍵盤垂直，正值向外延伸。 |
在手機或平板電腦上，裝置的方向會根據螢幕的一般方向而定。對於手機和平板電腦，則是根據裝置是否處於直向模式。對於桌上型電腦或筆記型電腦，系統會根據鍵盤來判斷方向。
旋轉資料
旋轉資料會以 歐拉角的形式傳回，代表裝置座標框架和地球座標框架之間的差異度數。
Alpha 值
沿 Z 軸旋轉。當裝置頂端直接指向北方時，alpha 值為 0°。當裝置以逆時針方向旋轉時，alpha 值會增加。
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!';
}
處理裝置方向事件
裝置移動或變更方向時，裝置方向事件就會觸發。它會傳回裝置目前位置與地球座標架構之間的差異資料。
事件通常會傳回三個屬性：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/s2 為單位) 的資料。部分裝置沒有排除重力影響的硬體。
事件會傳回四個屬性：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!」按鈕後，系統會要求使用者跳躍。在此期間，網頁會儲存最大 (和最小) 加速度值，並在跳躍後告知使用者最大加速度。