HTML5搖一搖（上）—如何判斷設備搖動

剛剛過去的一年裏基於微信的H5營銷可謂是十分火爆，經過轉發朋友圈帶來的病毒式傳播效果相信你們都不太陌生吧，恰好最近農曆新年將至，我就拿一個「搖籤」的小例子來談一談HTML5中如何調用手機重力感應的接口

演示demo：「搖一搖，萬福籤」

什麼是重力感應

說到重力感應有一個東西不得不提，那就是就是陀螺儀，陀螺儀就是內部有一個陀螺，陀螺儀一旦開始旋轉，因爲輪子的角動量，陀螺儀有抗拒方向改變的特性，它的軸因爲陀螺效應始終與初始方向平行，這樣就能夠經過與初始方向的誤差計算出實際方向。

手機中的方位軸

在Web應用中調用手機陀螺儀接口

具體實現搖一搖能夠經過HTML5中的DeviceOrientationEvent或者DeviceMotionEvent，兩者的區別在於DeviceOrientation只是判斷用戶設備的偏轉角度，而DeviceMotion則能夠計算用戶手機移動的加速度

//搖一搖(使用DeviceOrientation事件, 本質是計算偏轉角)
if(window.DeviceOrientationEvent){
    var lastAcc;    // 用來存儲上一次的deviceorientation事件
    $(window).on('deviceorientation', function(event) {
        var delA = Math.abs(event.alpha - lastAcc.alpha);    // alpha軸偏轉角
        var delB = Math.abs(event.beta - lastAcc.beta);    // beta軸偏轉角
        var delG = Math.abs(event.gamma - lastAcc.gamma);    // gamma軸偏轉角
        if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {
            // 用戶設備搖動了，觸發響應操做
            // 此處的判斷依據是任意兩個軸篇轉角度大於15度
            alert('搖了');
        }
        lastAcc = event;    // 存儲上一次的event
    });

//搖一搖(使用DeviceMotion事件, 推薦,應爲能夠計算加速度)
if(window.DeviceMotionEvent) {
    var speed = 25;    // 用來斷定的加速度閾值，太大了則很難觸發
    var x, y, z, lastX, lastY, lastZ;
    x = y = z = lastX = lastY = lastZ = 0;

    window.addEventListener('devicemotion', function(event){
        var acceleration = event.accelerationIncludingGravity;
        x = acceleration.x;
        y = acceleration.y;
        if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
            // 用戶設備搖動了，觸發響應操做
            // 此處的判斷依據是用戶設備的加速度大於咱們設置的閾值
            alert('搖了');
        }
        lastX = x;
        lastY = y;
    }, false);
}

搖一搖的代碼判斷邏輯

var isStarted = false;    // 是否開始搖動

// 開始搖籤
function start() {
    isStarted = true;
    $('.qiancover').hide();    //把封面背景上的靜態籤筒隱藏
    $('.decode').hide();    // 解籤頁面隱藏
    $('.result').show();    // 把籤筒搖動的div顯示出來
    // setTimeout(showDecode, 3000);
}

// 顯示正在解籤
function showDecode() {
    $('.result').hide();    // 把籤筒搖動的div隱藏起來
    $('.decode').show();    // 顯示正在解籤
    setTimeout(jumpToDecode, 3000);
}

// 跳至籤文頁面
function jumpToDecode(){
    var urls = ["#", "#"];    // 用來存籤文結果頁面
    var jumpTo = urls[parseInt(Math.random() * urls.length)];    // 隨機跳轉至籤文結果頁面
    window.location = jumpTo;
};

---

傳送門：HTML5搖一搖（下）—如何實現籤筒搖動動畫

博客原文(持續更新)：HTML5搖一搖（上）—如何判斷設備搖動

示例代碼：https://github.com/lionrock/H...

參考文檔：DeviceOrientation Event Specification