HTML5重力感應(yīng)在移動端交互中的應(yīng)用研究

陳桂霞

摘要：基于一系列新特性，HTML5催生出了如位置檢測、重力感應(yīng)等全新的用戶和頁面的交互方式，這些新型的交互功能迅速在用戶中普及和流行。HTML5中的運(yùn)動重力感應(yīng)模塊為移動端各種交互的實(shí)現(xiàn)提供了技術(shù)基礎(chǔ)，文章以HTML5重力感應(yīng)模塊的主要技術(shù)DeviceMotionEvent為切入口，解析其技術(shù)原理及工作過程。以常見的手機(jī)交互“搖一搖”為例，利用Dom事件獲取手機(jī)運(yùn)動時的方向值、移動距離以及加速度等數(shù)據(jù)，加以處理并給予反饋，從而實(shí)現(xiàn)HTML5重力感應(yīng)在手機(jī)交互中的應(yīng)用。

關(guān)鍵詞：交互；重力感應(yīng)；DeviceMotionEvent

中圖分類號：TP393.092? 文獻(xiàn)標(biāo)志碼：A

0 引言

HTML5（以下簡稱“H5”）最創(chuàng)新的部分，并不在于它絢麗的動畫效果，也不在于其強(qiáng)大的圖像處理能力，而在于它給予了用戶與頁面之間開展交互的無窮可能性。在過去，用戶與頁面之間的交互方式主要是鍵盤和鼠標(biāo)，而隨著移動設(shè)備的逐漸普及，交互的主要方式變?yōu)榱擞|摸手勢操作［1］。H5一系列新的特性，也催生出了如地理位置檢測、文件拖動、重力感應(yīng)等全新的交互方式，并迅速在用戶中普及和流行起來。在前幾年的春節(jié)晚會中數(shù)億人同時搖動手機(jī)抽紅包，更是使這種交互方式深入人心。H5中的運(yùn)動和重力的加速度感應(yīng)為實(shí)現(xiàn)此類交互操作提供了技術(shù)基礎(chǔ)。下面從H5重力感應(yīng)模塊的主要技術(shù)入手，解析其原理，并以具體的案例來展現(xiàn)H5在移動端運(yùn)動和重力感應(yīng)實(shí)現(xiàn)的過程。

1 H5重力感應(yīng)主要技術(shù)及原理

重力感應(yīng)模塊是目前移動設(shè)備的標(biāo)準(zhǔn)配置，這個模塊功能的實(shí)現(xiàn)取決于H5的重要新特性DeviceMotionEvent，它封裝了底層的運(yùn)動和方向傳感器數(shù)據(jù)，讓重力感應(yīng)、指南針等功能的實(shí)現(xiàn)變得容易。確切地說，DeviceMotionEvent是H5提供的一個用來獲取設(shè)備物理方向及運(yùn)動信息（重力感應(yīng)）的Dom事件，事件描述如下：（1）DeviceOrientation。封裝了方向傳感器數(shù)據(jù)的事件，可以獲取設(shè)備靜止?fàn)顟B(tài)下的方向信息，如手機(jī)所處朝向、方位、角度等，表示為一系列本地坐標(biāo)系的旋角。（2）DeviceMotion。封裝了運(yùn)動傳感器數(shù)據(jù)的事件，可以獲取設(shè)備運(yùn)動狀態(tài)下的運(yùn)動加速度等信息，表示為設(shè)備坐標(biāo)系中的卡爾迪坐標(biāo)［2］。

DeviceOrientationEvent和DeviceMotionEvent兩者的區(qū)別在于：DeviceOrientationEvent的值是相對于初始狀態(tài)的差值，只要設(shè)備方向不變，怎么動都不會影響數(shù)值；而DeviceMotionEvent是相對于之前的某個瞬間值的差值時間比，即變化的速度，一旦設(shè)備靜止則會恢復(fù)為0。

設(shè)備內(nèi)置傳感器包括常用的加速器、陀螺儀和磁力儀，開發(fā)者可以從這些傳感器中獲得原始的傳感數(shù)據(jù)，并監(jiān)測處在運(yùn)動中設(shè)備的方向、速度的變化。移動設(shè)備在三維空間中是靠X，Y和Z軸來定位的，加速器和陀螺儀的數(shù)據(jù)都是描述沿著移動設(shè)備3個方向軸上的位置。對于一個豎屏擺放的手機(jī)來說，X軸橫向貫穿移動設(shè)備屏幕，方向從設(shè)備的左邊（-）到右邊（+）；Y軸縱向貫穿屏幕，方向從設(shè)備的底部（-）到頂部（+）；Z軸垂直于設(shè)備屏幕，方向?yàn)閺脑O(shè)備的背面（-）到正面（+），如圖1所示。當(dāng)設(shè)備靜止放在水平表面上時，這3個值都是0。

當(dāng)移動設(shè)備出現(xiàn)有意義的運(yùn)動（擺動）時，DeviceMotionEvent就會啟動。事件對象會獲取移動設(shè)備運(yùn)動時的方向值、移動距離以及加速度。移動設(shè)備借助加速器和陀螺儀來獲得重力的加速度和設(shè)備移動的加速度，以此獲得設(shè)備實(shí)際的加速度值。移動端交互類似“搖一搖”、計(jì)步等交互就是借助DeviceMotionEvent對設(shè)備運(yùn)動狀態(tài)的判斷來實(shí)現(xiàn)的。

2 利用DeviceMotionEvent實(shí)現(xiàn)手機(jī)重力感應(yīng)

作為移動端設(shè)備的標(biāo)準(zhǔn)配置，H5重力感應(yīng)在平板電腦和智能手機(jī)中應(yīng)用廣泛，尤其體現(xiàn)在人機(jī)交互中，除了大家熟識的手機(jī)交互“搖一搖”，還有屏幕橫屏和豎屏切換，運(yùn)動軟件中的計(jì)步、賽車游戲中的控制左右轉(zhuǎn)彎，都需要重力感應(yīng)模塊支持［3］。本文將以手機(jī)交互“搖一搖”為例，展現(xiàn)移動端重力感應(yīng)的實(shí)現(xiàn)過程。

本文在HTML頁面中模擬手機(jī)“搖一搖”畫面，設(shè)置HTML顯示內(nèi)容和基礎(chǔ)CSS樣式，同時為其中的手機(jī)圖片設(shè)置動畫，使其不斷搖晃，以提醒用戶搖晃手機(jī)，動畫可以借助animaiton實(shí)現(xiàn)，用戶也可以根據(jù)自己想法定義搖晃動畫。

在H5中，移動設(shè)備的加速度可以通過運(yùn)動傳感事件DeviceMotionEvent來獲取，它能監(jiān)聽設(shè)備加速度變化（比如手機(jī)瘋狂搖擺）。事件對象包含的4個只讀屬性，如表1所示。

根據(jù)移動設(shè)備種類的不同，這一時間將返回加速度（acceleration）和含重力的加速度（accelerationIn-cluding Gravity）兩種數(shù)據(jù)。這些數(shù)據(jù)中又包含了3個不同維度的加速度值，分別是橫向X軸、縱向Y軸，以及垂直Z軸。要判斷設(shè)備的搖晃程度是否劇烈，可以通過計(jì)算兩個不同的時間點(diǎn)上3個維度加速度的數(shù)值變化，獲得一個相對可比較的速度指標(biāo)。本文通過JavaScript代碼來獲取手機(jī)的加速度，并將其換算為一個能夠反映出搖晃程度的數(shù)值。當(dāng)該數(shù)值超過一定閾值時，即認(rèn)為用戶已經(jīng)按要求搖動了手機(jī)，此時顯示獲獎信息。

if（window.DeviceMotionEvent）// 如果設(shè)備支持運(yùn)動傳感事件

window.addEventListener（'devicemotion'， deviceMotionHandler）;

//偵聽DeviceMotion事件

else document.getElementById（"status"）.innerHTML="本設(shè)備不支持搖一搖！";

以上代碼通過獲取window的DeviceMotionEvent屬性來判斷瀏覽器是否支持運(yùn)動傳感事件。如果支持，則為窗口創(chuàng)建devicemotion事件偵聽［2］，否則將輸出不支持提示。同時，還需要創(chuàng)建一些必要的變量，包括搖動的閾值、前后兩次搖晃的時間和各維度的加速度值等，代碼如下：

var threshold=5000;//設(shè)置一個搖晃的閾值

var spdx，spdy，spdz，lastx，lasty，lastz=0;

//本次搖晃和上次搖晃時手機(jī)的x，y和z軸上的加速度，初始值為0

var oldTime，nowTime;//本次搖晃和上次搖晃對應(yīng)的時間

oldTime=new Date（）.getTime（）;//獲取當(dāng)前的時間

以上代碼中，設(shè)置閾值為5 000。這是一個經(jīng)驗(yàn)數(shù)值，可以調(diào)整。手機(jī)3個維度上的加速度初始都是0［2］。最后創(chuàng)建DeviceMotionEvent，偵聽所觸發(fā)的deviceMotionHandler函數(shù)，代碼如下：

function deviceMotionHandler（eventData）{

//在偵聽到DeviceMotionEvent時觸發(fā)本函數(shù)

var acceleration=eventData.accelerationIncludingGravity;

var speed;

spdx=acceleration.x;//分別獲取x、y、z軸的加速度值

spdy=acceleration.y;

spdz=acceleration.z;

nowTime=new Date（）.getTime（）;//獲取當(dāng)前事件

if（（nowTime-oldTime）>100）{

speed=Math.abs（spdx+spdy+dpdz-lastx-lasty-lastz）/（nowTime-oldTime）*10000;

document.getElementById（“status”）.innerHTML=”您搖一搖的速度達(dá)到了”+speed;

//在頁面中顯示當(dāng)前速度

oldTime=nowTime;

lastx=spdx;

lasty=spdy;

lastz=spdz;

}

If（speed>threshold）{//當(dāng)速度大于所設(shè)閾值時

window.removeEventLIstener（‘devicemotion’，deviceMotionHandler）;

//移除DeviceMotion事件偵聽

document.getElementById（“status”）.innerHTML=”恭喜您獲得紅包！”;

//提示用戶獲得紅包

}

}

以上代碼中，創(chuàng)建了acceleration變量，以獲取手機(jī)含重力在內(nèi)的加速度值。該變量中的x，y，z屬性分別代表了3個維度上的加速度值。本文設(shè)置的算法是將兩次搖晃中（間隔大于100 ms）的3個維度加速度數(shù)值相減，將其絕對值除以時間間隔，再乘以10 000進(jìn)行放大，最終得到一個能夠反映搖晃程度的相對指標(biāo)［2］。比較該數(shù)據(jù)指標(biāo)和預(yù)先設(shè)定的閾值，如果超過閾值，則停止偵聽并顯示相關(guān)信息。

在測試過程中，若手機(jī)不支持重力感應(yīng)事件，則返回“本設(shè)備不支持搖一搖”字樣；若手機(jī)支持運(yùn)動重力感應(yīng)事件，將不斷刷新顯示當(dāng)前的搖晃速度指標(biāo)，如圖2所示。當(dāng)猛烈搖晃手機(jī)，使其速度指標(biāo)超過所設(shè)置的閾值時，將顯示獲得紅包的字樣，如圖3所示。如此即借助H5中重力感應(yīng)事件DeviceMotionEvent實(shí)現(xiàn)了手機(jī)交互“搖一搖”功能。

3 結(jié)語

H5重力感應(yīng)在移動端交互應(yīng)用中十分普遍，除了文中提到的手機(jī)交互“搖一搖”，還有屏幕橫豎屏切換、運(yùn)動軟件中的計(jì)步以及電話的“禮貌拒接”等功能。如今，以智能手機(jī)為代表的移動端在互聯(lián)網(wǎng)時

代扮演著越來越重要的角色，人們對移動端應(yīng)用的需求也趨向靈活和個性化，所以人機(jī)交互技術(shù)逐漸超越應(yīng)用與服務(wù)及低功耗設(shè)計(jì)，成為現(xiàn)在的研究重點(diǎn)。期待H5技術(shù)有進(jìn)一步的創(chuàng)新和發(fā)展，為人機(jī)交互應(yīng)用提供更多的技術(shù)支持。

參考文獻(xiàn)

［1］李倩，劉潔.移動端設(shè)備手勢交互設(shè)計(jì)研究［J］.戲劇之家，2020（26）：177-178.

［2］劉歡.HTML5基礎(chǔ)知識、核心技術(shù)與前沿案例［M］.北京：人民郵電出版社，2018.

［3］梁爽，宣煒.手勢識別交互在移動端APP中的應(yīng)用研究［J］.包裝與設(shè)計(jì)，2022（3）：170-171.

（編輯 姚 鑫）

Application of HTML5 gravity sensing in mobile terminal interaction

Chen? Guixia

（Yangzhou Branch of Jiangsu Union Technical Institute， Yangzhou 225000， China）

Abstract：? A series of new features of HTML5 have given birth to new interaction modes between users and pages， such as position detection， gravity sensing， etc. These new interaction functions have rapidly become popular among users. The motion gravity sensing module in HTML5 provides a technical basis for the realization of various interactions on the mobile terminal. This paper takes DeviceMotionEvent， the main technology of the HTML5 gravity sensing module， as the entry point， to analyze its technical principle and working process. Taking the common mobile phone interaction “shake and shake” as an example， Dom event is used to obtain the direction value， moving distance， acceleration and other data when the mobile phone moves， process and give feedback， so as to realize the application of HTML5 gravity sensing in mobile phone interaction.

Key words： interactive; gravity induction; DeviceMotionEvent