方才过去的一年里基于微信的H5营销可谓是非常火爆,经由过程转发朋友圈带来的病毒式流传效果置信人人都不太生疏吧,恰好近来夏历新年将至,我就拿一个“摇签”的小例子来谈一谈HTML5中怎样挪用手机重力感到的接口
演示demo:“摇一摇,万福签”
什么是重力感到
说到重力感到有一个东西不得不提,那就是就是陀螺仪,陀螺仪就是内部有一个陀螺,陀螺仪一旦最先扭转,因为轮子的角动量,陀螺仪有抗拒方向转变的特征,它的轴因为陀螺效应一直与初始方向平行,如许就能够经由过程与初始方向的误差盘算出现实方向。
手机中的方位轴
在Web运用中挪用手机陀螺仪接口
详细完成摇一摇能够经由过程HTML5中的DeviceOrientationEvent或许DeviceMotionEvent,两者的区分在于DeviceOrientation只是推断用户装备的偏转角度,而DeviceMotion则能够盘算用户手机挪动的加速度
//摇一摇(运用DeviceOrientation事宜, 实质是盘算偏转角)
if(window.DeviceOrientationEvent){
var lastAcc; // 用来存储上一次的deviceorientation事宜
$(window).on('deviceorientation', function(event) {
var delA = Math.abs(event.alpha - lastAcc.alpha); // alpha轴偏转角
var delB = Math.abs(event.beta - lastAcc.beta); // beta轴偏转角
var delG = Math.abs(event.gamma - lastAcc.gamma); // gamma轴偏转角
if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {
// 用户装备动摇了,触发相应操纵
// 此处的推断根据是恣意两个轴篇转角度大于15度
alert('摇了');
}
lastAcc = event; // 存储上一次的event
});
//摇一摇(运用DeviceMotion事宜, 引荐,应为能够盘算加速度)
if(window.DeviceMotionEvent) {
var speed = 25; // 用来剖断的加速度阈值,太大了则很难触发
var x, y, z, lastX, lastY, lastZ;
x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion', function(event){
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
// 用户装备动摇了,触发相应操纵
// 此处的推断根据是用户装备的加速度大于我们设置的阈值
alert('摇了');
}
lastX = x;
lastY = y;
}, false);
}
摇一摇的代码推断逻辑
var isStarted = false; // 是不是最先动摇
// 最先摇签
function start() {
isStarted = true;
$('.qiancover').hide(); //把封面背景上的静态签筒隐蔽
$('.decode').hide(); // 解签页面隐蔽
$('.result').show(); // 把签筒动摇的div显现出来
// setTimeout(showDecode, 3000);
}
// 显现正在解签
function showDecode() {
$('.result').hide(); // 把签筒动摇的div隐蔽起来
$('.decode').show(); // 显现正在解签
setTimeout(jumpToDecode, 3000);
}
// 跳至签文页面
function jumpToDecode(){
var urls = ["#", "#"]; // 用来存签文效果页面
var jumpTo = urls[parseInt(Math.random() * urls.length)]; // 随机跳转至签文效果页面
window.location = jumpTo;
};
博客原文(延续更新):HTML5摇一摇(上)—怎样推断装备动摇