• 搖一搖功能（DeviceMotion）

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

Web APP中HTML5 也提供了類似的接口，就是DeviceMotionEvent。DeviceMotion封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。

屬性釋義

event.accelaration	x(y,z):設備在x(y,z)方向上的移動加速度值
event.accelarationIncludingGravity	x(y,z):考慮了重力加速度后設備在x(y,z)方向上的移動加速度值
event.rotationRate	alpha,beta,gamma:設備繞x,y,z軸旋轉的角度

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 {//瀏覽器不支持DeviceMotionalert('天吶，你的手機竟然還不支持搖一搖ヾ(?°?°?)ﾉﾞ');}// 運動傳感器處理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獲得。

屬性釋義

alpha	設備指示的方向，根據指南針的設定情況而定
beta	設備繞x軸旋轉的角度
gamma	設備繞y軸旋轉的角度

工作原理 :
根據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("向左傾斜");}}}

小白菜一枚，歡迎指正(〃‘▽’〃)
效果預覽：https://bestjhh.github.io/ShakeItOff/
完整代碼：https://github.com/bestjhh/ShakeItOff
參考文章：https://www.jianshu.com/p/5769075e9885

總結

以上是生活随笔為你收集整理的H5监听摇一摇和手机倾斜事件（重力感应）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。