DeviceMotionEvent事件介紹

本章節介紹一下html5中的DeviceMotionEvent事件，需要的朋友可以做一下參考。

事件介紹:

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

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

（3）.compassneedscalibration 用於通知Web站點使用羅盤資訊校準上述事件。

用法簡介:

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

[JavaScript] 純文字檢視 複製程式碼
window.addEventListener("deviceorientation", function (event) {
  // 處理event.alpha、event.beta及event.gamma
}, true);

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

[JavaScript] 純文字檢視 複製程式碼
{
  alpha: 90,
   beta: 0,
   gamma: 0
};

為了獲得羅盤指向，可以簡單的使用360度減去alpha。若設被平行於水平表面，其羅盤指向為(360 - alpha)。 若使用者手持裝置，螢幕處於一個垂直平面且螢幕頂端指向上方。beta的值為90，alpha和gamma無關。 使用者手持裝置，面向alpha角度，螢幕處於一個垂直螢幕，螢幕頂端指向右方，則其方向資訊如下：

[JavaScript] 純文字檢視 複製程式碼
{
  alpha: 270 - alpha,
  beta: 0,
  gamma: 90
};

只用自定義介面通知使用者校準羅盤:

[JavaScript] 純文字檢視 複製程式碼
window.addEventListener("compassneedscalibration", function (event) {
  alert('您的羅盤需要校準，請將裝置沿數字8方向移動。');
  event.preventDefault();
}, true);

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

[JavaScript] 純文字檢視 複製程式碼
window.addEventListener("devicemotion", function (event) {
  // 處理event.acceleration、event.accelerationIncludingGravity、
  // event.rotationRate和event.interval
}, true);

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

[JavaScript] 純文字檢視 複製程式碼
{
  x: 0,
  y: 0,
  z: 9.81
};

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

[JavaScript] 純文字檢視 複製程式碼
{
  x: 0,
  y: 0,
  z: -9.81
};

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

[JavaScript] 純文字檢視 複製程式碼
{
  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} 
};

應用例項:

[JavaScript] 純文字檢視 複製程式碼
if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
}
var speed = 30;//speed
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(1);
  }
  lastX = x;
  lastY = y;
  lastZ = z;
}