HTML 5實現手機搖一搖的功能

2021-06-19 21:23:51 字數 1035 閱讀 4121

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...