JS實現(xiàn)微信搖一搖原理解析

更新時間：2017年07月22日 09:09:22 作者：motokay

這篇文章主要為大家詳細(xì)介紹了JS微信搖一搖的實現(xiàn)原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了JS實現(xiàn)微信搖一搖的原理，供大家參考，具體內(nèi)容如下

實現(xiàn)原理：

1.微信搖一搖事件需要有硬件支撐，必須要求手機中有陀螺儀
2.在JS中給window添加ondevectionmotion事件。該事件在手機晃動，即手機中的陀螺儀發(fā)生旋轉(zhuǎn)，該事件會觸發(fā)
3.觸發(fā)ondevectionmotion事件，會產(chǎn)生一個事件對象，通過該對象中的鍵值(accelerationIncludingGravity)來獲得該重力加速器對象
4.重力加速器對象中含有陀螺儀的坐標(biāo)，通過重力加速器對象.x - .y - .z 獲取陀螺儀當(dāng)前的坐標(biāo)

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
  <title>微信搖一搖</title> 
 </head> 
 <body> 
  <!--請搖一搖--> 
 </body> 
 <script type="text/javascript"> 
  function randomNum(m,n){ 
   return Math.floor(Math.random(n - m + 1) + m); 
  } 
  //cover設(shè)置背景尺寸 
  //將背景圖按所在標(biāo)簽的寬高，縮放 
  document.body.style.backgroundSize = "cover"; 
  //設(shè)置body的背景圖 
  document.body.style.backgroundImage = "url(img/bg.jpg)" ; 
  //事件設(shè)備：觸發(fā)該事件需要硬件支持 
  //搖一搖功能： 
  //1.手機中的陀螺儀加速兩次 加速器的差值當(dāng)達(dá)到某個值時，則認(rèn)為是手機晃動事件 
  //2.設(shè)置手機晃動事件前，獲取加速器的值 
  //3.添加手機晃動事件;     
  //獲取手機晃動前加速器的值,創(chuàng)建一個對象獲取 
  var currentValue = { 
   x : 0, 
   y : 0, 
   z : 0 
  }; 
  //獲取手機晃動之后加速器的值,創(chuàng)建一個對象獲取 
  var lastValue = { 
   x : 0, 
   y : 0, 
   z : 0 
  } 
  //設(shè)置晃動的最小的距離，只有達(dá)到該距離時，才執(zhí)行搖一搖事件 
  var minValue = 20; 
  //當(dāng)手機觸發(fā)搖一搖事件時，我們得到此時的位置信息，存儲到一個p標(biāo)簽上 
  //理論上講：陀螺儀事件中的加速器是無法靜止的; 
  var p1 = document.createElement("p"); 
  //第一種方式： 
  var img1 = document.createElement("img"); 
  img1.style.width = "375px"; 
  img1.style.height = "560px"; 
  //手機晃動事件 
  window.ondevicemotion = function(e){ 
   //獲取對象 
   var event1 = event || e; 
   //獲取加速器對象，為了獲取陀螺儀上的坐標(biāo)信息 
   var acceleration = event1.accelerationIncludingGravity; 
   //記錄當(dāng)前加速器的值 
   currentValue.x = acceleration.x; 
   currentValue.y = acceleration.y; 
   currentValue.z = acceleration.z; 
   //判斷微信搖一搖事件（手機是否晃動） 
   if (Math.abs(currentValue.x - lastValue.x) >= minValue || Math.abs(currentValue.y - lastValue.y) > minValue || Math.abs(currentValue.z - lastValue.z) > minValue) { 
    //說明搖一搖事件觸發(fā) 
    //實現(xiàn)微信搖一搖，可以將搖一搖中的圖片，作為body的背景圖 
    //隨機一張圖片的下標(biāo)（1 - 5） 
    var ranN = randomNum(1,6); 
    //創(chuàng)一個定時器 
    var timer = setInterval(function(){ 
     ranN ++ 
     if (ranN == 6) { 
      ranN = 1; 
     } 
     //為當(dāng)前的body設(shè)置背景圖 
     //document.body.style.backgroundImage = "url(img/"+ranN+".jpg)"; 
     //為當(dāng)前img設(shè)置路徑 
     img1.src = "img/"+ranN+".jpg"; 
      
    },200); 
    //設(shè)置一個延時器，延時一段時間后消除延時器 
    setTimeout(function(){ 
     clearInterval(timer); 
    },1000); 
   } 
   //記錄最后的值（保存上一次晃動事件中的加速器的值） 
   lastValue.x = currentValue.x; 
   lastValue.y = currentValue.y; 
   lastValue.z = currentValue.z; 
  } 
  document.body.appendChild(img1); 
 </script> 
</html>

注意：該代碼中沒有上傳圖片，如需要運行需要自己在代碼的同級目錄創(chuàng)建一個img文件夾，里面放上從1到6的后綴為.jpg的圖片

您可能感興趣的文章: