H5之重力感应篇
Posted susanws
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5之重力感应篇相关的知识，希望对你有一定的参考价值。
手机的重力感应支持里，有两个主要的事件：
1. OrientationChange (在屏幕发生翻转的时候触发)
2. DeviceOrientation+DeviceMotion(重力感应与陀螺仪)
科普时间
重力感应，基本上是平板电脑和智能手机的标准配置，起到的作用也很简单，比如你玩赛车游戏，控制左右转弯，屏幕横屏和竖屏切换，都需要用到重力感应模块。
而陀螺仪，又叫角速度传感器，用于测量物理量的偏转、倾斜是的动作角速度。可以精确的分析判断出使用者的实际动作，通过他收集的这些动作给手机下达一些指令。
OrientationChange
| 数值 | 意义 |
| 0 | 手机竖屏状态 |
| 90 | 右旋转 |
| -90 | 左旋转 |
通过OrientationChange可以获知手机的横竖屏状态，让横屏的页面通过这个事件来弹出告知用户横屏的提示。当然，当用户锁定了屏幕旋转功能，就没办法触发了（心塞）。
DeviceOrientation && DeviceMotion
| 事件 | 意功能 |
| DeviceOrientation | 移动的角度 |
| DeviceMotion | 移动的加速度信息 |
如表格所知，我们可以通过重力感应得知用户手机移动的角度。
基于此，我们可以通过判断用户的设备移动角度实现视觉的错层移动效果，这是一个隐藏的交互形式，悄悄地丰富了页面的效果，也让页面的元素有更好的设计感。
如果想快速实现这个效果，这里给前端推荐一个开源的组件Parallax.JS
http://matthew.wagerfield.com/parallax/
除了移动的错层，我们也可以用手机移动的方向去制作游戏，比如控制车辆移动的方向等。 除了移动角度的获知以外，有陀螺仪的设备，我们还可以利用DeviceMotion获知手机移动加速度，从而模拟出类似摇一摇的功能。
小结
目前越来越多的设备自带陀螺仪，未来相信还会得到更多的设备支持，出现更多的结合重力感应的创意专题。
还是老规矩，看几类运用了重力感应的H5
1转动手机代替鼠标拖拽
一套理想家居的自我修养
我们平常见到的页面之间的切换多是下滑，上拉，左右滑，而这个H5的创意之处在于，用户要通过左右倾斜手机来切换不同的场景。在用户左右倾斜手机过程中，主要有四个场景会呈现出来，分别是：区位，园林，配套和户型。这就是一个典型的通过获知用户手机移动的角度来控制视野的案例
2纠正手机平衡
三步帮你摆脱朋友圈
这是大众点评的一个拯救网瘾青年的案例，在技术实现上也用了重力感应，你必须把手机放在水平的桌子上，否则游戏没法进行下去，在60秒内，如果你触碰了手机屏幕，屏幕也会结束。所以你只好等60秒过去，静静得享受60秒没有手机的时间
3重力感应游戏
拯救自在橙
在这个H5中，主要想宣传的核心点是罕见的6安全气囊，所以在这个小游戏中，设计者利用H5的陀螺仪技术，以橙子和安全气囊为游戏元素实现互动，橙子出现后利用重力感应左右晃动手机，橙子便向相应的方向运动，碰到安全气囊会弹起，连续碰到几个安全气囊将橙子送出顶部就算成功。
赛车游戏同样也可使用重力感应技术
以上是关于H5之重力感应篇的主要内容，如果未能解决你的问题，请参考以下文章