移動端二三事【五】：陀螺儀（重力感應器）實現手機位置、加速度感應以及常見應用。
阿新 • • 發佈：2018-12-15
首先說明一下：陀螺儀感應需在真機環境下進行除錯，PC端無效果。
1.獲取感應器
需在window上監聽devicemotion事件，再通過事件物件獲取accelerationIncludingGravity（內建重力加速度感應器）物件。程式碼如下：
window.addEventListener('devicemotion', function(e) {
var motion = e.accelerationIncludingGravity;
var x = motion.x;
x,y,z軸示意圖如下（Z軸垂直於手機）：
2.位置與重力加速度：
由上可瞭解到：獲取的數值為不同方向的重力加速度，所以位置不同x,y,z的數值也會不同：
此處提到的位置包括地理位置與手機擺放位置：
以石家莊（此處為家鄉打call）的地理位置來說（北緯37°27′～38°47′,東經113°30′～115°20′），重力加速度為9.7997。
現假設所在位置的重力加速度為9.8:，則：
將手機平躺放在桌面上，則x軸與y軸重力加速度為0，z軸重力加速度的值為9.8多；
將手機豎立防止（完全豎直），則x軸與z軸的重力加速度為0，y軸重力加速度的值為9.8多；
將手機橫立（完全橫立），則y軸與z軸的重力加速度為0，x軸重力加速度為9.8多。
*可使用手機將以下程式碼在伺服器環境執行，進行體驗：
相容性問題：IOS與安卓在單方向上的重力加速度值相反！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>Document</title> <style type="text/css"> #box { width: 200px; height: 200px; background: Red; color: #fff; font-size: 20px; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> var box = document.querySelector('#box'); window.addEventListener('devicemotion', function(e) { var motion = e.accelerationIncludingGravity; var x = motion.x.toFixed(3); var y = motion.y.toFixed(3); var z = motion.z.toFixed(3); box.innerHTML = "x:"+x; box.innerHTML += "<br/>y:"+y; box.innerHTML += "<br/>z:"+z; }); </script> </body> </html>
判斷是IOS還是安卓：
var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); console.log(isiOS);
可在IOS下將單方向的重力加速度取反來解決此相容性問題。
應用1.搖一搖
(function(){ var lastX; var lastY; var lastZ; var maxRang = 80; var minRang = 10; var isShake = false; window.addEventListener('devicemotion', function(e) { var motion = e.accelerationIncludingGravity; var x = Math.round(motion.x); var y = Math.round(motion.y); var z = Math.round(motion.z); if(typeof lastX == "undefined"){ lastX = x; lastY = y; lastZ = z; return; } var dis = Math.abs(x - lastX) + Math.abs(y - lastY) + Math.abs(z - lastZ); if(dis > maxRang) { isShake = true; } if(dis < minRang && isShake) { isShake = false; //執行 搖一搖之後，要操作的內容 alert("您晃動了手機"); } lastX = x; lastY = y; lastZ = z; }); })();
應用2：手機橫豎屏檢測
利用orientationchange事件
window.addEventListener('orientationchange', function(e)
{
alert(window.orientation);
});
// 利用window.orientation檢測是橫屏還是豎屏
// 橫屏 90 -90
// 豎屏 0 - 180
應用3：檢測手機旋轉角度
利用deviceorientation事件
(function(){ var box = document.querySelector('#box'); window.addEventListener('deviceorientation', function(e) { var x = Math.round(e.beta); //x軸旋轉角度 var y = Math.round(e.gamma); //y軸旋轉角度 var z = Math.round(e.alpha); //z軸旋轉角度 box.innerHTML = "x:"+x; box.innerHTML += "<br/>y:"+y; box.innerHTML += "<br/>z:"+z; }); })();