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>