H5监听摇一摇和手机倾斜事件（重力感应）

本文介绍如何使用HTML5的DeviceMotion和DeviceOrientationAPI实现WebApp的摇一摇功能及重力感应方向控制。通过监听手机的加速度和旋转角度，可实现如摇一换歌、屏幕旋转等交互。

摘要由CSDN通过智能技术生成

摇一摇功能（DeviceMotion）

摇一摇功能是很多原生APP都可以实现的功能，如微信中的摇一摇找好友，QQ音乐中的摇一摇换歌等。它们都是利用了手机加速传感器提供的API，当监听到手机加速变化的事件时，根据获取的加速值来执行不同的动作。

Web APP中HTML5 也提供了类似的接口，就是DeviceMotionEvent。DeviceMotion封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

属性	释义
event.accelaration	x(y,z):设备在x(y,z)方向上的移动加速度值
event.accelarationIncludingGravity	x(y,z):考虑了重力加速度后设备在x(y,z)方向上的移动加速度值
event.rotationRate	alpha,beta,gamma:设备绕x,y,z轴旋转的角度

	var shakeThreshold = 1000; // 定义一个摇动的阈值
    var lastUpdate = 0; // 记录上一次摇动的时间
    var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据
    // 监听传感器运动事件
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
    //浏览器不支持DeviceMotion
      alert('天呐，你的手机竟然还不支持摇一摇ヾ(◍°∇°◍)ﾉﾞ');
    }
   // 运动传感器处理
   function deviceMotionHandler(eventData) {
       var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
       var curTime = new Date().getTime();
       // 100毫秒进行一次位置判断
       if ((curTime - lastUpdate) > 100) {
           var diffTime = curTime - lastUpdate;
           lastUpdate = curTime;
           x = acceleration.x;
           y = acceleration.y;
           z = acceleration.z;
           var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
           if (speed > shakeThreshold) {
              alert("摇一摇触发")
           }
           lastX = x;
           lastY = y;
           lastZ = z;
        }
 	}

重力感应方向控制（DeviceOrientation）

重力感应也是原生APP中经常见到的一个功能，在Web App中的应用多见于判断屏幕的旋转方向，以及在此基础上实现的场景应用，如控制页面上物体的左右移动，加减速等。

在Web App中实现以上的功能，需要实时获取屏幕的旋转方向参数，这些参数可以从浏览器的利用HTML5的DeviceOrientation API获得。

属性	释义
alpha	设备指示的方向，根据指南针的设定情况而定
beta	设备绕x轴旋转的角度
gamma	设备绕y轴旋转的角度

工作原理 :
根据event对象的三个方向的参数来确定设备的旋转角度。其中，alpha的取值范围是0-360,这个需要根据设备的指南针设定情况而定，一般来说，设备指向正北方向时为0.beta值为设备绕x轴旋转的角度，取值范围为-180-180。gamma取值范围-90-90.

这里面alpha值的意义并不大，主要参考beta和gamma值。
当屏幕从水平沿y轴向左倾斜时gamma值变为负值，向右倾斜变为正值。
当屏幕从水平沿x轴向前倾斜时beta值变为正值，向后倾斜时变为负值。

所以，如果我们设定一个阈值，当beta和gamma的绝对值大于这个阈值时，我们就认为设备发生了旋转。另外根据beta和gamma的值来判断向左倾斜还是向右倾斜，以及倾斜的程度。

// 绑定deviceorientation事件和处理程序
if(window.DeviceOrientationEvent){
    window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
}else{
    alert("您的浏览器不支持DeviceOrientation");
}
function DeviceOrientationHandler(event){
    var alpha = event.alpha,beta = event.beta,gamma = event.gamma;
    if(alpha != null || beta != null || gamma != null){
    	//各个方向旋转的值
    	//alert("alpha:" + alpha + "<br />beta:" + beta + "<br />gamma:" + gamma)
         //判断屏幕方向
        if( gamma > 0 ){
           alert("向右倾斜");
         }else{
           alert("向左倾斜");
         }
     }
 }