HTML 5實(shí)現(xiàn)的手機(jī)搖一搖

  自從HTML 5的DeviceOrientation被開發(fā)出來，很多開發(fā)者開始研究其特性，并對(duì)此開發(fā)出了搖一搖，計(jì)步器等應(yīng)用。小編近日閑著無聊，也開發(fā)出了一個(gè)搖一搖網(wǎng)頁應(yīng)用，感興趣的小伙伴可親身體驗(yàn)一下。

  掃碼訪問

  效果圖

  技術(shù)解析

  （1） DeviceOrientation

  DeviceOrientation是HTML 5的重要特性之一，它將底層的方向傳感器和運(yùn)動(dòng)傳感器進(jìn)行了高級(jí)封裝，提供了對(duì)DOM兩種事件的支持：

  1. deviceOrientation：它封裝了方向傳感器的數(shù)據(jù)事件，可以獲取手機(jī)靜止?fàn)顟B(tài)下的方向數(shù)據(jù)，如手機(jī)的傾斜角度和方向。

  2. deviceMotion：它封裝了運(yùn)動(dòng)傳感器的數(shù)據(jù)事件，能夠獲取手機(jī)運(yùn)動(dòng)過程中的運(yùn)動(dòng)加速度等數(shù)據(jù)。

  通過這兩個(gè)事件，我們能夠獲取到移動(dòng)電話的重力感應(yīng)，羅盤方向等數(shù)據(jù)，然后利用這些數(shù)據(jù)做一些有趣的事情。比如，手機(jī)上的重力感應(yīng)球就是使用了DeviceOrientation。

  DeviceOrientation API事件

  監(jiān)控移動(dòng)事件

if (window.DeviceMotionEvent) {
   window.addEventListener('devicemotion',deviceMotionHandler, false);
}

 獲取重力加速度

function deviceMotionHandler(eventData) {
   var acceleration =eventData.accelerationIncludingGravity;
}

  （2） 證實(shí)用戶在搖手機(jī)的幾點(diǎn)考慮：

  1. 大部分用戶搖手機(jī)有一個(gè)主方向。

  2. 搖手機(jī)過程中加速度數(shù)據(jù)在x，y，z方向上數(shù)據(jù)一定會(huì)改變。

  3. 不能誤判手機(jī)正常移動(dòng)過程。比如，手機(jī)在口袋中，走路的時(shí)候，加速度數(shù)據(jù)也會(huì)發(fā)生變化。

  因此，我們計(jì)算搖手機(jī)的過程不僅僅是計(jì)算手機(jī)在x，y，z三個(gè)方向上加速度的變化，時(shí)間的變化間隔，還包含了在固定時(shí)間間隔中變化的速度，以此來觸發(fā)事件。

  源碼托管在GITHUB上 

   https://github.com/favccxx/favshake