HTML5使用DeviceOrientation實現搖一搖功能，html5orientation

HTML5使用DeviceOrientation實現搖一搖功能，html5orientation

HTML5有一個重要特性：DeviceOrientation，它將底層的方向和動作感應器進行了進階封裝，它使我們能夠很容易的實現重力感應、指南針等有趣的功能。本文將結合執行個體給大家介紹使用HTML5的重力運動和方向感應器實現手機搖一搖效果。

DeviceOrientation包括兩個事件：

1、deviceOrientation：封裝了方向感應器資料的事件，可以擷取手機靜止狀態下的方向資料，例如手機所處角度、方位、朝向等。
2、deviceMotion：封裝了動作感應器資料的事件，可以擷取手機運動狀態下的運動加速度等資料。

HTML

頁面上有一個div#hand，用來放置一個手搖的圖片，div#result用來展示搖動後的結果資訊。

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

我們可以使用CSS3來增強頁面效果，使用-webkit-animation動畫效果實現手搖圖片的動態效果，具體請下載原始碼查看。

Javascript

“搖一搖”這個動作即“一定時間內裝置了一定距離”，因此通過devicemotion監聽裝置晃動擷取到的x, y, z軸的 值在一定時間範圍內的變動率，即判斷裝置是否有進行晃動。而為了防止正常移動的誤判，需要給該變動率設定一個合適的臨界值。
HTML5判斷裝置晃動的代碼我們使用已經封裝好的shake.js，項目地址：https://github.com/alexgibson/shake.js。

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

首先執行個體化Shake，然後啟動開始監聽裝置運動情況，監聽裝置運動，回調監聽結果：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 = ['妹子一枚','福利圖片一套','碼農筆記一本','土豪金一台'];     var num = Math.floor(Math.random()*4);     result.innerHTML = "恭喜，搖得"+arr[num]+"！";     setTimeout(function(){       result.className = "result result-show";     }, 1000);   } }; 

這裡，函數shakeEventDidOccur()可以自訂，本例是將搖晃後的結果返回在頁面上展示出來，請看DEMO示範。

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