h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪、罗盘及加速计)的Dom事件，事件描述如下：

deviceorientation：提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
devicemotion：提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。
compassneedscalibration：用于通知Web站点使用罗盘信息校准上述事件。

51220网站目录 https://www.51220.cn

原理：

开发者从各个内置传感器那里获取未经修改的传感数据，并观测或响应设备各种运动和角度变化。这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。
加速器和陀螺仪的数据都是描述沿着iOS设备三个方向轴上的位置，对于一个竖屏摆放的iPhone来说，X方向从设备的左边(负)到右边(正)，Y方向则是由设备的底部(-)到顶部(+)，而Z方向为垂直于屏幕由设备的背面(-)到正面(+)。

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度，加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的，通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。

 

利用devicemotion实现手机摇一摇

摇一摇的实现需借助html5新增的devicemotion事件，获取设备在位置和方向上的改变速度的相关信息。devicemotion事件对象中有一个accelerationIncludingGravity属性，该属性包括：一个包含x、y 和z 属性的对象，在考虑z轴自然重力加速度的情况下，告诉你在每个方向上的加速度。

<script type="text/javascript">  
    var currhandle=0;//判断操作是否完成
    if(window.DeviceMotionEvent){
        var speed = 15;  
        var x = y = z = lastX = lastY = lastZ = 0;  
        window.addEventListener('devicemotion', function(){  
            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+10) {  
                if(currhandle==0){
                    setbegin();//摇一摇事件触发后执行操作
                    currhandle=1;
                }    
            }  
            lastX = x;  
            lastY = y;  
            lastZ = z;
        }, false);  
    }else{
        console.log("您的设备不支持重力感应事件！")
    }
    function setbegin(){//开始操作
        var color = new Array('#ff9', '#ff0', '#f00', '#000', '#00f', '#0ff');  
        document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
        currhandle=0;
    }     
</script>