移動端搖一搖與重力感應事件

移動端搖一搖與重力感應事件

　　通過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。