【譯文】在現(xiàn)代移動(dòng)設(shè)備當(dāng)中，加速計(jì)、陀螺儀以及指南針已經(jīng)成為普遍存在的標(biāo)準(zhǔn)配置。在之前討論地理定位 API的文章中，我們?cè)?jīng)了解過開發(fā)人員如何利用地理定位API改善用戶的使用體驗(yàn)。今天我們要著重考量的則是另一種有趣的API，即設(shè)備定向API。

對(duì)于很多應(yīng)用程序來說，檢測設(shè)備朝向都是實(shí)現(xiàn)自身功能的重要前提，從導(dǎo)航應(yīng)用到體感游戲皆在此列。不知道大家有沒有玩過移動(dòng)設(shè)備上的賽車游戲，我們可以將設(shè)備當(dāng)作方向盤左右傾斜、從而實(shí)現(xiàn)對(duì)車輛的操控。

該API面向的另一類應(yīng)用程序則關(guān)注在用戶設(shè)備朝的向發(fā)生改變時(shí)，及時(shí)調(diào)整用戶界面以充分利用屏幕空間、從而帶來更為出色的使用體驗(yàn)。如果大家是YouTube的忠誠觀眾，那么肯定對(duì)這項(xiàng)功能的優(yōu)勢(shì)非常熟悉。

在今天的文章中，我將向大家介紹設(shè)備定向API，并解釋它能為我們提供怎樣的數(shù)據(jù)類型以及如何在自己開發(fā)的應(yīng)用程序中對(duì)其加以利用。

1. 設(shè)備定位API是什么？

引用W3C中的設(shè)備定位API的規(guī)范描述可知，該API“……定義了多種新型DOM事件，旨在提供與主機(jī)設(shè)備相關(guān)的物理朝向與運(yùn)動(dòng)狀態(tài)信息。”由API提供的數(shù)據(jù)產(chǎn)生自多種來源，其中包括設(shè)備上的陀螺儀、加速計(jì)以及指南針等。不同的設(shè)備所配備的數(shù)據(jù)來源也有所區(qū)別，具體情況取決于其上搭載的傳感器類型。

該API從屬于W3C Working Draft，也就是說相關(guān)規(guī)范并非最終確定、在未來其具體內(nèi)容可能還會(huì)出現(xiàn)一定程度的變動(dòng)。另外值得注意的是，已知該API在多種瀏覽器以及操作系統(tǒng)之上可能出現(xiàn)不一致性。舉例來說，在基于Blink渲染引擎的Chrome與Opera瀏覽器上，該API會(huì)與Windows 8系統(tǒng)產(chǎn)生deviceorientation事件的兼容性沖突。另一個(gè)實(shí)例則是，該API中的 interval屬性在Opera Mobile版本中并非恒定的常數(shù)。

2. 實(shí)際使用

該API所顯示的三個(gè)事件全部用于提供與設(shè)備定位相關(guān)的信息：

?    deviceorientation

?    devicemotion

?    compassneedscalibration

這些事件在window對(duì)象當(dāng)中執(zhí)行，也就是說我們需要為window對(duì)象附加一個(gè)處理程序。下面讓我們對(duì)這三個(gè)事件進(jìn)行逐一分析。

deviceorientation

首先出場的是deviceorientation事件，當(dāng)加速計(jì)檢測到設(shè)備方位發(fā)生改變時(shí)，它就會(huì)被觸發(fā)。正如我之前所提到，我們可以監(jiān)聽這一事件并通過為window對(duì)象附加事件處理程序?qū)θ我庾兏鞒龌貞?yīng)。當(dāng)事件處理程序介入時(shí)，它會(huì)獲得DeviceOrientationEvent type的一條參數(shù)，其中包含以下四種屬性：

?    alpha代表的是環(huán)繞z軸的角度。它的取值范圍在0到360度之間。當(dāng)設(shè)備頂端指向正北方向時(shí)，該屬性的取值為0。

?    beta代表的是環(huán)繞x軸的角度。它的取值范圍在-180到180度之間。當(dāng)設(shè)備與地球表面保持平行時(shí)，該屬性的取值為0。

?    gamma代表的是環(huán)繞y軸的角度。它的取值范圍在-90到90度之間。當(dāng)該設(shè)備與地球表面保持平行時(shí)，該屬性的取值為0。

?    absolute用于指定設(shè)備本身提供的定位數(shù)據(jù)是否與地球坐標(biāo)系相對(duì)應(yīng)。在這種情況下，大家可以將其值取為true，或者采用任意其它坐標(biāo)系作為基準(zhǔn)。

下面這幅圖片來自W3C的官方規(guī)范文件，其中標(biāo)明了前面提到的相對(duì)于設(shè)備設(shè)定的x、y與z軸。

devicemotion

每當(dāng)設(shè)備運(yùn)動(dòng)狀態(tài)出現(xiàn)加速或者減速時(shí)，devicemotio事件都會(huì)被觸發(fā)。大家可以對(duì)該事件進(jìn)行監(jiān)聽，正如我們監(jiān)聽deviceorientation事件一樣。當(dāng)該事件的處理程序介入時(shí)，它會(huì)獲得來自DeviceMotionEvent type的一條參數(shù)，參數(shù)當(dāng)中包含四種屬性：

?    acceleration負(fù)責(zé)指定設(shè)備相對(duì)于地球在x、y與z軸上的加速狀況，大家可以分別通過其x、y與z屬性進(jìn)行訪問。該數(shù)值的單位為m/s2。

?    accelerationIncludingGravity與acceleration屬性所取的數(shù)值相同，但它會(huì)把地球重力因素考慮在內(nèi)。這項(xiàng)屬性的取值應(yīng)當(dāng)被用在設(shè)備硬件不知道如何去除加速數(shù)據(jù)中重力影響效果的情況下。事實(shí)上，在這類實(shí)例當(dāng)中，acceleration屬性往往不該由用戶代理提供。

?    rotationRate負(fù)責(zé)指定設(shè)備在各個(gè)軸上每秒運(yùn)動(dòng)多少度。我們可以通過其alpha、beta與gamma屬性訪問rotationRate的各獨(dú)立取值。

?    interval負(fù)責(zé)指定不同數(shù)據(jù)獲取操作之間的時(shí)間間隔。一旦設(shè)定完畢，該數(shù)值就絕不能再進(jìn)行更新。它以毫秒作為計(jì)算單位。

compassneedscalibration

這個(gè)事件會(huì)在用戶代理檢測到指南針需要校準(zhǔn)時(shí)被觸發(fā)。其規(guī)范還規(guī)定，“用戶代理應(yīng)當(dāng)只在校準(zhǔn)指南針能夠增加deviceorientation事件數(shù)據(jù)準(zhǔn)確性的前提下被觸發(fā)?！痹撌录?yīng)當(dāng)被用于通知用戶指南針需要校準(zhǔn)這一情況，同時(shí)需要指導(dǎo)用戶如何完成這一調(diào)整。

3. 檢測支持能力

檢測瀏覽器或者用戶代理是否支持前面提到的兩個(gè)事件，即deviceorientation與devicemotion，本身非常簡單，只需要添加一條微不足道的狀態(tài)聲明即可。大家可以查看以下代碼片段，我們會(huì)在其中檢測對(duì)deviceorientation事件的支持能力：

 
 
 

  
  
  
if (window.DeviceOrientationEvent) { 
  
  
  
 
  
  
  
   // We can listen for change in the device's orientation... 
  
  
  
 
  
  
  
} else { 
  
  
  
 
  
  
  
   // Not supported 
  
  
  
 
  
  
  
} 

 
 
 

為了測試compassneedscalibration事件，我們要用到以下代碼片段：

 
 
 

  
  
  
if (!('oncompassneedscalibration' in window)) { 
  
  
  
   // Event supported 
  
  
  
} else { 
  
  
  
   // Event not supported 
  
  
  
} 

 
 
 

4. 瀏覽器支持能力

即使對(duì)于設(shè)備定向API的支持能力良好，我們?nèi)匀恍枰紤]到其它可能與API產(chǎn)生沖突的重要因素。除了介紹當(dāng)中提到的事項(xiàng)，absolute屬性在Mobile Safari還會(huì)出現(xiàn)undefined問題。

不過真正的問題在于，每一款能夠支持設(shè)備定向API的瀏覽器都只能實(shí)現(xiàn)部分支持。事實(shí)上，就在我撰寫這份文章的時(shí)候，仍然幾乎沒有幾種瀏覽器能夠支持compassneedscalibration事件。在Chrome或者火狐瀏覽器中執(zhí)行上述代碼片段時(shí)就會(huì)出現(xiàn)這類問題。

有鑒于此，能夠支持設(shè)備定位API的桌面版本瀏覽器包括Chrome 7及以上版本、火狐6及以上版本、Opera 15及以上版本再加上IE 11。這類支持能力在移動(dòng)瀏覽器上表現(xiàn)得更好。除了前面提到過的瀏覽器之外，該API的支持能力還存在于BlackBerry 10、Opera Mobile 12及以上版本、Mobile Safari 4.2及以上版本外加Android上的Chrome 3及以上版本中。

對(duì)于目前對(duì)于設(shè)備定位API的準(zhǔn)確支持能力，我建議大家點(diǎn)擊此處查閱細(xì)節(jié)信息。

5. 演示

現(xiàn)在我們已經(jīng)明確了需要?jiǎng)?chuàng)建怎樣的演示應(yīng)用來利用設(shè)備定位API。這套演示實(shí)例的目的在于建立一個(gè)采用普通HTML與CSS的方塊，并在設(shè)備位置發(fā)生變化時(shí)隨之進(jìn)行轉(zhuǎn)動(dòng)。

我們還需要檢索來自該API的信息，其中顯示我們獲取自設(shè)備定位API的數(shù)據(jù)類型。我們也會(huì)在原始文本中顯示信息，這是因?yàn)殡m然一部分瀏覽器能夠支持設(shè)備定位API、但CCS屬性并不能對(duì)方塊進(jìn)行渲染。舉例來講，Opera Mobile就符合這種情況。

由于已經(jīng)確定了并不是每種瀏覽器都能支持該API，因此我們還需要對(duì)該API中的每一種功能進(jìn)行支持能力測試并將結(jié)果傳達(dá)給用戶。

演示應(yīng)用的原代碼如下所示，但大家可以點(diǎn)擊此處查看運(yùn)行效果。

 
 
 

  
  
  
 
  
  
  
 
  
  
  
    
  
  
  
       
  
  
  
       
  
  
  
       
  
  
  
       
  
  
  
       
  
  
  
    
  
  
  
    
  
  
  
      
Device Orientation API
 
  
  
  
      deviceorientation event not supported 
  
  
  
      devicemotion event not supported 
  
  
  
      compassneedscalibration event not supported 
  
  
  
       
  
  
  
          
  
  
  
            1