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;
}