众所周知，微信有一个很牛X的功能微信摇一摇，我们要做的只需要简单的摇一摇手中的手机就可以查找多少米外的好友活着获取附近的优惠信息，那么我们如何实现网页上面的摇一摇呢？

经过一番搜索，发现了DeviceMotionEvent和navigator.vibrate这两个东西。

首先说说摇一摇, 在移动端当我们摇动手机的时候，浏览器会触发DeviceMotionEvent事件，此时我们可以通过event.accelerationIncludingGravity获取手机在x,y,z轴上的位移，然后通过位置的变化计算设备是否在快速变化加速度以达到监听设备是否在摇一摇的效果。

震动就是利用了navigator.vibrate来达到效果。

下面使我们最终的代码：

var shake = (function(){
var speed = 25; //摇一摇速度的临界值
var x = y = z = lastX = lastY = lastZ = 0;
var isShaking = false; //是否在动画中
return function init(callback){
if(window.DeviceMotionEvent){
window.addEventListener('devicemotion', function(){deviceMotionHandler(callback);}, false)
}else{
alert("not support mobile motion event");
}
}
function deviceMotionHandler(callback){
/*获取x,y,z方向的即时速度*/
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;y = acceleration.y;z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed){
if(!isShaking){
//手机震动一秒
if (navigator.vibrate) {
navigator.vibrate(1000);
}else if (navigator.webkitVibrate) {
navigator.webkitVibrate(1000);
}else if(navigator.mozVibrate){
navigator.mozVibrate(1000);
}
}else if(navigator.msVibrate){
navigator.msVibrate(1000);
}
isShaking = true;
setTimeout(function(){
callback();
isShaking = false;
},2000);
}
}
lastX = x;lastY = y;lastZ = z;
}
}());

在线Demo：http://demo.deanhan.cn/shake