這篇文章主要介紹了HTML5使用DeviceOrientation實現(xiàn)搖一搖功能的相關(guān)資料,需要的朋友可以參考下

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

DeviceOrientation包括兩個事件：

1、deviceOrientation：封裝了方向傳感器數(shù)據(jù)的事件，可以獲取手機靜止?fàn)顟B(tài)下的方向數(shù)據(jù)，例如手機所處角度、方位、朝向等。

2、deviceMotion：封裝了運動傳感器數(shù)據(jù)的事件，可以獲取手機運動狀態(tài)下的運動加速度等數(shù)據(jù)。

HTML

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

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

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

Javascript

“搖一搖”這個動作即“一定時間內(nèi)設(shè)備了一定距離”，因此通過devicemotion監(jiān)聽設(shè)備晃動獲取到的x, y, z軸的 值在一定時間范圍內(nèi)的變化率，即判斷設(shè)備是否有進行晃動。而為了防止正常移動的誤判，需要給該變化率設(shè)置一個合適的臨界值。

HTML5判斷設(shè)備晃動的代碼我們使用已經(jīng)封裝好的shake.js，項目地址：https://github.com/alexgibson/shake.js。

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

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

1. window.onload = function() {  
2. var myShakeEvent = new Shake({  
3. threshold: 15  
4. });  
5.  
6. myShakeEvent.start();  
7.  
8. window.addEventListener('shake', shakeEventDidOccur, false);  
9.  
10. function shakeEventDidOccur () {  
11. var result = document.getElementById("result");  
12. result.className = "result";  
13. var arr = ['妹子一枚','福利圖片一套','碼農(nóng)筆記一本','土豪金一臺'];  
14. var num = Math.floor(Math.random()*4);  
15. result.innerHTML = "恭喜，搖得"+arr[num]+"！";  
16. setTimeout(function(){  
17. result.className = "result result-show";  
18. }, 1000);  
19. }  
20. };  

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

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