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軸自然重力加速度的情況下,告訴你在每個方向上的加速度。
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>