随着陀螺仪作为只能手机的标配，根据手机角度不同，让图片有点视差微动效果可以给用户一点惊喜，于是简单研究了一下 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。
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。即下面这个图：
所以这里 -90 比较好理解。
然后再看上面那句 this.lon = event.alpha + event.gamma; 这里我想了好久，也没想出来为什么竖屏的时候 lon 的值是 alpha 和 gamma 之和。
要理解这个，要从我们平常使用手机的动作来看。现看 gamma 值，gamma 是沿着 y 轴转动，拿出手机，竖直放置，沿着 y 轴转一下，手机是这样的状态：
这样的时候我们一般是要看到更多的左右信息，也就是横向的经度值，所以手机竖直的时候 gamma 要算到 lon 里面。
再来看 alpha 值，alpha 值是表示设备沿 Z 轴的变化。要理解这个，我们要试着想象我们在拍全景照片。以自己为圆心，手臂与地面平行，竖着拿着手机，手臂作为半径，尝试像拍摄全景照片，以身体为圆心，移动手臂。会发现我们我们其实是在做一个圆，而在这途中，手机其实是沿着 Z 轴在转动的。
结语
很多看起来很容易实现的功能，实际上却有很多很多的坑，要填这些坑，又要有很多积累和思考，对于那些帮你填坑的人，要说一声『谢谢』。
