WebApp - HTML5重力感应事件实现摇一摇功能

注：小编是一个有轻微处女座情节的人，所以很多内容为了方便阅读和格式美观，我都做成了图片，上传后头条都压缩了图片质量，但是不影响大家阅读，因为可以点击放大，哇哈哈！

前言

今天主要介绍一下html5重力感应事件之DeviceMotionEvent，关于文档请看：

http://w3c.github.io/deviceorientation/spec-source-orientation.html

事件介绍

1、deviceorientation 提供设备的物理方向信息，表示为一系列本地坐标系的旋角。

2、devicemotion 提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。

3、compassneedscalibration 用于通知Web站点使用罗盘信息校准上述事件。

用法简介

注册一个deviceorientation事件的接收器：

将设备放置在水平表面，屏幕顶端指向西方，则其方向信息如下：

为了获得罗盘指向，可以简单的使用360度减去alpha。若设被平行于水平表面，其罗盘指向为(360 - alpha)。 若用户手持设备，屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90，alpha和gamma无关。 用户手持设备，面向alpha角度，屏幕处于一个垂直屏幕，屏幕顶端指向右方，则其方向信息如下：

只用自定义界面通知用户校准罗盘：

注册一个devicemotion时间的接收器：

将设备放置在水平表面，屏幕向上，acceleration为零，则其accelerationIncludingGravity信息如下：

设备做自由落体，屏幕水平向上，accelerationIncludingGravity为零，则其acceleration信息如下：

将设备安置于车辆至上，屏幕处于一个垂直平面，顶端向上，面向车辆后部。车辆行驶速度为v，向右侧进行半径为r的转弯。设备记录acceleration和accelerationIncludingGravity在位置x处的情况，同时设备还会记录rotationRate.gamma的负值：

应用案例（手机摇一摇）

实测截图：

感谢观看。