HTML5實現搖一搖

一、原理：

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

 

二、效果圖：

 

三、源碼：

 

//先判斷設備是否支持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];
    }
}

 

 

四、源碼下載：點擊下載

 

TIPS: 有優化的代碼可以提出來一起分享，一起進步。。。