裝置動作和方向事件可讓使用者存取行動裝置內建的加速計、陀螺儀和指南針。
這些事件可用於許多目的;在遊戲中,例如控制角色的方向或動作。如果搭配地理位置使用,系統就能協助建立更準確的即時路線導航資訊,或提供特定位置的相關資訊。
摘要
- 偵測裝置的哪一側朝上,以及裝置的旋轉方式。
- 瞭解回應動作和方向事件的時機和方式。
哪一邊朝上?
如要使用裝置方向和動作事件傳回的資料,請務必瞭解提供的值。
地球座標框架
地球座標框架 (由 X
、Y
和 Z
值描述) 會根據重力和標準磁力方向對齊。
座標系統 | |
---|---|
X |
代表東西向方向 (東為正數)。 |
Y |
代表南北方向 (北方為正數)。 |
Z |
代表往上方向,與地面垂直方向 (為正值)。 |
裝置座標邊框
x
、y
和 z
值描述的裝置座標框架會根據裝置中心對齊。
座標系統 | |
---|---|
X |
在螢幕的前方 (正前方)。 |
Y |
在螢幕的平面上,朝頂端正向方向。 |
Z |
與螢幕或鍵盤相對,正向延伸。 |
使用手機或平板電腦時,裝置的方向會以螢幕的一般方向為基礎。如果是手機和平板電腦,則會以處於直向模式的裝置而定。如果是桌上型或筆記型電腦,則會考量到與鍵盤方向相關的螢幕方向。
輪替資料
旋轉資料會以厄爾角度的形式傳回,代表裝置座標框架與地球座標框架之間的差距度。
Alpha 值
沿著 Z 軸的旋轉。如果裝置頂端直接指向北方,alpha
值是 0°。如果裝置逆時針旋轉,alpha
值就會增加。
Beta 版
沿著 X 軸的旋轉方向。如果裝置的頂部和底部與地表保持等距離,beta
值是 0°。這個值會隨著裝置頂端接近地表位置而增加。
伽瑪文
沿著 Y 軸的旋轉。如果裝置的左右邊緣與地表保持等距離,gamma
值是 0°。這個值會隨著右側增加而增加。
裝置螢幕方向
裝置螢幕方向事件會傳迴旋轉資料,包括裝置正向後傾斜的程度,以及手機或筆記型電腦有指南針 (如果手機或筆電有指南針),則是朝向裝置的方向。
請謹慎使用。
測試支援。不要在每個方向事件上更新 UI,而是同步至 requestAnimationFrame
。
使用裝置方向事件的時機
裝置方向事件有多種用途。相關示例包括:
- 在使用者移動時更新地圖。
- 細微的使用者介面調整,例如新增視差效果。
- 結合地理位置功能,可用於即時路線導航。
檢查支援及監聽事件
如要監聽 DeviceOrientationEvent
,請先檢查瀏覽器是否支援這些事件。接著,將事件監聽器附加至用於監聽 deviceorientation
事件的 window
物件。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
處理裝置方向事件
當裝置移動或變更方向時,就會觸發裝置方向事件。而是傳回裝置目前位置與地球座標框架之間的差異資料。
該事件通常會傳回三個屬性:alpha
、beta
和 gamma
。在行動版 Safari 中,系統會傳回一個包含指南針標題的額外參數 webkitCompassHeading
。
裝置動作
裝置螢幕方向事件會傳迴旋轉資料,包括裝置正向後傾斜的程度,以及手機或筆記型電腦有指南針 (如果手機或筆電有指南針),則是朝向裝置的方向。
需要裝置的目前動作時,使用裝置動作。rotationRate
是以°/秒為單位。acceleration
和 accelerationWithGravity
是以 m/秒2 為單位。瞭解不同瀏覽器導入方式的差異。
使用裝置動作事件的時機
裝置動作事件有多種用途。相關示例包括:
- 搖動手勢即可重新整理資料。
- 在遊戲中,要讓角色跳躍或移動,
- 適用於健康與健身應用程式。
檢查支援及監聽事件
如要監聽 DeviceMotionEvent
,請先檢查瀏覽器是否支援事件。接著,將事件監聽器附加至用於監聽 devicemotion
事件的 window
物件。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
處理裝置動作事件
裝置動作事件會定期觸發,並傳回當下的裝置旋轉 (以度/秒為單位) 和加速 (以 m/秒2 為單位) 相關資料。部分裝置不具備可排除重力效果的硬體。
該事件會傳回四個屬性:accelerationIncludingGravity
、acceleration
,不包括重力、rotationRate
和 interval
的影響。
以手機螢幕為例,讓我們看一下手機,手機螢幕朝上。
狀態 | 旋轉 | 加速 (公尺/秒2) | 重力加速度 (m/s2) |
---|---|---|---|
未移動 | [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) | 重力加速度 (m/s2) |
---|---|---|---|
未移動 | [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;
}
輕觸「開始!」按鈕後,系統會提示使用者跳躍。在此期間,頁面會儲存最長 (及最小) 的加速值,並在跳躍後告知使用者的最大加速度。