關(guān)于js陀螺儀的理解分析

更新時間：2019年04月11日 10:05:53 作者：前端小然子

這篇文章主要給大家介紹了關(guān)于js陀螺儀的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

檢測設(shè)備方向

監(jiān)聽 deviceorientation

window.addEventListener("deviceorientation", handleOrientation, true);

event中包含以下幾個值

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

需要重點關(guān)注這四個返回值

alpha
beta
gamma
absolute

手機軸線如圖：

一、理解alpha

alpha 是設(shè)備繞Z軸的方向

它的取值范圍在0到360度之間。當設(shè)備頂端指向正北方向時，該屬性的取值為0。

即：圍繞垂直手機屏幕的軸轉(zhuǎn)動

如圖：

二、理解beta

beta 是設(shè)備繞X軸的方向

它的取值范圍在-180到180度之間。當設(shè)備與地球表面保持平行時，該屬性的取值為0。

即：圍繞平行音量鍵的軸轉(zhuǎn)動

如圖：

三、理解gamma

gamma 是設(shè)備繞Y軸的方向

它的取值范圍在-90到90度之間。當該設(shè)備與地球表面保持平行時，該屬性的取值為0。

即：圍繞平行充電口的軸轉(zhuǎn)動

如圖：

四、理解absolute

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

如果當前設(shè)備坐標系與地球坐標系相對應，則返回true，

否則返回false；

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

總結(jié)

alpha => 圍繞垂直手機屏幕的軸轉(zhuǎn)動
beta => 圍繞平行音量鍵的軸轉(zhuǎn)動
gamma => 圍繞平行充電口的軸轉(zhuǎn)動

absolute => 返回是否與地球坐標系相對應

示例代碼：

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

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

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

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: