天天看點

h5手機搖一搖功能實作:基于html5重力感應DeviceMotionEvent事件監聽手機搖晃

DeviceMotionEven是html5提供的一個用來擷取裝置實體方向及運動的資訊(比如陀螺儀、羅盤及加速計)的Dom事件,事件描述如下:

deviceorientation:提供裝置的實體方向資訊,表示為一系列本地坐标系的旋角。

devicemotion:提供裝置的加速資訊,表示為定義在裝置上的坐标系中的卡爾迪坐标。其還提供了裝置在坐标系中的自轉速率。若可行的話,事件應該提供裝置重心處的加速資訊。

compassneedscalibration:用于通知Web站點使用羅盤資訊校準上述事件。

51220網站目錄

https://www.51220.cn

原理:

開發者從各個内置傳感器那裡擷取未經修改的傳感資料,并觀測或響應裝置各種運動和角度變化。這些傳感器包括陀螺儀、加速器和磁力儀(羅盤)。

加速器和陀螺儀的資料都是描述沿着iOS裝置三個方向軸上的位置,對于一個豎屏擺放的iPhone來說,X方向從裝置的左邊(負)到右邊(正),Y方向則是由裝置的底部(-)到頂部(+),而Z方向為垂直于螢幕由裝置的背面(-)到正面(+)。

h5手機搖一搖功能實作:基于html5重力感應DeviceMotionEvent事件監聽手機搖晃

DeviceMotionEvent 會在裝置發生有意義的擺動(或運動)時産生.事件對象封裝有産生的間距值,旋轉率,和裝置加速度,加速度的計算方式是重力和使用者産生的兩個加速度矢量之和.裝置是通過 陀螺儀和加速計來差別這兩者的,通過DeviceMotion對裝置運動狀态的判斷,則可以幫助我們在網頁上就實作“搖一搖”的互動效果。

利用devicemotion實作手機搖一搖

搖一搖的實作需借助html5新增的devicemotion事件,擷取裝置在位置和方向上的改變速度的相關資訊。devicemotion事件對象中有一個accelerationIncludingGravity屬性,該屬性包括:一個包含x、y 和z 屬性的對象,在考慮z軸自然重力加速度的情況下,告訴你在每個方向上的加速度。

1 <script type="text/javascript">  
 2     var currhandle=0;//判斷操作是否完成
 3     if(window.DeviceMotionEvent){
 4         var speed = 15;  
 5         var x = y = z = lastX = lastY = lastZ = 0;  
 6         window.addEventListener(\'devicemotion\', function(){  
 7             var acceleration =event.accelerationIncludingGravity;  
 8             x = acceleration.x;  
 9             y = acceleration.y;  
10             z = acceleration.z;
11             if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed+10) {  
12                 if(currhandle==0){
13                     setbegin();//搖一搖事件觸發後執行操作
14                     currhandle=1;
15                 }    
16             }  
17             lastX = x;  
18             lastY = y;  
19             lastZ = z;
20         }, false);  
21     }else{
22         console.log("您的裝置不支援重力感應事件!")
23     }
24     function setbegin(){//開始操作
25         var color = new Array(\'#ff9\', \'#ff0\', \'#f00\', \'#000\', \'#00f\', \'#0ff\');  
26         document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
27         currhandle=0;
28     }     
29 </script>