HTML5實現搖一搖

1、原理：

利用devicemotion獲取移動速度，獲得device移動時相對以前某個時間的差值比

 

2、效果圖：

 

 3、源碼：

//先判斷設備是否支持HTML5搖一搖功能
if (window.DeviceMotionEvent) {
    //獲取移動速度，獲得device移動時相對以前某個時間的差值比
    window.addEventListener('devicemotion', deviceMotionHandler, false);
}else{
    alert('您好，你目前所用的設備好像不支持重力感應哦！');
}
 
//設置臨界值,這個值可根據本身的需求進行設定，默認就3000也差很少了
var shakeThreshold = 3000;
//設置最後更新時間，用於對比
var lastUpdate     = 0;
//設置位置速率
var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;
 
function deviceMotionHandler(event){
 
    //得到重力加速
    var acceleration =event.accelerationIncludingGravity;
 
    //得到當前時間戳
    var curTime = new Date().getTime();
 
    if ((curTime - lastUpdate)> 100) {
 
        //時間差
        var diffTime = curTime -lastUpdate;
            lastUpdate = curTime;
 
 
        //x軸加速度
        curShakeX = acceleration.x;
        //y軸加速度
        curShakeY = acceleration.y;
        //z軸加速度
        curShakeZ = acceleration.z;
 
        var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - lastShakeY - lastShakeZ) / diffTime * 10000;
 
        if (speed > shakeThreshold) {
            //TODO 相關方法，好比：
 
            //播放音效
            shakeAudio.play();
            //播放動畫
            $('.shake_box').addClass('shake_box_focus');
            clearTimeout(shakeTimeout);
            var shakeTimeout = setTimeout(function(){
                $('.shake_box').removeClass('shake_box_focus');
            },1000)
 
        }
 
        lastShakeX = curShakeX;
        lastShakeY = curShakeY;
        lastShakeZ = curShakeZ;
    }
}
 
 
//預加搖一搖聲音
var shakeAudio = new Audio();
    shakeAudio.src = 'sound/shake_sound.mp3';
var shake_options = {
    preload  : 'auto'
}
for(var key in shake_options){
    if(shake_options.hasOwnProperty(key) && (key in shakeAudio)){
        shakeAudio[key] = shake_options[key];
    }
}

 4、源碼下載：點擊下載