剛剛過(guò)去的一年里基于微信的H5營(yíng)銷(xiāo)可謂是十分火爆，通過(guò)轉(zhuǎn)發(fā)朋友圈帶來(lái)的病毒式傳播效果相信大家都不太陌生吧，剛好最近農(nóng)歷新年將至，我就拿一個(gè)“搖簽”的小例子來(lái)談一談HTML5中如何調(diào)用手機(jī)重力感應(yīng)的接口。
演示代碼：搖一搖，萬(wàn)福簽
什么是重力感應(yīng)
說(shuō)到重力感應(yīng)有一個(gè)東西不得不提，那就是就是陀螺儀，陀螺儀就是內(nèi)部有一個(gè)陀螺，陀螺儀一旦開(kāi)始旋轉(zhuǎn)，由于輪子的角動(dòng)量，陀螺儀有抗拒方向改變的特性，它的軸由于陀螺效應(yīng)始終與初始方向平行，這樣就可以通過(guò)與初始方向的偏差計(jì)算出實(shí)際方向。
手機(jī)中的方位軸
在Web應(yīng)用中調(diào)用手機(jī)陀螺儀接口
//搖一搖(使用DeviceOrientation事件, 本質(zhì)是計(jì)算偏轉(zhuǎn)角)
//測(cè)試中發(fā)現(xiàn)有些設(shè)備不支持
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事件, 推薦,應(yīng)為可以計(jì)算加速度)
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;
// 開(kāi)始搖簽
function start() {
isStarted = true;
$('.qiancover').hide();
$('.decode').hide();
$('.result').show();
// setTimeout(showDecode, 3000);
}
// 顯示正在解簽
function showDecode() {
$('.result').hide();
$('.decode').show();
setTimeout(jumpToDecode, 3000);
}
// 跳至簽文頁(yè)面
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
來(lái)源：http://xunli.xyz/2016/01/12/html5-device-shake/?utm_source=tuicool&utm_medium=referral
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。