手机端重力感应接口及应用

现在微信开发如火如荼，各种基于微信的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>

<h3>请用手机浏览器访问</h3>
EGRET白鹭版降临: <a href="http://weixin.shinycg.com/weixin/DeviceOrientation" target="_blank">http://weixin.shinycg.com/weixin/DeviceOrientation</a>
左右：0
前后：0
扭转：0
指北针指向：0度
指北针精度：0度
<hr/>
x轴加速度：0米每二次方秒
y轴加速度：0米每二次方秒
z轴加速度：0米每二次方秒
<hr/>
x轴加速度(考虑重力加速度)：0米每二次方秒
y轴加速度(考虑重力加速度)：0米每二次方秒
z轴加速度(考虑重力加速度)：0米每二次方秒
<hr/>
左右旋转速度：0度每秒
前后旋转速度：0度每秒
扭转速度：0度每秒
<hr/>
上次收到通知的间隔：0毫秒

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