手机端重力感应接口及应用
现在微信开发如火如荼，各种基于微信的H5市场上也是很火爆，今天做个笔记就是跟大家分享手机端重力感应的应用，根据重力感应接口我们可以得到手机的方向，移动速度，xyz轴偏移量，现在先上所有数据展示，大家有兴趣的也可以亲身测试：
-
<!DOCTYPE html>
<html><head>
<meta charset="utf-8"/>
<title>H5获取陀螺仪/重力感应(参考网上资源)</title>
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=device-dpi"/>
<style type="text/css">
body{font-size: 24px;}
span{color:#f00;}
a{text-decoration: none;color:#f00;}
a:hover{color:#000;}
</style>
</head><body>
<!--
DeviceOrientationEvent是获取方向，得到device静止时的绝对值；
DeviceMotionEvent是获取移动速度，得到device移动时相对之前某个时间的差值比
设备定位API，该API允许你收集设备的方向和移动信息。此外，该API只在具备陀螺仪功能的设备上使用。
-->
<h3>请用手机浏览器访问</h3>
<p>EGRET白鹭版降临:<br/><a href="http://weixin.shinycg.com/weixin/DeviceOrientation" target="_blank">http://weixin.shinycg.com/weixin/DeviceOrientation</a></p>
<p>左右：<span id="alpha">0</span></p>
<p>前后：<span id="beta">0</span></p>
<p>扭转：<span id="gamma">0</span></p>
<p>指北针指向：<span id="heading">0</span>度</p>
<p>指北针精度：<span id="accuracy">0</span>度</p>
<hr/>
<p>x轴加速度：<span id="x">0</span>米每二次方秒</p>
<p>y轴加速度：<span id="y">0</span>米每二次方秒</p>
<p>z轴加速度：<span id="z">0</span>米每二次方秒</p>
<hr/>
<p>x轴加速度(考虑重力加速度)：<span id="xg">0</span>米每二次方秒</p>
<p>y轴加速度(考虑重力加速度)：<span id="yg">0</span>米每二次方秒</p>
<p>z轴加速度(考虑重力加速度)：<span id="zg">0</span>米每二次方秒</p>
<hr/>
<p>左右旋转速度：<span id="Ralpha">0</span>度每秒</p>
<p>前后旋转速度：<span id="Rbeta">0</span>度每秒</p>
<p>扭转速度：<span id="Rgamma">0</span>度每秒</p>
<hr/>
<p>上次收到通知的间隔：<span id="interval">0</span>毫秒</p><script type="text/javascript">
init();
function init(){
if (window && window.DeviceMotionEvent)
window.addEventListener("devicemotion", motionHandler, false);
if (window && window.DeviceOrientationEvent)
window.addEventListener("deviceorientation", orientationHandler, false);
}function orientationHandler(event) {
document.getElementById("alpha").innerHTML = event.alpha||0;
document.getElementById("beta").innerHTML = event.beta||0;
document.getElementById("gamma").innerHTML = event.gamma||0;
document.getElementById("heading").innerHTML = event.webkitCompassHeading||0;
document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy||0;
}function motionHandler(event) {
document.getElementById("interval").innerHTML = event.interval||0;
var acc = event.acceleration;
document.getElementById("x").innerHTML = acc.x||0;
document.getElementById("y").innerHTML = acc.y||0;
document.getElementById("z").innerHTML = acc.z||0;
var accGravity = event.accelerationIncludingGravity;
document.getElementById("xg").innerHTML = accGravity.x||0;
document.getElementById("yg").innerHTML = accGravity.y||0;
document.getElementById("zg").innerHTML = accGravity.z||0;
var rotationRate = event.rotationRate;
document.getElementById("Ralpha").innerHTML = rotationRate.alpha||0;
document.getElementById("Rbeta").innerHTML = rotationRate.beta||0;
document.getElementById("Rgamma").innerHTML = rotationRate.gamma||0;
}</script>
</body>
</html>
以上是重力感应接口所有的参数，那么根据这些参数我们就可以做出：
1、摇动计数，根据偏移量阀值来计算摇动的次数，次数达到一定数目，就触发某种事件，摇一摇开红包就是个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#ceshi{
font-size: 50px;
}
</style>
</head>
<body>
<div id="ceshi"></div>
<script>
function init(){
if (window.DeviceMotionEvent) {
// 移动浏览器支持运动传感事件
window.addEventListener('devicemotion', deviceMotionHandler, false);
}
}
// 那么，我们如何计算用户是否是在摇动手机呢？可以从以下几点进行考虑：
// 1、其实用户在摇动手机的时候始终都是以一个方向为主进行摇动的；
// 2、用户在摇动手机的时候在x、y、z三个方向都会有相应的想速度的变化；
// 3、不能把用户正常的手机运动行为当做摇一摇（手机放在兜里，走路的时候也会有加速度的变化）。
// 从以上三点考虑，针对三个方向上的加速度进行计算，间隔测量他们，考察他们在固定时间段里的变化率，而且需要确定一个阀值来触发摇一摇之后的操作。
// 首先，定义一个摇动的阀值
var SHAKE_THRESHOLD = 3000;
// 定义一个变量保存上次更新的时间
var last_update = 0;
// 紧接着定义x、y、z记录三个轴的数据以及上一次触发的时间
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;
// 为了增加这个例子的一点无聊趣味性，增加一个计数器
var count = 0;
function deviceMotionHandler(eventData) {
// 获取含重力的加速度
var acceleration = eventData.accelerationIncludingGravity;
// 获取当前时间
var curTime = new Date().getTime();
var diffTime = curTime -last_update;
// 固定时间段
if (diffTime > 100) {
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) {
// TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作
count++;
document.getElementById("ceshi").innerHTML = count;
}
last_x = x;
last_y = y;
last_z = z;
}
}
init()
</script>
</body>
</html>
2、左右偏移角度，手机平放是0度，往左偏就是负数度，往右同理，根据这个接口我们就可以做：飞机大战，根据偏转角度来实现主角飞机在屏幕中的移动，可以参考我做的demo:http://www.sanmuweb.com/shoot/index.html(手机端才能正常试玩)，效果略简陋，但是逻辑通了。
3、还有个跟重力感应相关的插件就是parallax.js，这个插件在电脑端可以通过鼠标实现图片的分层偏移，手机端可以通过重力感应实现，见demo:http://www.sanmuweb.com/zhongli3.html
