html5 搖一搖事件監聽

先來看下html5的這幾個特性：

• 1.deviceOrientation：方向傳感器數據的事件，經過監聽該事件能夠獲取手機靜態狀態下的方向數據；
• 2.deviceMotion: 運動傳感器數據事件，經過監聽該事件能夠獲取手機運動狀態下的運動加速度數據；
• 3.DeviceMotionEvent: 判斷瀏覽器是否支持該事件屬性，若是支持則監聽deviceMotion事件，返回設備有關於加速度和旋轉的事件對象，該對象包含兩個屬性，accelerationIncludingGravity（含重力的加速度）和acceleration（加速度），後者排除了重力的影響。其中加速度的數據包含三個軸：x，y和z。

如何判斷用戶搖晃了手機？考慮的要點以下： 一、用戶大多時候都是以一個方向爲主晃動手機來進行搖動； 二、在晃動時三個方向的加速度數據一定都會變化； 三、咱們不能誤判手機正常的運動行爲，例如咱們在走路時，放在褲兜裏的手機也會有加速度數據變化。 綜上，咱們應該針對三個方向的加速度進行計算，間隔測量它們，考察它們在固定時間段裏的變化率，並且須要爲它肯定一個閾值來觸發動做。

代碼以下：

var shakeThreshold = 1000; // 定義一個搖動的閾值
    var lastUpdate = 0; // 記錄上一次搖動的時間
    var x, y, z, lastX, lastY, lastZ; // 定義x、y、z記錄三個軸的數據以及上一次觸發的數據

// 監聽傳感器運動事件
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('本設備不支持devicemotion事件');
}

// 運動傳感器處理
function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity; // 獲取含重力的加速度
    var curTime = new Date().getTime();

    // 100毫秒進行一次位置判斷
    if ((curTime - lastUpdate) > 100) {

        var diffTime = curTime - lastUpdate;
        lastUpdate = curTime;

        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;

        var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
        // 先後x, y, z間的差值的絕對值和時間比率超過了預設的閾值，則判斷設備進行了搖晃操做
        if (speed > shakeThreshold) {
            doSomething();
        }

        lastX = x;
        lastY = y;
        lastZ = z;
    }
}