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: 有优化的代码可以提出来一起分享，一起进步。。。

原标题：HTML5实现摇一摇

关键词：HTML