一、摇一摇功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>inde.html访问成功</p>
<div id="status" style="font-size: 60px;color: red;"></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
window.onload = function(){
//运动事件监听
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler,false);
}else{
alert('您的手机不支持摇一摇功能！');
}
//获取加速度信息
//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
//而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
var SHAKE_THRESHOLD = 8000; //阈值越大，触发摇晃事件时手机摇晃的程度越剧烈
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime-last_update)> 10) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD && stop) {
//dosomething
}
last_x = x;
last_y = y;
last_z = z;
}
}
}
</script>
</body>
</html>二、加速传感器API
本文档旨在通过介绍HTML5 DeviceOrientation 和DeviceMotion两个接口的使用，来实现某些场景应用，如
摇一摇功能（DeviceMotion）
重力感应方向控制（DeviceOrientation）
关于DeviceOrientation和DeviceMotion两个接口的详细说明，参考了:http://w3c.github.io/deviceorientation/spec-source-orientation.html
本文的中实现的用例仅用来测试，在生产环境中应用需要修改其中的参数或者重新编程。
- 摇一摇
摇一摇功能是很多原生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; } } };
使用方法
手机摇一摇测试
当手机摇晃页面时，会弹出shaked的提示，并且在页面上显示摇晃时的x,y,z方向的加速度值。
扩展应用
给Shake对象的callback参数可以实现不同的摇晃目的，如抽奖。需要在callback函数中调用抽奖系统的接口。
示例
function shakeCallback(){
var odata = {name:”drawprize”,act_id : 0000};
HBAPP.Activity.register(odata,function(json){
if(json.error == 0){
if(json.result.draw){
//中奖信息
//……
}
}
});
}
2. 重力感应
重力感应也是原生APP中经常见到的一个功能，在Web App中的应用多见于判断屏幕的旋转方向，以及在此基础上实现的场景应用，如控制页面上物体的左右移动，加减速等。
在Web App中实现以上的功能，需要实时获取屏幕的旋转方向参数，这些参数可以从浏览器的利用HTML5的DeviceOrientation API获得。
接口说明
当浏览器的Orientation发生变化时，触发DeviceOrientation事件，并返回一个DeviceOrientationEvent对象，其属性列表如下：
属性 释义
alpha 设备指示的方向，根据指南针的设定情况而定
beta 设备绕x轴旋转的角度
gamma 设备绕y轴旋转的角度
注：不同版本的手机操作系统和浏览器，以及不同的应用程序中内置的浏览器对deviceorientation事件的支持不尽相同。尤其在Android平台上，可能会出现有的设备正常工作，有的则毫无反应的情况。
工作原理
根据event对象的三个方向的参数来确定设备的旋转角度。其中，alpha的取值范围是0-360,这个需要根据设备的指南针设定情况而定，一般来说，设备指向正北方向时为0.beta值为设备绕x轴旋转的角度，取值范围为-180-180。gamma取值范围-90-90.
这里面alpha值的意义并不大，主要参考beta和gamma值。
当屏幕从水平沿y轴向左倾斜时gamma值变为负值，向右倾斜变为正值。
档屏幕从水平沿x轴向前倾斜时beta值变为正值，向后倾斜时变为负值。
所以，如果我们设定一个阈值，当beta和gamma的绝对值大于这个阈值时，我们就认为设备发生了旋转。另外根据beta和gamma的值来判断向左倾斜还是向右倾斜，以及倾斜的程度。
实现方式和示例
首先是为浏览器绑定deviceorientation事件和处理程序。
//add deviceorientation event listener
if(window.DeviceOrientationEvent){
window.addEventListener(‘deviceorientation’,DeviceOrientationHandler,false);
}else{
alert(“您的浏览器不支持DeviceOrientation”);
}
然后在事件处理程序中处理相应的动作
function DeviceOrientationHandler(event){
var alpha = event.alpha,
beta = event.beta,
gamma = event.gamma;
if(alpha != null || beta != null || gamma != null){
dataContainerOrientation.innerHTML = "alpha:" + alpha + "<br />beta:" + beta + "<br />gamma:" + gamma;
//判断屏幕方向
var html = "";
if( Math.abs(gamma) < GAMMA_MIN && Math.abs(beta) > BETA_MAX ){
html = "屏幕方向：Portrait";
}
if( Math.abs(beta) < BETA_MIN && Math.abs(gamma) > GAMMA_MAX ){
html = "屏幕方向：Landscape";
}
var gamma_html = "";
if( gamma > 0 ){
gamma_html = "向右倾斜";
}else{
gamma_html = "向左倾斜";
}
html += "<br />"+gamma_html
stage.innerHTML = html;
}else{
dataContainerOrientation.innerHTML = "当前浏览器不支持DeviceOrientation";
}
}
这个示例中展示了如何利用beta和gamma值来展示屏幕的旋转方向和侧翻方向。要实现更精确的物体判断，还需要复杂的算法来计算。
扩展应用
使用DeviceOrientation API接口可以实现在web中获取手机设备的屏幕旋转方向参数，在示例的基础上进行改进，可以扩展到在屏幕上控制页面元素的移动，实现动画或游戏的目的。例如通过调整屏幕的方向控制页面上的小球走迷宫，控制小车的移动躲避障碍等。
API出处：
作者：codemarker
链接：http://www.jianshu.com/p/5769075e9885
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
