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示範。
以上所述就是本文的全部內容了,希望大家能夠喜歡。