HTML5实现摇一摇

一、原理：

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

 

二、效果图：

 

三、源码：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

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