Html5+JS實現手機搖一搖
HTML5一個重要特性就是DeviceOrientation,它將底層的方向感測器和運動感測器進行了高階封裝,提供了DOM事件的支援。這個特性包括兩種事件:
1、 deviceOrientation:封裝了方向感測器資料的事件,可以獲取手機靜止狀態下的方向資料,例如手機所處角度、方位、朝向等。
2、 deviceMotion:封裝了運動感測器資料的事件,可以獲取手機運動狀態下的運動加速度等資料。 使用它我們能夠很容易的實現重力感應、指南針等有趣的功能,在手機上將非常有用。例如Opera H5體驗版裡的重力感應球示例就是通過監聽DeviceOrientation API的deviceOrientation事件來實現的。 其實它還能幫助我們在網頁上實現一個手機應用裡非常常見而時尚的功能:手機搖一搖。
DeviceMotionEvent(裝置運動事件)返回裝置有關於加速度和旋轉的相關資訊。加速度的資料將包含三個軸:x,y和z(示意如下圖所示,x軸橫向貫穿手機螢幕或者筆記本鍵盤,y軸縱向貫穿手機螢幕或筆記本鍵盤,z軸垂直於手機螢幕或筆記本鍵盤)。因為有些裝置可能沒有硬體來排除重力的影響,該事件會返回兩個屬性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),後者排除了重力的影響。
1. [程式碼]監聽運動感測事件
2. [程式碼]獲取含重力的加速度
3. [程式碼]核心方法實現程式碼
HTML5一個重要特性就是DeviceOrientation,它將底層的方向感測器和運動感測器進行了高階封裝,提供了DOM事件的支援。這個特性包括兩種事件:
1、 deviceOrientation:封裝了方向感測器資料的事件,可以獲取手機靜止狀態下的方向資料,例如手機所處角度、方位、朝向等。
2、 deviceMotion:封裝了運動感測器資料的事件,可以獲取手機運動狀態下的運動加速度等資料。
使用它我們能夠很容易的`實現重力感應、指南針等有趣的功能,在手機上將非常有用。例如Opera H5體驗版裡的重力感應球示例就是通過監聽DeviceOrientation
API的deviceOrientation事件來實現的。
其實它還能幫助我們在網頁上實現一個手機應用裡非常常見而時尚的功能:手機搖一搖。
DeviceMotionEvent(裝置運動事件)返回裝置有關於加速度和旋轉的相關資訊。加速度的資料將包含三個軸:x,y和z(示意如下圖所示,x軸橫向貫穿手機螢幕或者筆記本鍵盤,y軸縱向貫穿手機螢幕或筆記本鍵盤,z軸垂直於手機螢幕或筆記本鍵盤)。因為有些裝置可能沒有硬體來排除重力的影響,該事件會返回兩個屬性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),後者排除了重力的影響。
1. [程式碼]監聽運動感測事件
程式碼如下:
if (ceMotionEvent) {
ventListener(‘devicemotion’,deviceMotionHandler, false);
}
2. [程式碼]獲取含重力的加速度
程式碼如下:
function deviceMotionHandler(eventData) {
var acceleration =lerationIncludingGravity;
}
3. [程式碼]核心方法實現程式碼
程式碼如下:
var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;
function deviceMotionHandler(eventData) {
var acceleration =lerationIncludingGravity;
var curTime = newDate()ime();
if ((curTime – lastUpdate)> 100) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = (x +y + z – last_x – last_y – last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {
alert(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}