HTML5有一個(gè)重要特性：DeviceOrientation，它將底層的方向和運(yùn)動(dòng)傳感器進(jìn)行了高級(jí)封裝，它使我們能夠很容易的實(shí)現(xiàn)重力感應(yīng)、指南針等有趣的功能。本文將結(jié)合實(shí)例給大家介紹使用HTML5的重力運(yùn)動(dòng)和方向傳感器實(shí)現(xiàn)手機(jī)搖一搖效果。

DeviceOrientation包括兩個(gè)事件：

1、deviceOrientation：封裝了方向傳感器數(shù)據(jù)的事件，可以獲取手機(jī)靜止?fàn)顟B(tài)下的方向數(shù)據(jù)，例如手機(jī)所處角度、方位、朝向等。
2、deviceMotion：封裝了運(yùn)動(dòng)傳感器數(shù)據(jù)的事件，可以獲取手機(jī)運(yùn)動(dòng)狀態(tài)下的運(yùn)動(dòng)加速度等數(shù)據(jù)。

HTML

頁面上有一個(gè)div#hand，用來放置一個(gè)手搖的圖片，div#result用來展示搖動(dòng)后的結(jié)果信息。

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div> 

我們可以使用CSS3來增強(qiáng)頁面效果，使用-webkit-animation動(dòng)畫效果實(shí)現(xiàn)手搖圖片的動(dòng)態(tài)效果，具體請(qǐng)下載源代碼查看。

Javascript

“搖一搖”這個(gè)動(dòng)作即“一定時(shí)間內(nèi)設(shè)備了一定距離”，因此通過devicemotion監(jiān)聽設(shè)備晃動(dòng)獲取到的x, y, z軸的 值在一定時(shí)間范圍內(nèi)的變化率，即判斷設(shè)備是否有進(jìn)行晃動(dòng)。而為了防止正常移動(dòng)的誤判，需要給該變化率設(shè)置一個(gè)合適的臨界值。
HTML5判斷設(shè)備晃動(dòng)的代碼我們使用已經(jīng)封裝好的shake.js，項(xiàng)目地址：https://github.com/alexgibson/shake.js。

<script src="shake.js"></script> 

首先實(shí)例化Shake，然后啟動(dòng)開始監(jiān)聽設(shè)備運(yùn)動(dòng)情況，監(jiān)聽設(shè)備運(yùn)動(dòng)，回調(diào)監(jiān)聽結(jié)果：shakeEventDidOccur。

window.onload = function() { 
  var myShakeEvent = new Shake({ 
    threshold: 15 
  }); 
 
  myShakeEvent.start(); 
 
  window.addEventListener('shake', shakeEventDidOccur, false); 
 
  function shakeEventDidOccur () { 
    var result = document.getElementById("result"); 
    result.className = "result"; 
    var arr = ['妹子一枚','福利圖片一套','碼農(nóng)筆記一本','土豪金一臺(tái)']; 
    var num = Math.floor(Math.random()*4); 
    result.innerHTML = "恭喜，搖得"+arr[num]+"！"; 
    setTimeout(function(){ 
      result.className = "result result-show"; 
    }, 1000); 
  } 
}; 

這里，函數(shù)shakeEventDidOccur()可以自定義，本例是將搖晃后的結(jié)果返回在頁面上展示出來，請(qǐng)看DEMO演示。

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

最新評(píng)論