對js陀螺儀的認知理解

前端小然子發表於2019-04-10
JS

檢測裝置方向

監聽 deviceorientation

window.addEventListener("deviceorientation", handleOrientation, true);
複製程式碼

event中包含以下幾個值

屬性 描述
type 事件的型別。
bubbles 事件是否正常起泡
cancelable 該活動是否可以取消？
alpha 裝置繞Z軸的當前方向; 也就是說，裝置圍繞垂直於裝置的線旋轉多遠。
beta 裝置圍繞X軸的當前方向; 也就是說，裝置向前或向後傾斜多遠。
gamma 裝置繞Y軸的當前方向; 也就是說，裝置向左或向右轉動多遠。
absolute 如果方向是作為裝置座標系和地球座標系之間的差異提供的，則該值是該值; 如果裝置無法檢測到地球座標系，則此值為false。

需要重點關注這四個返回值

  • alpha
  • beta
  • gamma
  • absolute

手機軸線如圖：

手機軸線

一、理解alpha

alpha 是裝置繞Z軸的方向

它的取值範圍在0到360度之間。當裝置頂端指向正北方向時，該屬性的取值為0。

即：圍繞垂直手機螢幕的軸轉動 如圖：

alpha

二、理解beta

beta 是裝置繞X軸的方向

它的取值範圍在-180到180度之間。當裝置與地球表面保持平行時，該屬性的取值為0。

即：圍繞平行音量鍵的軸轉動 如圖：

beta

三、理解gamma

gamma 是裝置繞Y軸的方向

它的取值範圍在-90到90度之間。當該裝置與地球表面保持平行時，該屬性的取值為0。

即：圍繞平行充電口的軸轉動 如圖：

gamma

四、理解absolute

absolute 是用來判斷是否是地球座標系。

如果當前裝置座標系與地球座標系相對應，則返回true， 否則返回false；

返回值為true時候，可以進行使用其他座標系作為基準

總結

  alpha => 圍繞垂直手機螢幕的軸轉動
  beta  => 圍繞平行音量鍵的軸轉動
  gamma => 圍繞平行充電口的軸轉動

  absolute => 返回是否與地球座標系相對應
複製程式碼

示例程式碼：

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function(event) {
        // alpha: 圍繞垂直手機螢幕的軸轉動的旋轉角度
        var rotateDegrees = event.alpha;
        // gamma: 圍繞平行充電口的軸轉動的旋轉角度
        var leftToRight = event.gamma;
        // beta: 圍繞平行音量鍵的軸轉動的旋轉角度
        var frontToBack = event.beta;

        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
    }, true);
}

var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
    // 彈奏一曲夏威夷吉他
};
複製程式碼

對於瀏覽器相容性方面 可以在使用時候參照MDN的說明

相關文章