国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML5搖一搖(上)—如何判斷設備搖動

WilsonLiu95 / 1917人閱讀

摘要:剛剛過去的一年里基于微信的營銷可謂是十分火爆,通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧,剛好最近農歷新年將至,我就拿一個搖簽的小例子來談一談中如何調用手機重力感應的接口演示搖一搖,萬福簽什么是重力感應說到重力感應有一個東西不得

</>復制代碼

  1. 剛剛過去的一年里基于微信的H5營銷可謂是十分火爆,通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧,剛好最近農歷新年將至,我就拿一個“搖簽”的小例子來談一談HTML5中如何調用手機重力感應的接口

演示demo:“搖一搖,萬福簽”

什么是重力感應

說到重力感應有一個東西不得不提,那就是就是陀螺儀,陀螺儀就是內部有一個陀螺,陀螺儀一旦開始旋轉,由于輪子的角動量,陀螺儀有抗拒方向改變的特性,它的軸由于陀螺效應始終與初始方向平行,這樣就可以通過與初始方向的偏差計算出實際方向。

手機中的方位軸



在Web應用中調用手機陀螺儀接口

具體實現搖一搖可以通過HTML5中的DeviceOrientationEvent或者DeviceMotionEvent,二者的區別在于DeviceOrientation只是判斷用戶設備的偏轉角度,而DeviceMotion則可以計算用戶手機移動的加速度

</>復制代碼

  1. //搖一搖(使用DeviceOrientation事件, 本質是計算偏轉角)
  2. if(window.DeviceOrientationEvent){
  3. var lastAcc; // 用來存儲上一次的deviceorientation事件
  4. $(window).on("deviceorientation", function(event) {
  5. var delA = Math.abs(event.alpha - lastAcc.alpha); // alpha軸偏轉角
  6. var delB = Math.abs(event.beta - lastAcc.beta); // beta軸偏轉角
  7. var delG = Math.abs(event.gamma - lastAcc.gamma); // gamma軸偏轉角
  8. if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {
  9. // 用戶設備搖動了,觸發響應操作
  10. // 此處的判斷依據是任意兩個軸篇轉角度大于15度
  11. alert("搖了");
  12. }
  13. lastAcc = event; // 存儲上一次的event
  14. });

</>復制代碼

  1. //搖一搖(使用DeviceMotion事件, 推薦,應為可以計算加速度)
  2. if(window.DeviceMotionEvent) {
  3. var speed = 25; // 用來判定的加速度閾值,太大了則很難觸發
  4. var x, y, z, lastX, lastY, lastZ;
  5. x = y = z = lastX = lastY = lastZ = 0;
  6. window.addEventListener("devicemotion", function(event){
  7. var acceleration = event.accelerationIncludingGravity;
  8. x = acceleration.x;
  9. y = acceleration.y;
  10. if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
  11. // 用戶設備搖動了,觸發響應操作
  12. // 此處的判斷依據是用戶設備的加速度大于我們設置的閾值
  13. alert("搖了");
  14. }
  15. lastX = x;
  16. lastY = y;
  17. }, false);
  18. }
搖一搖的代碼判斷邏輯

</>復制代碼

  1. var isStarted = false; // 是否開始搖動
  2. // 開始搖簽
  3. function start() {
  4. isStarted = true;
  5. $(".qiancover").hide(); //把封面背景上的靜態簽筒隱藏
  6. $(".decode").hide(); // 解簽頁面隱藏
  7. $(".result").show(); // 把簽筒搖動的div顯示出來
  8. // setTimeout(showDecode, 3000);
  9. }
  10. // 顯示正在解簽
  11. function showDecode() {
  12. $(".result").hide(); // 把簽筒搖動的div隱藏起來
  13. $(".decode").show(); // 顯示正在解簽
  14. setTimeout(jumpToDecode, 3000);
  15. }
  16. // 跳至簽文頁面
  17. function jumpToDecode(){
  18. var urls = ["#", "#"]; // 用來存簽文結果頁面
  19. var jumpTo = urls[parseInt(Math.random() * urls.length)]; // 隨機跳轉至簽文結果頁面
  20. window.location = jumpTo;
  21. };

傳送門:HTML5搖一搖(下)—如何實現簽筒搖動動畫

博客原文(持續更新):HTML5搖一搖(上)—如何判斷設備搖動

示例代碼:https://github.com/lionrock/H...

參考文檔:DeviceOrientation Event Specification

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49711.html

相關文章

  • HTML5一搖)—如何判斷設備搖動

    摘要:剛剛過去的一年里基于微信的營銷可謂是十分火爆,通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧,剛好最近農歷新年將至,我就拿一個搖簽的小例子來談一談中如何調用手機重力感應的接口演示搖一搖,萬福簽什么是重力感應說到重力感應有一個東西不得 剛剛過去的一年里基于微信的H5營銷可謂是十分火爆,通過轉發朋友圈帶來的病毒式傳播效果相信大家都不太陌生吧,剛好最近農歷新年將至,我就拿一個搖簽的小...

    curried 評論0 收藏0
  • 微信頁面監聽一搖事件,并伴有音效

    摘要:原文出處最近要寫一個微信網頁,需要監聽手機搖動事件,并且伴隨有聲音在,事件特性的運動傳感器的封裝時間裝置,你可以通過改變運動時間獲取設備的狀態,加速和其他數據有另一個角度事件提供設備,定位等信息。 原文出處:http://i.jakeyu.top/2016/05/0... 最近要寫一個微信網頁,需要監聽手機搖動事件,并且伴隨有聲音 在HTML5,devicemotion事件devic...

    fuchenxuan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<