• 搖一搖功能（DeviceMotion）

搖一搖功能是很多原生APP都可以實現的功能，如微信中的搖一搖找好友，QQ音樂中的搖一搖換歌等。它們都是利用了手機加速感測器提供的API，當監聽到手機加速變化的事件時，根據獲取的加速值來執行不同的動作。

Web APP中HTML5 也提供了類似的介面，就是DeviceMotionEvent。DeviceMotion封裝了運動感測器資料的事件，可以獲取手機運動狀態下的運動加速度等資料。

	var shakeThreshold = 1000; // 定義一個搖動的閾值
    var lastUpdate = 0; // 記錄上一次搖動的時間
    var x, y, z, lastX,
 
 lastY, lastZ; // 定義x、y、z記錄三個軸的資料以及上一次觸發的資料
    // 監聽感測器運動事件
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
    //瀏覽器不支援DeviceMotion
      alert('天吶，你的手機竟然還不支援搖一搖ヾ(◍°∇°◍)ﾉﾞ');
    }
   // 運動感測器處理
   function deviceMotionHandler(eventData)
 
 {
       var acceleration = eventData.accelerationIncludingGravity; // 獲取含重力的加速度
       var curTime = new Date().getTime();
       // 100毫秒進行一次位置判斷
       if ((curTime - lastUpdate) > 100) {
           var diffTime = curTime - lastUpdate;
           lastUpdate = curTime;
           x = acceleration.x;
           y = acceleration.y;
           z = acceleration.z;
           var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
           if (speed > shakeThreshold) {
              alert("搖一搖觸發")
           }
           lastX = x;
           lastY = y;
           lastZ = z;
        }
 	}

• 重力感應方向控制（DeviceOrientation）

重力感應也是原生APP中經常見到的一個功能，在Web App中的應用多見於判斷螢幕的旋轉方向，以及在此基礎上實現的場景應用，如控制頁面上物體的左右移動，加減速等。

在Web App中實現以上的功能，需要實時獲取螢幕的旋轉方向引數，這些引數可以從瀏覽器的利用HTML5的DeviceOrientation API獲得。

工作原理 :
根據event物件的三個方向的引數來確定裝置的旋轉角度。其中，alpha的取值範圍是0-360,這個需要根據裝置的指南針設定情況而定，一般來說，裝置指向正北方向時為0.beta值為裝置繞x軸旋轉的角度，取值範圍為-180-180。gamma取值範圍-90-90.

這裡面alpha值的意義並不大，主要參考beta和gamma值。
當螢幕從水平沿y軸向左傾斜時gamma值變為負值，向右傾斜變為正值。
當螢幕從水平沿x軸向前傾斜時beta值變為正值，向後傾斜時變為負值。

所以，如果我們設定一個閾值，當beta和gamma的絕對值大於這個閾值時，我們就認為裝置發生了旋轉。另外根據beta和gamma的值來判斷向左傾斜還是向右傾斜，以及傾斜的程度。

// 繫結deviceorientation事件和處理程式
if(window.DeviceOrientationEvent){
    window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
}else{
    alert("您的瀏覽器不支援DeviceOrientation");
}
function DeviceOrientationHandler(event){
    var alpha = event.alpha,beta = event.beta,gamma = event.gamma;
    if(alpha != null || beta != null || gamma != null){
    	//各個方向旋轉的值
    	//alert("alpha:" + alpha + "<br />beta:" + beta + "<br />gamma:" + gamma)
         //判斷螢幕方向
        if( gamma > 0 ){
           alert("向右傾斜");
         }else{
           alert("向左傾斜");
         }
     }
 }

作者：codemarker
連結：https://www.jianshu.com/p/5769075e9885