H5案例分享：html5重力感應事件

標籤：

html5重力感應事件

一、手機重力感應圖形分析

1、裝置圍繞z軸的旋轉角度為α,α角度的取值範圍在[0,360)。

裝置在初始位置,與地球（XYZ）和身體（XYZ）某個位置對齊。

裝置圍繞z軸的旋轉角度為α,並與先前的x和y軸位置對比，顯示x，y軸新座標為x0和y0。

 

2、裝置圍繞x軸的旋轉角度為β,β角度的取值範圍在(-180,180)。

裝置圍繞x軸的旋轉角度為β,並與先前的y和z軸的位置對比，顯示y，z軸新座標為y0和z0。

 

3、裝置圍繞y軸的旋轉角度為γ,γ角度的取值範圍在(-90,90)。

裝置圍繞y軸的旋轉角度為γ,並與先前的x和z軸的位置對比，顯示x，z軸新座標為x0和z0。

 

 

二、事件介紹

1、deviceorientation 提供裝置的物理方向資訊，表示為一系列本地座標系的旋角。

2、devicemotion 提供裝置的加速資訊，表示為定義在裝置上的座標系中的α座標。其還提供了裝置在座標系中的自轉速率。若可行的話，事件應該提供裝置重心處的加速資訊。

3、compassneedscalibration 用於通知Web網站使用羅盤資訊校準上述事件。

 

 

 

三、使用說明

1、 註冊一個deviceorientation事件的接收器：

  window.addEventListener("deviceorientation", function(event) {

      // 處理event.alpha、event.beta及event.gamma

  }, true);

 

2、將裝置放置在水平表面，螢幕頂端指向西方，則其方向資訊如下：

  {alpha: 90,

   beta: 0,

   gamma: 0};

為了獲得羅盤指向，可以簡單的使用360度減去alpha。若設被平行於水平表面，其羅盤指向為(360 - alpha)。

 

3、若使用者手持功能，螢幕處於一個垂直平面且螢幕頂端指向上方。beta的值為90，alpha和gamma無關。 使用者手持功能，面向alpha角度，螢幕處於一個垂直螢幕，螢幕頂端指向右方，則其方向資訊如下：

  {alpha: 270 - alpha,

   beta: 0,

   gamma: 90};

 

4、顯示自訂UI介面指導使用者校準羅盤：

 window.addEventListener("compassneedscalibration", function(event) {

      alert(‘您的羅盤需要校準，請將裝置沿數字8方向移動。‘);

      event.preventDefault();

  }, true);

 

5、註冊一個devicemotion時間的接收器：

 window.addEventListener("devicemotion", function(event) {

      // 處理event.acceleration、event.accelerationIncludingGravity、

      // event.rotationRate和event.interval

  }, true);

 

6、將裝置放置在水平表面，螢幕向上，acceleration為零，則其accelerationIncludingGravity資訊如下：

  {x: 0,

   y: 0,

   z: 9.81};

 

7、裝置做自由落體，螢幕水平向上，accelerationIncludingGravity為零，則其acceleration資訊如下：

  {x: 0,

   y: 0,

   z: -9.81};

 

8、將裝置安置於車輛至上，螢幕處於一個垂直平面，頂端向上，面向車輛後部。車輛行駛速度為v，向右側進行半徑為r的轉彎。裝置記錄acceleration和accelerationIncludingGravity在位置x處的情況，同時裝置還會記錄rotationRate.gamma的負值：

  {acceleration: {x: v^2/r, y: 0, z: 0},

   accelerationIncludingGravity: {x: v^2/r, y: 0, z: 9.81},

   rotationRate: {alpha: 0, beta: 0, gamma: -v/r*180/pi} };

 

 

四、DEMO代碼：

if (window.DeviceMotionEvent) { 
  window.addEventListener(‘devicemotion‘,deviceMotionHandler, false); 
} 
var speed = 30;//速度
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) { 
  var acceleration =eventData.accelerationIncludingGravity;
     x = acceleration.x;
     y = acceleration.y;
     z = acceleration.z;
     if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
       //簡單的搖一搖觸發代碼
       alert(‘觸發了重力感應‘);
     }
     lastX = x;
     lastY = y;
     lastZ = z;
}

DEMO示範

H5案例分享：html5重力感應事件