摘要:剛剛過去的一年里基于微信的營銷可謂是十分火爆,通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧,剛好最近農歷新年將至,我就拿一個搖簽的小例子來談一談中如何調用手機重力感應的接口演示搖一搖,萬福簽什么是重力感應說到重力感應有一個東西不得
</>復制代碼
剛剛過去的一年里基于微信的H5營銷可謂是十分火爆,通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧,剛好最近農歷新年將至,我就拿一個“搖簽”的小例子來談一談HTML5中如何調用手機重力感應的接口
演示demo:“搖一搖,萬福簽”
什么是重力感應說到重力感應有一個東西不得不提,那就是就是陀螺儀,陀螺儀就是內部有一個陀螺,陀螺儀一旦開始旋轉,由于輪子的角動量,陀螺儀有抗拒方向改變的特性,它的軸由于陀螺效應始終與初始方向平行,這樣就可以通過與初始方向的偏差計算出實際方向。
手機中的方位軸具體實現搖一搖可以通過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搖一搖(下)—如何實現簽筒搖動動畫
博客原文(持續更新):HTML5搖一搖(上)—如何判斷設備搖動
示例代碼:https://github.com/lionrock/H...
參考文檔:DeviceOrientation Event Specification
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49711.html
摘要:剛剛過去的一年里基于微信的營銷可謂是十分火爆,通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧,剛好最近農歷新年將至,我就拿一個搖簽的小例子來談一談中如何調用手機重力感應的接口演示搖一搖,萬福簽什么是重力感應說到重力感應有一個東西不得 剛剛過去的一年里基于微信的H5營銷可謂是十分火爆,通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧,剛好最近農歷新年將至,我就拿一個搖簽的小...
摘要:原文出處最近要寫一個微信網頁,需要監聽手機搖動事件,并且伴隨有聲音在,事件特性的運動傳感器的封裝時間裝置,你可以通過改變運動時間獲取設備的狀態,加速和其他數據有另一個角度事件提供設備,定位等信息。 原文出處:http://i.jakeyu.top/2016/05/0... 最近要寫一個微信網頁,需要監聽手機搖動事件,并且伴隨有聲音 在HTML5,devicemotion事件devic...
閱讀 3378·2023-04-26 01:40
閱讀 3087·2021-11-24 09:39
閱讀 1398·2021-10-27 14:19
閱讀 2641·2021-10-12 10:11
閱讀 1302·2021-09-26 09:47
閱讀 1843·2021-09-22 15:21
閱讀 2697·2021-09-06 15:00
閱讀 887·2021-08-10 09:44
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要