裝置定向

裝置動作和定位事件能存取行動裝置中內建的加速計、陀螺儀和羅盤。

這些事件可用於多種用途; 例如在遊戲中要控制角色的方向,或判斷角色應該跳多高。 當用於 GeoLocation 時,它可以建立更精確的逐向式導航系統, 或提供有關商店所在的資訊。

哪一端朝上?

要使用裝置定向和動作事件所傳回的資料, 理解所提供的值很重要。

地球座標視框。

XYZ 值所描述的地球座標視框, 是根據重力和標準的磁性定向對準。

  • X:代表東西方向 (其中東是正值)。
  • Y:代表南北方向 (北是正值)。
  • Z:表示上下方向, 垂直於地面 (其中上是正值)。

裝置座標框架的圖例

xyz 值所描述的裝置座標框架, 是根據裝置中心對準。

裝置座標框架的圖例

  • x:在螢幕平面上,往右為正值。
  • y:在螢幕平面上,往上為正值。
  • z:垂直於螢幕或鍵盤, 遠離為正值。

在手機或平板電腦上, 裝置定向是基於螢幕的典型定向。螢幕方向螢幕方向 對於手機和平板電腦而言, 它則是基於垂直模式下的裝置。 對於桌上型電腦或筆記型電腦, 定向是考慮與鍵盤的相對位置。

旋轉資料

旋轉資料會被傳回為 [尤拉角] (http://en.wikipedia.org/wiki/Euler_angles){: .external}, 代表裝置的座標框架與地球座標框架之間差異的角度數字。

alpha: 繞著 z 軸的旋轉角度,在裝置頂部直接指北時為 0°。 逆時針方向旋轉的設備價值就增加了。`alpha`
beta: 繞著 x 軸的旋轉,在裝置頂部與底部和地球表面等距時為 0°。 裝置頂部倒向地球表面時, 此值會增加。
gamma: 繞著 y 軸的旋轉,當裝置左右側和地球表面等距時為 0°。 右側倒向地球表面時, 此值會增加。

裝置定向

裝置定向事件會傳回旋轉資料,此資料包含裝置的前後與左右傾斜程度,以及電話或筆記型電腦是否具有羅盤、裝置面對的方向。

TL;DR

  • 請保守使用。
  • 支援測試。
  • 不要每次定向事件就更新 UI;反之請同步至 requestAnimationFrame。

使用裝置定位事件的時機

裝置定向事件有幾個用途。 例如:

  • 當使用者移動時更新地圖。
  • 細微的 UI 調校,例如新增視差效果。
  • 結合地理位置,可用於逐向式導航。

查看支援並接聽事件

若要接聽 DeviceOrientationEvent, 首先請查看瀏覽器是否支援這些事件。 然後,將事件接聽器附加到 window 物件,接聽 deviceorientation 物件。

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

處理裝置定位事件

當裝置移動或變更方向時, 裝置定位事件會觸發。 它會傳回裝置在目前位置相對於 之間差異的資料 地球座標視框

此事件通常會傳回三個屬性, alphabetagamma。 在 Mobile Safari 上, 額外參數webkitCompassHeading會與羅盤標題一起傳回 。

裝置動作

裝置動作提供在特定時刻套用在裝置身上的加速度,以及旋轉速度的資訊。

TL;DR

  • 在需要裝置的目前動作時,使用裝置動作。
  • rotationRate 是以 °/sec 為單位呈現。
  • accelerationaccelerationWithGravity 是以 m/sec2 為單位呈現。
  • 請注意瀏覽器實作之間的差異。

使用裝置動作事件的時機

裝置動作事件有有幾個用途。 例如:

  • 搖晃手勢以重新整理資料。
  • 在遊戲中導致角色跳躍或移動。
  • 針對健康和健身的應用程式

查看支援並接聽事件

要接聽 DeviceMotionEvent, 首先查看瀏覽器是否支援這些事件。 然後,將事件接聽器附加到 window 物件,接聽 devicemotion 物件。

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

處理裝置動作事件

裝置動作事件會以規律周期觸發, 並及時在當下傳回關於裝置的旋轉 (每秒 ° 次) 和加速度 (單位為 m/sec2) 的資料。 某些裝置沒有必要硬體, 可以排除重力的作用。

此事件會返回四個屬性、 accelerationIncludingGravityacceleration (排除重力的影響)、 rotationRateinterval

例如,讓我們看看手機放在平坦桌面上, 螢幕朝上。

狀態 旋轉 加速度 (m/s2) 帶重力的加速度 (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]

反之,如果手持電話時,螢幕垂直於地面, 並直接面對檢視者:

狀態 旋轉 加速度 (m/s2) 帶重力的加速度 (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;
}

在點選「執行!」按鈕後,使用者被告知要跳躍!在這段時間中, 頁面會儲存最大 (和最小) 的加速度值,並在跳躍後, 告知使用者他們的最大加速度。