HTML5晃動DeviceMotionEvent事件

關於devicemotion

html5提供了幾個新的DOM事件來獲得設備物理方向及運動的信息，包括：陀螺儀、羅盤及加速計。

第一個DOM事件是**deviceorientation**，其提供設備的物理方向信息，表示為一系列本地坐標系的旋角。

第二個DOM事件是**devicemotion**，其提供設備的加速信息，表示為定義在設備上的坐標系中的卡爾迪坐標。其也提供了設備在座標系中的自轉速率。

第三個DOM事件是**compassneedscalibration**，其用於通知Web站點使用羅盤資訊校準上述事件。

原理

開發者從各個內建感測器獲取未經修改的感測數據，並觀測或響應設備各種運動和角度變化。這些感測器包括陀螺儀、加速器和磁力儀(羅盤)。加速器和陀螺儀的資料都是描述沿著iOS設備三個方向軸上的位置，對於一個垂直屏幕擺放的iPhone來說，X方向從設備的左邊(負)到右邊(正)，Y方向則是由設備的底部(-)到頂部(+)，而Z方向為垂直於螢幕由設備的背面(-)到正面(+)。

DeviceMotionEvent 會在設備發生有意義的擺動(或運動)時產生.事件物件封裝有產生的間距值,旋轉率,和設備加速度.

加速度的計算方式是重力和使用者產生的兩個加速度向量之和.設備是透過陀螺儀和加速計來區別這兩者的.

透過DeviceMotion對設備運動狀態的判斷，則可以幫助我們在網頁上就實現「搖一搖」的交互效果。

事件監聽

if ((window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
  document.getElementById("dmEvent").innerHTML = "Not supported on your device."
}

捕捉重力加速

var acceleration = eventData.accelerationIncludingGravity;

搖一搖demo

var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;       
function deviceMotionHandler(eventData) {        
  var acceleration =eventData.accelerationIncludingGravity;
  var curTime = new Date().getTime();       
  if ((curTime - last_update)> 300) {                
      var diffTime = curTime -last_update;
      last_update = curTime;       
      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;       
      var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;          
           if (speed > SHAKE_THRESHOLD) {
                alert("shaked!");
      }
      last_x = x;
      last_y = y;
      last_z = z;
    }
}

另外一個栗子~

function deviceMotionHandler(eventData) {
  // 捕捉重力加速度
  var acceleration = eventData.accelerationIncludingGravity;     
  // 打印加速数据
  var rawAcceleration = "[" +  Math.round(acceleration.x) + ", " +Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";
// Z轴,可知设备朝上或者朝下
  var facingUp = -1;
  if (acceleration.z > 0) {
    facingUp = +1;
  }     
  // 根据重力通过 acceleration.x|y 转换得到加速值,
  // 运用重力加速度9.81来计算得到一个百分比然后乘以转换角度90
  var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
  var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);     
  // 打印加速度的计算结果
  document.getElementById("moAccel").innerHTML = rawAcceleration;
  document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
  document.getElementById("moCalcTiltFB").innerHTML = tiltFB;     
  // 将2D和3D的转换应用到图片上
  var rotation = "rotate(" + tiltLR + "deg) (1,0,0, " + (tiltFB) + "deg)";
  document.getElementById("imgLogo").style.webkitTransform = rotation;
}