首先说明一下：陀螺仪感应需在真机环境下进行调试，PC端无效果。

1.获取感应器

需在window上监听devicemotion事件，再通过事件对象获取accelerationIncludingGravity（内置重力加速度感应器）对象。代码如下：

window.addEventListener('devicemotion', function(e) {
        var motion = e.accelerationIncludingGravity;
        var x = motion.x;
        var y = motion.y;
        var z = motion.z;
        //x,y,z位三个轴方向上的重力加速度
        console.log(x);
        console.log(y);
        console.log(z);
});

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;
    });
})();

移动端二三事【五】：陀螺仪（重力感应器）实现手机位置、加速度感应以及常见应用。

首先说明一下：陀螺仪感应需在真机环境下进行调试，PC端无效果。

猜你喜欢