本文档旨在通过介绍HTML5 DeviceOrientation 和DeviceMotion两个接口的使用，来实现某些场景应用，如
- 摇一摇功能（DeviceMotion）
- 重力感应方向控制（DeviceOrientation）
关于DeviceOrientation和DeviceMotion两个接口的详细说明，参考了:http://w3c.github.io/deviceorientation/spec-source-orientation.html
本文的中实现的用例仅用来测试，在生产环境中应用需要修改其中的参数或者重新编程。
1. 摇一摇
摇一摇功能是很多原生APP都可以实现的功能，如微信中的摇一摇找好友，QQ音乐中的摇一摇换歌等。它们都是利用了手机加速传感器提供的API，当监听到手机加速变化的事件时，根据获取的加速值来执行不同的动作。
接口说明
在Web APP中HTML5 也提供了类似的接口，就是DeviceMotionEvent。DeviceMotion封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
DeviceMotionEvent对象属性列表：
| 属性 | 释义 |
|---|---|
| event.accelaration | x(y,z):设备在x(y,z)方向上的移动加速度值 |
| event.accelarationIncludingGravity | x(y,z):考虑了重力加速度后设备在x(y,z)方向上的移动加速度值 |
| event.rotationRate | alpha,beta,gamma:设备绕x,y,z轴旋转的角度 |
event.accelarationIncludingGravity与event.accelaration的区别在于前者加入了重力加速度，即在z轴方向加了9.8，在x,y方向上的值两者相同。
旋转速度rotationRate：alpha、beta、gamma的概念与DeviceOrientationEvent一致。
区别在于：
DeviceOrientationEvent的值是相对于初始状态的差值，只要设备方向不变，怎么动都不会影响数值；
DeviceMotionEvent是相对于之前的某个瞬间值的差值时间比，即变化的速度，一旦设备静止则会恢复为0。
实现方法
Shake对象设计
| 属性 | 值 |
|---|---|
| SHAKE_THRESHOLD | 阈值。阈值越大，触发摇晃事件时手机摇晃的程度越剧烈 |
| x | x方向的加速值 |
| y | y方向的加速值 |
| z | z方向的加速值 |
| deviceMotionHandler | 摇晃事件处理程序 |
| 方法 | 作用 |
|---|---|
| init | 初始化Shake对象 |
| 参数 | 值 |
|---|---|
| threshold | 自定义阈值，默认2000 |
| callback | 摇晃后的回调函数 |
示例
function Shake(threshold,callback){
this.SHAKE_THRESHOLD = threshold ? threshold : 2000; //定义阈值
this.last_update = 0;
this.x = this.y = this.z = this.last_x = this.last_y = this.last_z = 0;
this.init = function(){
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', this.deviceMotionHandler, false);
} else {
alert('您的浏览器不支持DeviceMotion');
}
};
var that = this;
this.deviceMotionHandler = function(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - that.last_update) > 100) {
var diffTime = curTime - that.last_update;
that.last_update = curTime;
that.x = acceleration.x;
that.y = acceleration.y;
that.z = acceleration.z;
var speed = Math.abs(that.x + that.y + that.z - that.last_x - that.last_y - that.last_z) / diffTime * 10000;
if (speed > that.SHAKE_THRESHOLD) {
if(window.console && console.log){
console.log("shaked");
}
if(callback != undefined){
callback(that);
}
}
that.last_x = that.x;
that.last_y = that.y;
that.last_z = that.z;
}
}
};
使用方法
手机摇一摇测试