移动端摇一摇与重力感应事件

移动端摇一摇与重力感应事件

　　通过html5重要特性DeviceOrientation与devicemotion实现移动端摇一摇与重力感应事件。

一.DeviceMotion

　　DeviceMotion:deviceMotion封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

       DeviceMotionEvent:

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

       event.accelarationIncludingGravity与event.accelaration的区别在于前者加入了重力加速度，即在z轴方向加了9.8，在x,y方向上的值两者相同。

示例：（当手机摇晃页面时，会弹出shaked的提示，并且在页面上显示摇晃时的x,y,z方向的加速度值。）

属性	值
SHAKE_THRESHOLD	阈值。阈值越大，触发摇晃事件时手机摇晃的程度越剧烈
x	x方向的加速值
y	y方向的加速值
z	z方向的加速值
deviceMotionHandler	摇晃事件处理程序

 

方法	作用
init	初始化Shake对象

 

参数	值
threshold	自定义阈值，默认2000
callback	摇晃后的回调函数

function Shake(threshold, callback) {  
　　this.SHAKE_THRESHOLD = threshold ? threshold : 2000; //定义阈值              
　　this.last_update = 0;  
　　this.x = this.y = this.z = this.last_x = this.last_y = this.last_z = 0;  
　　this.init = function() {  
    　　if (window.DeviceMotionEvent) {  
        　　window.addEventListener('devicemotion', this.deviceMotionHandler, false);  
    　　} else {  
        　　alert('您的浏览器不支持DeviceMotion');  
    　　}  
　　};  
　　var that = this;  
　　this.deviceMotionHandler = function(eventData) {  
    var acceleration = eventData.accelerationIncludingGravity;  
    var curTime = new Date().getTime();  
    if ((curTime - that.last_update) > 100) {  
        var diffTime = curTime - that.last_update;  
        that.last_update = curTime;  
        that.x = acceleration.x;  
        that.y = acceleration.y;  
        that.z = acceleration.z;  
        var speed = Math.abs(that.x + that.y + that.z - that.last_x - that.last_y - that.last_z) / diffTime * 10000;  
        if (speed > 2000) {  
            document.getElementById("speed").innerHTML = speed;  
        }  
        //document.getElementById("speed").innerHTML = curTime +" -"+ that.last_update + "=" + diffTime;  
        if (speed > that.SHAKE_THRESHOLD) {  
            if (window.console && console.log) {  
                console.log("shaked");  
            }  
            if (callback != undefined) {  
                callback(that);  
            }  
        }  
        that.last_x = that.x;  
        that.last_y = that.y;  
        that.last_z = that.z;  
        }  
    }  
};  

window.onload = function() {  
    var shake1 = new Shake(2000, function(obj) {  
        //alert("shaked");  
        var r = document.getElementById("result");  
        r.innerHTML = "x:" + parseInt(obj.x)　 + "";  
        r.innerHTML += "y:" + parseInt(obj.y)　 + "";  
        r.innerHTML += "z:" + parseInt(obj.z)　 + "";  
          
    });  
    shake1.init();  
};

三.DeviceOrientationEvent

工作原理：根据event对象的三个方向的参数来确定设备的旋转角度。其中，alpha的取值范围是0-360,这个需要根据设

备的指南针设定情况而定，一般来说，设备指向正北方向时为0.beta值为设备绕x轴旋转的角度，取值范围为-180-180。

gamma取值范围-90-90.

属性 值

1.alpha        设备指示的方向，根据指南针的设定情况而定 （指南针的应用只要拿到alpha就OK啦）
2.beta          设备绕x轴旋转的角度
3.gamma     设备绕y轴旋转的角度

示例：

if (window.DeviceOrientationEvent) {  
    window.addEventListener('deviceorientation', DeviceOrientationHandler, false);  
} else {  
    alert("您的浏览器不支持DeviceOrientation");  
}  
  
function DeviceOrientationHandler(event) {  
    var alpha = event.alpha,  
        beta = event.beta,  
        gamma = event.gamma,  
        stage = document.getElementById("result"),  
        dataContainerOrientation = document.getElementById("result2"),  
        yy = document.getElementById("result3");  
    if (alpha != null || beta != null || gamma != null) {  
        dataContainerOrientation.innerHTML = "alpha:" + parseInt(alpha) + "<br />beta:" + parseInt(beta) + "<br />gamma:" + parseInt(gamma);  
        //判断屏幕方向  
        var html = "";  
          
        var gamma_html = "";  
        if (gamma > 0) {  
            gamma_html = "向右倾斜";  
        } else {  
            gamma_html = "向左倾斜";  
        }  
        //html += "<br />" + gamma_html  
        yy.innerHTML = gamma_html;  
            } else {  
        dataContainerOrientation.innerHTML = "当前浏览器不支持DeviceOrientation";  
    }  
}  

 这里面alpha值的意义并不大，主要参考beta和gamma值。
 当屏幕从水平沿y轴向左倾斜时gamma值变为负值，向右倾斜变为正值。
 档屏幕从水平沿x轴向前倾斜时beta值变为正值，向后倾斜时变为负值。
 所以，如果我们设定一个阈值，当beta和gamma的绝对值大于这个阈值时，我们就认为设备发生了旋转。另外根据beta和          gamma的值来判断向左倾斜还是向右倾斜，以及倾斜的程度。

三.两者区别

  1.DeviceOrientationEvent的值是相对于初始状态的差值，只要设备方向不变，怎么动都不会影响数值；
  2.DeviceMotionEvent是相对于之前的某个瞬间值的差值时间比，即变化的速度，一旦设备静止则会恢复为0。