html5另外乙個重要特性就是deviceorientation,它將底層的方向感測器和運動感測器進行了高階封裝,提供了dom事件的支援。這個特性包括兩種事件:
1、 deviceorientation:封裝了方向感測器資料的事件,可以獲取手機靜止狀態下的方向資料,例如手機所處角度、方位、朝向等。
2、 devicemotion:封裝了運動感測器資料的事件,可以獲取手機運動狀態下的運動加速度等資料。
使用它我們能夠很容易的實現重力感應、指南針等有趣的功能,在手機上將非常有用。例如opera h5體驗版裡的重力感應球示例就是通過監聽deviceorientation
api的deviceorientation事件來實現的。
我們先來監聽運動感測事件。
if (window.devicemotionevent)
然後獲取含重力的加速度。
function devicemotionhandler(eventdata)
下面就涉及到我們如何計算使用者搖晃手機的原理了。考慮的要點如下:
1、 使用者大多時候都是以乙個方向為主晃動手機來進行搖動;
2、 在晃動時三個方向的加速度資料必定都會變化;
3、 我們不能誤判手機正常的運動行為,想一想,如果你的手機放在褲兜裡,走路時它也會有加速度資料變化。
綜上,我們應該針對三個方向的加速度進行計算,間隔測量它們,考察它們在固定時間段裡的變化率,而且需要為它確定乙個閾值來觸發動作。
var shake_threshold = ***;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;
function devicemotionhandler(eventdata)
last_x = x;
last_y = y;
last_z = z;
}}
由此我們完成了手機搖一搖的功能,是不是非常簡單?
html5實現web app搖一搖換歌
先來看下demo效果圖 先來看下html5的這幾個特性 如何判斷使用者搖晃了手機?考慮的要點如下 1 使用者大多時候都是以乙個方向為主晃動手機來進行搖動 2 在晃動時三個方向的加速度資料必定都會變化 3 我們不能誤判手機正常的運動行為,例如我們在走路時,放在褲兜裡的手機也會有加速度資料變化。綜上,我...
H5 JS實現手機搖一搖功能
為了實現它,就需要用到html5的deviceorientation特性。它提供的devicemotion事件封裝了裝置的運動感測器時間,通過改時間可以獲取裝置的運動狀態 加速度等資料 另還有deviceorientation事件提供了裝置角度 朝向等資訊 而通過devicemotion對裝置運動狀...
ios 搖一搖功能實現
搖一搖功能的實現,這裡簡單的介紹兩種 1 根據加速計的值來判斷,比如說可以根據acceleration.x,acceleration.y,acceleration.z的值來判斷是否搖動了。關於感測器的介紹可以看我的這篇文章 void motionbegan uieventsubtype motion...