web端手机方向传感器闲谈

因为工作需要，这段时间接触的手机传感器比较多。
总体来说，市场上的传感器表现参差不齐。IPhone在传感器表现方面卓越，而安卓由于什么机型都有，则显得差强人意。

---

首先还是说说怎么在web端调用手机传感器吧。
这个还是比较简单的，只需要添加一个事件就可以了。
在最新的h5规范里面，引入了 DeviceOrientation 事件。如果没猜错，该接口应该是调用手机里的综合方向传感器。
事实上，手机上的方向传感器有多个。例如在安卓手机上就有11种传感器，而诸如

• TYPE_GYROSCOPE
• TYPE_LINEAR_ACCELERATION
• TYPE_MAGNETIC_FIELD
• TYPE_ORIENTATION
• TYPE_ROTATION_VECTOR

均可以用作对手机的状态翻转等进行监测。当然这需要不同的方法，按下不表。
而目测DeviceOrientation方法是结合了重力检测与磁场检测两方面实现的翻转检测。
DeviceOrientation方法主要监测的是手机上的三个翻转角。
你可以将手机水平至于桌面上。

• 手机在水平面上旋转为alpha角，此角是基于Z轴旋转。实现方式一般是基于磁场。因此在各种机型上你可以发现这个数值差异十分大。
• 手机正常翻起与桌面夹角为beta角，此角是基于X轴旋转。实现方式一般是基于重力分量。
• 手机侧翻与桌面夹角为gama角，此角是基于Y轴旋转。实现方式也是基于重力分量。

我们可以在w3c上阅读相关的定义数据。

做一个做简单的调用例子

if (window.DeviceOrientationEvent) {
     大专栏  web端手机方向传感器闲谈window.addEventListener('deviceorientation', function(event) {
        var a = event.alpha,
            b = event.beta,
            g = event.gamma;
        console.log('Orientation - Alpha: ' + a + ', Beta: '+ b + ', Gamma: ' + g);
    }, false);
} else {
    console.log('This device does not support deviceorientation');
}

借用这段代码你就可以看到手机上的方向传感器封装后的API显示出来的数值。
但是当你记录下来后，你可以发现。该数值在IPhone上是连续而且稳定的。但是在安卓上却十分容易产生波动。
那么，如何去除这种波动则成为了一个十分重要的问题了。

---

事实上，这个问题也很简单。
我们只需要人工制造一个滤波器就可以了。
假设我们接受的数值为X，则设上一次数值为Xp，我们可以运用一个加权函数降低波动带来的影响。

final=Xalpha+(1-alpha)Xp

当然，假如你的要求比较精细。很多时候简单的一次加权并不能完整去除波动。
所以我们可以采用记录多个以往的值进行平均。

final = (X+(Xp1+Xp2+Xp3+Xp4))/5

通过这种方式得出的数值波动会降低并且更加流畅。
鉴于此，对于传感器的数据调用，一定要真机调试取值适配机型，不要想当然的设置。例如当你把手机与地面垂直的时候，由于磁场感应器位置不佳，容易出现各种方向数值紊乱的场景。因此不推荐调用各种极值的数值。

---

而关于手机传感器调用的频率，大概是50ms一次。因此我们不需要太过担心带来影响。