javascript html5搖一搖功能的實作_javascript技巧

透過網路上的資料，加上自己的整理，寫了一份html搖一搖功能的簡介，用做技術備份。
知識重點 

1、DeviceMotionEvent
    這是html5支援的重力感應事件，關於文件請看：http://w3c.github.io/deviceorientation/spec-source-orientation.html
事件介紹：
deviceorientation 提供設備的物理方向信息，表示為一系列本地坐標系的旋角。
devicemotion 提供裝置的加速訊息，表示為定義在裝置上的座標系中的卡爾迪座標。其也提供了設備在座標系中的自轉速率。若可行的話，事件應該提供設備重心處的加速資訊。
compassneedscalibration 用於通知Web網站使用羅盤資訊校準上述事件。

2、事件簡介
 window.addEventListener("deviceorientation",function(event){// 處理event.alpha、event.beta及event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0}; 

這是 deviceorientation事件回傳的參數，為了得到羅盤指向，可以簡單的使用360度減去alpha。若設被平行於水平表面，其羅盤指向為(360 - alpha)。 若使用者手持設備，螢幕處於一個垂直平面且螢幕頂端指向上方。 beta的值為90，alpha和gamma無關。 使用者手持設備，面向alpha角度，螢幕處於垂直螢幕，螢幕頂端指向右方，則其方向資訊如下

{alpha:270- alpha,
 beta:0,
 gamma:90}; 

 註冊一個devicemotion事件的接收器：

複製程式碼 程式碼如下:

window.addEventListener("devicemotion",function(event){// 處理event. acceleration、event.accelerationIncludingGravity、// event.rotationRate和event.interval},true);

 

 將設備安置於車輛之上，螢幕處於垂直平面，頂端向上，面向車輛後方。車輛行駛速度為v，向右側進行半徑為r的轉彎。設備記錄acceleration 和accelerationIncludingGravity在位置x處的情況，同時設備也會記錄rotationRate.gamma的負值：

{acceleration:{x: v^2/r, y:0, z:0},
 accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81},
 rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}}; 

 功能實現

if(window.DeviceMotionEvent){
 window.addEventListener('devicemotion', YaoYiYao,false);
 }
 var speed =30;//speed
 var x = y = z = lastX = lastY = lastZ =0;
 function YaoYiYao(eventData){
 var acceleration =eventData.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){
 //简单的摇一摇触发代码
 alert(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 } 

先判斷瀏覽器是否支援該事件。
YaoYiYao用來檢測是否對手機進行搖動操作，具體就是獲取手機的的移動數據，將其存在一個外部變量中，當下次又觸發搖動事件時，判斷上次的搖動坐標和現在的搖動坐標是否處於一個經常調動的範圍：Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed
基本上 滿足這種條件的話，就是手機正處於搖動狀態，在if語句裡面加入你要執行的搖一搖代碼即可。

以上就是html5搖一搖功能的實現思路，希望對大家的學習有所幫助。