刚刚过去的一年里基于微信的H5营销可谓是十分火爆，通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧，刚好最近农历新年将至，我就拿一个“摇签”的小例子来谈一谈HTML5中如何调用手机重力感应的接口。
演示代码：摇一摇，万福签
什么是重力感应
说到重力感应有一个东西不得不提，那就是就是陀螺仪，陀螺仪就是内部有一个陀螺，陀螺仪一旦开始旋转，由于轮子的角动量，陀螺仪有抗拒方向改变的特性，它的轴由于陀螺效应始终与初始方向平行，这样就可以通过与初始方向的偏差计算出实际方向。
手机中的方位轴
在Web应用中调用手机陀螺仪接口
//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角)
//测试中发现有些设备不支持
if(window.DeviceOrientationEvent){
$(window).on('deviceorientation',function(e) {
if(isStarted) {
returntrue;
}
if(!lastAcc) {
lastAcc = e;
returntrue;
}
vardelA = Math.abs(e.alpha - lastAcc.alpha);
vardelB = Math.abs(e.beta - lastAcc.beta);
vardelG = Math.abs(e.gamma - lastAcc.gamma);
if( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {
start();
}
lastAcc = e;
});
//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)
if(window.DeviceMotionEvent) {
varspeed = 25;
varx, y, z, lastX, lastY, lastZ;
x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion',function(event){
varacceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
start();
}
lastX = x;
lastY = y;
}, false);
}
摇一摇的代码判断逻辑
varisStarted = false;
// 开始摇签
functionstart() {
isStarted = true;
$('.qiancover').hide();
$('.decode').hide();
$('.result').show();
// setTimeout(showDecode, 3000);
}
// 显示正在解签
functionshowDecode() {
$('.result').hide();
$('.decode').show();
setTimeout(jumpToDecode, 3000);
}
// 跳至签文页面
functionjumpToDecode(){
varurls = ["#","#"];
varjumpTo = urls[parseInt(Math.random() * urls.length)];
window.location = jumpTo;};
示例代码： https://github.com/lionrock/HTML5-Example/tree/master/wechat-divination
参考文档： DeviceOrientation Event Specification
来源：http://xunli.xyz/2016/01/12/html5-device-shake/?utm_source=tuicool&utm_medium=referral