HTML5手機重力與方向感應的應用——搖一搖效果
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示範。
聲明：本文為原創文章，helloweba.com和作者擁有版權，如需轉載，請注明來源于helloweba.com并保留原文連結：http://www.helloweba.com/view-blog-287.html