JavaScript 陀螺仪检测设备方向(重力感应)

随着陀螺仪作为只能手机的标配，根据手机角度不同，让图片有点视差微动效果可以给用户一点惊喜，于是简单研究了一下 HTML5 下利用陀螺仪获取设备方向的 API。

处理方向变化的事件

HTML5 中与手机方向变化有关的 API 有两个，一个是 deviceorientation 事件，一个是 devicemotion 事件。

今天这个根据手机动来动去产生微动效果的主要用到 deviceorientation 事件，这个事件主要是监听并接收设备方向变化信息。
而 devicemotion 事件主要是用来监听设备在位置和方向上的加速度变化信息，这个主要用在摇一摇等应用上。

监听 deviceorientation 事件比较简单：

 window.addEventListener('deviceorientation', handleFunc, false);

然后在回调函数 handleFunc 中会有设备转过的角度：

 function handleFunc(evnet){
    var alpha = event.alpha;
    var beta = event.beta;
    var gamma = event.gamma;
 }

这里的 alpha, beta, gamma 表示的是相对于坐标轴，设备在某个给定轴上的旋转量。

alpha：表示设备沿 Z 轴旋转的角度，范围为 0~360；
beta：表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况；
gamma：表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。

另外放上坐标系的图，方便理解：

光是这样看可能不太好理解，我们可以打开 chrome 开发者工具 Sensors 这一项看看直观的感受。

当我们手机出于直立状态的时候：

也就是只有 beta 值是 90，其它两个都是 0，可以自己改下 beta 值，体验下什么叫沿 X 轴转。

同样的，沿着 Z 轴转的 alpha 值，就是类似我们竖着转手机。

gamma 值：

这样大概就能理解这三个属性是表示些什么东西了，但是这几个值麻烦的地方是，并不能通过单单一个值来表示出手机向某个方向运动，运动的方向还和手机放置的位置有很大关系。除此之外，还有一个坑是 android 中陀螺仪的数据本身不是很稳定，一般不能直接使用，需要加一些缓冲之类的方法来降噪。

还好，上面那些坑已经有人开始填了，就是 shrekwang 大大做的orienter 组件。

orienter 组件

orienter 组件除了提供上面说到的 alpha，beta，gamma 值之外，还另外提供了两个计算出来的值，分别是 lon 和 lat，字面意思是经度，纬度，可以大致用来当成平移距离来计算。

我们来简单写个小 demo，随着手机动，图片也有一些视差效果，原理是利用 deviceorientation 事件来获取手机运动方向的改变，然后通过 transform:translate3d(x,y,z) 给设置到图片上。

首先是 html：

    <div class="content">
        <img src="../img/test.jpg" class="img">
    </div>

HTML 比较简单，我们只是放个图片上去。

然后是利用 orienter 组件来实现我们的功能。

      var o = new Orienter();
      o.onOrient = function (obj) {
        var a, b;

        a = obj.lon < 180 ? obj.lon : obj.lon - 360;
        b = obj.lat;

        a = a > 0 ? a > 50 ? 50 : a : a < -50 ? -50 : a;
        b = b > 0 ? b > 50 ? 50 : b : b < -50 ? -50 : b;

        $(".img").css("-webkit-transform", "translate3d(" + a + "px," + b + "px,0)");

      };
      o.init();

代码比较简单，其中我们对 lon 值进行了处理，lon 的取值范围是 0~360，其中，小于 180 的我们认为是往右移，大于 180 的当成是往左边移动，往左的我们要计算出一个负值。

然后下面有一堆三元运算符用来做判断，因为我们平移的距离有一个极限，这里我设置的是 50。

放上体验地址：www.imbeta.cn/demo/demos/…

PC 上记得打开 chrome 模拟手机和试试在 Sensors 里模拟转向。

orienter 代码

最后，orienter 帮我们做了那么多事情，当然要大概看下它的源代码啦。

首先是前面一段是兼容 AMD & CMD 和普通引入的代码：

(function (factory) {

    if (typeof define === 'function' && define.amd) {
        define(['exports'], function(exports) {
            window.Orienter = factory(exports);
        });
    } else if (typeof exports !== 'undefined') {
        factory(exports);
    } else {
        window.Orienter = factory({});
    }

}(function (Orienter) {
    ……
    ……
}

之后最重点的是 _orient 方法，其中有个 switch，就是处理我们上面说的 lon 和 lat 两个值的计算，还有运动的方向还和手机放置的位置的处理，以及对 android 陀螺仪不稳定的处理。

代码如下：

            switch (this.os) {
                case 'ios':
                    switch (this.direction) {
                        case 0:
                            this.lon = event.alpha + event.gamma;
                            if (event.beta > 0) this.lat = event.beta - 90;
                            break;
                        case 90:
                            if (event.gamma < 0) {
                                this.lon = event.alpha - 90;
                            } else {
                                this.lon = event.alpha - 270;
                            }
                            if (event.gamma > 0) {
                                this.lat = 90 - event.gamma;
                            } else {
                                this.lat = -90 - event.gamma;
                            }
                            break;
                        case -90:
                            if (event.gamma < 0) {
                                this.lon = event.alpha - 90;
                            } else {
                                this.lon = event.alpha - 270;
                            }
                            if (event.gamma < 0) {
                                this.lat = 90 + event.gamma;
                            } else {
                                this.lat = -90 + event.gamma;
                            }
                            break;
                    }
                    break;
                case 'android':
                    switch (this.direction) {
                        case 0:
                            this.lon = event.alpha + event.gamma + 30;
                            if (event.gamma > 90) {
                                this.lat = 90 - event.beta;
                            } else {
                                this.lat = event.beta - 90;
                            }
                            break;
                        case 90:
                            this.lon = event.alpha - 230;
                            if (event.gamma > 0) {
                                this.lat = 270 - event.gamma;
                            } else {
                                this.lat = -90 - event.gamma;
                            }
                            break;
                        case -90:
                            this.lon = event.alpha - 180;
                            this.lat = -90 + event.gamma;
                            break;
                    }
                    break;
            }

分别根据 ios/android 平台对竖屏和左右横屏做相应处理。

我们来看下 ios 下的竖屏：

           case 0:
               this.lon = event.alpha + event.gamma;
               if (event.beta > 0) this.lat = event.beta - 90;
               break;

先看下面那句处理 lat 的，if (event.beta > 0) this.lat = event.beta - 90; 这里 -90 就是因为竖屏的时候，beta 值默认为 90。即下面这个图：