摘要：剛剛過(guò)去的一年里基于微信的營(yíng)銷(xiāo)可謂是十分火爆，通過(guò)轉(zhuǎn)發(fā)朋友圈帶來(lái)的病毒式傳播效果相信大家都不太陌生吧，剛好最近農(nóng)歷新年將至，我就拿一個(gè)搖簽的小例子來(lái)談一談中如何調(diào)用手機(jī)重力感應(yīng)的接口演示搖一搖，萬(wàn)福簽什么是重力感應(yīng)說(shuō)到重力感應(yīng)有一個(gè)東西不得

剛剛過(guò)去的一年里基于微信的H5營(yíng)銷(xiāo)可謂是十分火爆，通過(guò)轉(zhuǎn)發(fā)朋友圈帶來(lái)的病毒式傳播效果相信大家都不太陌生吧，剛好最近農(nóng)歷新年將至，我就拿一個(gè)“搖簽”的小例子來(lái)談一談HTML5中如何調(diào)用手機(jī)重力感應(yīng)的接口

演示demo：“搖一搖，萬(wàn)福簽”

說(shuō)到重力感應(yīng)有一個(gè)東西不得不提，那就是就是陀螺儀，陀螺儀就是內(nèi)部有一個(gè)陀螺，陀螺儀一旦開(kāi)始旋轉(zhuǎn)，由于輪子的角動(dòng)量，陀螺儀有抗拒方向改變的特性，它的軸由于陀螺效應(yīng)始終與初始方向平行，這樣就可以通過(guò)與初始方向的偏差計(jì)算出實(shí)際方向。

具體實(shí)現(xiàn)搖一搖可以通過(guò)HTML5中的DeviceOrientationEvent或者DeviceMotionEvent，二者的區(qū)別在于DeviceOrientation只是判斷用戶(hù)設(shè)備的偏轉(zhuǎn)角度，而DeviceMotion則可以計(jì)算用戶(hù)手機(jī)移動(dòng)的加速度

//搖一搖(使用DeviceOrientation事件, 本質(zhì)是計(jì)算偏轉(zhuǎn)角)
if(window.DeviceOrientationEvent){
    var lastAcc;    // 用來(lái)存儲(chǔ)上一次的deviceorientation事件
    $(window).on("deviceorientation", function(event) {
        var delA = Math.abs(event.alpha - lastAcc.alpha);    // alpha軸偏轉(zhuǎn)角
        var delB = Math.abs(event.beta - lastAcc.beta);    // beta軸偏轉(zhuǎn)角
        var delG = Math.abs(event.gamma - lastAcc.gamma);    // gamma軸偏轉(zhuǎn)角
        if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {
            // 用戶(hù)設(shè)備搖動(dòng)了，觸發(fā)響應(yīng)操作
            // 此處的判斷依據(jù)是任意兩個(gè)軸篇轉(zhuǎn)角度大于15度
            alert("搖了");
        }
        lastAcc = event;    // 存儲(chǔ)上一次的event
    });

//搖一搖(使用DeviceMotion事件, 推薦,應(yīng)為可以計(jì)算加速度)
if(window.DeviceMotionEvent) {
    var speed = 25;    // 用來(lái)判定的加速度閾值，太大了則很難觸發(fā)
    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) {
            // 用戶(hù)設(shè)備搖動(dòng)了，觸發(fā)響應(yīng)操作
            // 此處的判斷依據(jù)是用戶(hù)設(shè)備的加速度大于我們?cè)O(shè)置的閾值
            alert("搖了");
        }
        lastX = x;
        lastY = y;
    }, false);
}

var isStarted = false;    // 是否開(kāi)始搖動(dòng)

// 開(kāi)始搖簽
function start() {
    isStarted = true;
    $(".qiancover").hide();    //把封面背景上的靜態(tài)簽筒隱藏
    $(".decode").hide();    // 解簽頁(yè)面隱藏
    $(".result").show();    // 把簽筒搖動(dòng)的div顯示出來(lái)
    // setTimeout(showDecode, 3000);
}

// 顯示正在解簽
function showDecode() {
    $(".result").hide();    // 把簽筒搖動(dòng)的div隱藏起來(lái)
    $(".decode").show();    // 顯示正在解簽
    setTimeout(jumpToDecode, 3000);
}

// 跳至簽文頁(yè)面
function jumpToDecode(){
    var urls = ["#", "#"];    // 用來(lái)存簽文結(jié)果頁(yè)面
    var jumpTo = urls[parseInt(Math.random() * urls.length)];    // 隨機(jī)跳轉(zhuǎn)至簽文結(jié)果頁(yè)面
    window.location = jumpTo;
};

傳送門(mén)：HTML5搖一搖（下）—如何實(shí)現(xiàn)簽筒搖動(dòng)動(dòng)畫(huà)

博客原文(持續(xù)更新)：HTML5搖一搖（上）—如何判斷設(shè)備搖動(dòng)

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

參考文檔：DeviceOrientation Event Specification