剛剛過去的一年里基于微信的H5營銷可謂是十分火爆，通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧，剛好最近農歷新年將至，我就拿一個“搖簽”的小例子來談一談HTML5中如何調用手機重力感應的接口。
演示代碼：搖一搖，萬福簽
什么是重力感應
說到重力感應有一個東西不得不提，那就是就是陀螺儀，陀螺儀就是內部有一個陀螺，陀螺儀一旦開始旋轉，由于輪子的角動量，陀螺儀有抗拒方向改變的特性，它的軸由于陀螺效應始終與初始方向平行，這樣就可以通過與初始方向的偏差計算出實際方向。
手機中的方位軸
在Web應用中調用手機陀螺儀接口
//搖一搖(使用DeviceOrientation事件, 本質是計算偏轉角)
//測試中發現有些設備不支持
if(window.DeviceOrientationEvent){
$(window).on('deviceorientation', function(e) {
if (isStarted) {
return true;
}
if (!lastAcc) {
lastAcc = e;
return true;
}
var delA = Math.abs(e.alpha - lastAcc.alpha);
var delB = Math.abs(e.beta - lastAcc.beta);
var delG = 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) {
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) {
start();
}
lastX = x;
lastY = y;
}, false);
}
搖一搖的代碼判斷邏輯
var isStarted = false;
// 開始搖簽
function start() {
isStarted = true;
$('.qiancover').hide();
$('.decode').hide();
$('.result').show();
// setTimeout(showDecode, 3000);
}
// 顯示正在解簽
function showDecode() {
$('.result').hide();
$('.decode').show();
setTimeout(jumpToDecode, 3000);
}
// 跳至簽文頁面
function jumpToDecode(){
var urls = ["#", "#"];
var jumpTo = 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
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。