随着陀螺仪作为只能手机的标配，根据手机角度不同，让图片有点视差微动效果可以给用户一点惊喜，于是简单研究了一下 HTML5 下利用陀螺仪获取设备方向的 API。
### 处理方向变化的事件 HTML5 中与手机方向变化有关的 API 有两个，一个是 事件，一个是 事件。
今天这个根据手机动来动去产生微动效果的主要用到 事件，这个事件主要是监听并接收设备方向变化信息。 而 事件主要是用来监听设备在位置和方向上的加速度变化信息，这个主要用在摇一摇等应用上。
监听 事件比较简单：
然后在回调函数 中会有设备转过的角度：
这里的 alpha, beta, gamma 表示的是相对于坐标轴，设备在某个给定轴上的旋转量。
另外放上坐标系的图，方便理解：
光是这样看可能不太好理解，我们可以打开 chrome 开发者工具 Sensors 这一项看看直观的感受。
当我们手机出于直立状态的时候：
也就是只有 beta 值是 90，其它两个都是 0，可以自己改下 beta 值，体验下什么叫沿 X 轴转。
同样的，沿着 Z 轴转的 alpha 值，就是类似我们竖着转手机。
gamma 值：
这样大概就能理解这三个属性是表示些什么东西了，但是这几个值麻烦的地方是，并不能通过单单一个值来表示出手机向某个方向运动，运动的方向还和手机放置的位置有很大关系。除此之外，还有一个坑是 android 中陀螺仪的数据本身不是很稳定，一般不能直接使用，需要加一些缓冲之类的方法来降噪。
还好，上面那些坑已经有人开始填了，就是 shrekwang 大大做的。
orienter 组件
orienter 组件除了提供上面说到的 alpha，beta，gamma 值之外，还另外提供了两个计算出来的值，分别是 lon 和 lat，字面意思是经度，纬度，可以大致用来当成平移距离来计算。
我们来简单写个小 demo，随着手机动，图片也有一些视差效果，原理是利用 事件来获取手机运动方向的改变，然后通过 给设置到图片上。
首先是 html：
HTML 比较简单，我们只是放个图片上去。
然后是利用 orienter 组件来实现我们的功能。
代码比较简单，其中我们对 lon 值进行了处理，lon 的取值范围是 0~360，其中，小于 180 的我们认为是往右移，大于 180 的当成是往左边移动，往左的我们要计算出一个负值。
然后下面有一堆三元运算符用来做判断，因为我们平移的距离有一个极限，这里我设置的是 50。
放上体验地址：
PC 上记得打开 chrome 模拟手机和试试在 Sensors 里模拟转向。
orienter 代码
最后，orienter 帮我们做了那么多事情，当然要大概看下它的源代码啦。
首先是前面一段是兼容 AMD & CMD 和普通引入的代码：
之后最重点的是 方法，其中有个 switch，就是处理我们上面说的 lon 和 lat 两个值的计算，还有运动的方向还和手机放置的位置的处理，以及对 android 陀螺仪不稳定的处理。
代码如下：
分别根据 ios/android 平台对竖屏和左右横屏做相应处理。
我们来看下 ios 下的竖屏：
先看下面那句处理 lat 的， 这里 -90 就是因为竖屏的时候，beta 值默认为 90。即下面这个图：
所以这里 -90 比较好理解。
然后再看上面那句 这里我想了好久，也没想出来为什么竖屏的时候 lon 的值是 alpha 和 gamma 之和。
要理解这个，要从我们平常使用手机的动作来看。现看 gamma 值，gamma 是沿着 y 轴转动，拿出手机，竖直放置，沿着 y 轴转一下，手机是这样的状态：
这样的时候我们一般是要看到更多的左右信息，也就是横向的经度值，所以手机竖直的时候 gamma 要算到 lon 里面。
再来看 alpha 值，alpha 值是表示设备沿 Z 轴的变化。要理解这个，我们要试着想象我们在拍全景照片。以自己为圆心，手臂与地面平行，竖着拿着手机，手臂作为半径，尝试像拍摄全景照片，以身体为圆心，移动手臂。会发现我们我们其实是在做一个圆，而在这途中，手机其实是沿着 Z 轴在转动的。
如果觉得说的太抽象，可以看看下面这个例子，尝试理解一下。
结语
很多看起来很容易实现的功能，实际上却有很多很多的坑，要填这些坑，又要有很多积累和思考，对于那些帮你填坑的人，要说一声『谢谢』。
Demo 源码地址：