HTML5实现摇一摇

一、原理:

利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比

 

二、效果图:

pic1pic2

 

三、源码:

 

//先判断设备是否支持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: 有优化的代码可以提出来一起分享,一起进步。。。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值