成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

移動開發(fā)指南：設備定向API介紹

譯文
作者：核子可樂譯
移動開發(fā) Android
在現(xiàn)代移動設備當中，加速計、陀螺儀以及指南針已經成為普遍存在的標準配置。在之前討論地理定位 API的文章中，我們曾經了解過開發(fā)人員如何利用地理定位API改善用戶的使用體驗。今天我們要著重考量的則是另一種有趣的API，即設備定向API。

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

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

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

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

1. 設備定位API是什么？

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

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

2. 實際使用

該API所顯示的三個事件全部用于提供與設備定位相關的信息：

•    deviceorientation

•    devicemotion

•    compassneedscalibration

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

deviceorientation

首先出場的是deviceorientation事件，當加速計檢測到設備方位發(fā)生改變時，它就會被觸發(fā)。正如我之前所提到，我們可以監(jiān)聽這一事件并通過為window對象附加事件處理程序對任意變更作出回應。當事件處理程序介入時，它會獲得DeviceOrientationEvent type的一條參數(shù)，其中包含以下四種屬性：

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

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

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

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

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

devicemotion

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

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

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

•    rotationRate負責指定設備在各個軸上每秒運動多少度。我們可以通過其alpha、beta與gamma屬性訪問rotationRate的各獨立取值。

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

compassneedscalibration

這個事件會在用戶代理檢測到指南針需要校準時被觸發(fā)。其規(guī)范還規(guī)定，“用戶代理應當只在校準指南針能夠增加deviceorientation事件數(shù)據(jù)準確性的前提下被觸發(fā)。”該事件應當被用于通知用戶指南針需要校準這一情況，同時需要指導用戶如何完成這一調整。

3. 檢測支持能力

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

 

  1. if (window.DeviceOrientationEvent) { 
  2.  
  3.    // We can listen for change in the device's orientation... 
  4.  
  5. } else { 
  6.  
  7.    // Not supported 
  8.  
  9. }

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

 

  1. if (!('oncompassneedscalibration' in window)) { 
  2.    // Event supported 
  3. } else { 
  4.    // Event not supported 
  5. }

4. 瀏覽器支持能力

即使對于設備定向API的支持能力良好，我們仍然需要考慮到其它可能與API產生沖突的重要因素。除了介紹當中提到的事項，absolute屬性在Mobile Safari還會出現(xiàn)undefined問題。

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

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

對于目前對于設備定位API的準確支持能力，我建議大家點擊此處查閱細節(jié)信息。

5. 演示

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

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

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

演示應用的原代碼如下所示，但大家可以點擊此處查看運行效果。

 

  1. <!DOCTYPE html> 
  2. <html> 
  3.    <head> 
  4.       <meta charset="UTF-8"> 
  5.       <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
  6.       <meta name="author" content="Aurelio De Rosa"> 
  7.       <title>Device Orientation API Demo by Aurelio De Rosa</title> 
  8.       <style> 
  9.          * 
  10.          { 
  11.             -webkit-box-sizing: border-box; 
  12.             -moz-box-sizing: border-box; 
  13.             box-sizing: border-box; 
  14.          } 
  15.          body 
  16.          { 
  17.             max-width: 500px; 
  18.             margin: 2em auto; 
  19.             padding: 0 0.5em; 
  20.             font-size: 20px; 
  21.          } 
  22.          h1 
  23.          { 
  24.             text-align: center; 
  25.          } 
  26.          .hidden 
  27.          { 
  28.             display: none; 
  29.          } 
  30.          .cube 
  31.          { 
  32.             width: 150px; 
  33.             height: 150px; 
  34.             position: relative; 
  35.             margin: 30px auto; 
  36.             -webkit-transform-style: preserve-3d; 
  37.             transform-style: preserve-3d; 
  38.          } 
  39.          .face 
  40.          { 
  41.             width: 150px; 
  42.             height: 150px; 
  43.             position: absolute; 
  44.             font-size: 80px; 
  45.             text-align: center; 
  46.             line-height: 150px; 
  47.             background-color: #999999; 
  48.             box-shadow: inset 0 0 20px #333333; 
  49.             opacity: 0.6; 
  50.          } 
  51.          .cube .one 
  52.          { 
  53.             -webkit-transform: translateZ(75px); 
  54.             transform: translateZ(75px); 
  55.          } 
  56.          .cube .two 
  57.          { 
  58.             -webkit-transform: rotateY(90deg) translateZ(75px); 
  59.             transform: rotateY(90deg) translateZ(75px); 
  60.          } 
  61.          .cube .three 
  62.          { 
  63.             -webkit-transform: rotateY(180deg) translateZ(75px); 
  64.             transform: rotateY(180deg) translateZ(75px); 
  65.          } 
  66.          .cube .four 
  67.          { 
  68.             -webkit-transform: rotateY(-90deg) translateZ(75px); 
  69.             transform: rotateY(-90deg) translateZ(75px); 
  70.          } 
  71.          .cube .five 
  72.          { 
  73.             -webkit-transform: rotateX(90deg) translateZ(75px); 
  74.             transform: rotateX(90deg) translateZ(75px); 
  75.          } 
  76.          .cube .six 
  77.          { 
  78.             -webkit-transform: rotateX(-90deg) translateZ(75px) rotate(0deg); 
  79.             transform: rotateX(-90deg) translateZ(75px) rotate(0deg); 
  80.          } 
  81.          .value 
  82.          { 
  83.             font-weight: bold; 
  84.          } 
  85.          .author 
  86.          { 
  87.             display: block; 
  88.             margin-top: 1em; 
  89.          } 
  90.       </style> 
  91.    </head> 
  92.    <body> 
  93.       <h1>Device Orientation API</h1> 
  94.       <span id="do-unsupported" class="hidden">deviceorientation event not supported</span> 
  95.       <span id="dm-unsupported" class="hidden">devicemotion event not supported</span> 
  96.       <span id="cnc-unsupported" class="hidden">compassneedscalibration event not supported</span> 
  97.       <div id="do-results"> 
  98.          <div id="cube" class="cube"> 
  99.             <div class="face one">1</div> 
  100.             <div class="face two">2</div> 
  101.             <div class="face three">3</div> 
  102.             <div class="face four">4</div> 
  103.             <div class="face five">5</div> 
  104.             <div class="face six">6</div> 
  105.          </div> 
  106.          <div id="do-info" class="hidden"> 
  107.             <p> 
  108.                Coordinates: 
  109.                (<span id="beta" class="value">null</span>, 
  110.                <span id="gamma" class="value">null</span>, 
  111.                <span id="alpha" class="value">null</span>) 
  112.                </p> 
  113.                Position absolute? <span id="is-absolute" class="value">unavailable</span> 
  114.             </p> 
  115.          </div> 
  116.          <div id="dm-info" class="hidden"> 
  117.             <p> 
  118.                Acceleration: 
  119.                (<span id="acceleration-x" class="value">null</span>, 
  120.                <span id="acceleration-y" class="value">null</span>, 
  121.                <span id="acceleration-z" class="value">null</span>) 
  122.                m/s<sup>2</sup> 
  123.             </p> 
  124.             <p> 
  125.                Acceleration including gravity: 
  126.                (<span id="acceleration-including-gravity-x" class="value">null</span>, 
  127.                <span id="acceleration-including-gravity-y" class="value">null</span>, 
  128.                <span id="acceleration-including-gravity-z" class="value">null</span>) 
  129.                m/s<sup>2</sup> 
  130.             </p> 
  131.             <p> 
  132.                Rotation rate: 
  133.                (<span id="rotation-rate-beta" class="value">null</span>, 
  134.                <span id="rotation-rate-gamma" class="value">null</span>, 
  135.                <span id="rotation-rate-alpha" class="value">null</span>) 
  136.             </p> 
  137.             <p> 
  138.                Interval: <span id="interval" class="value">0</span> milliseconds 
  139.             </p> 
  140.          </div> 
  141.       </div> 
  142.       <small class="author"> 
  143.          Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a> 
  144.          (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>) 
  145.       </small> 
  146.       <script> 
  147.          if (!window.DeviceOrientationEvent) { 
  148.             document.getElementById('do-unsupported').classList.remove('hidden'); 
  149.          } else { 
  150.             document.getElementById('do-info').classList.remove('hidden'); 
  151.             window.addEventListener('deviceorientation', function(event) { 
  152. document.getElementById('cube').style.webkitTransform = 
  153.                document.getElementById('cube').style.transform = 
  154.                        'rotateX(' + event.beta + 'deg) ' + 
  155.                        'rotateY(' + event.gamma + 'deg) ' + 
  156.                        'rotateZ(' + event.alpha + 'deg)'; 
  157.                document.getElementById('beta').innerHTML = Math.round(event.beta); 
  158.                document.getElementById('gamma').innerHTML = Math.round(event.gamma); 
  159.                document.getElementById('alpha').innerHTML = Math.round(event.alpha); 
  160.                document.getElementById('is-absolute').innerHTML = event.absolute ? "true" : "false"; 
  161.             }); 
  162.          } 
  163.          if (!window.DeviceMotionEvent) { 
  164.             document.getElementById('dm-unsupported').classList.remove('hidden'); 
  165.          } else { 
  166.             document.getElementById('dm-info').classList.remove('hidden'); 
  167.             window.addEventListener('devicemotion', function(event) { 
  168.                document.getElementById('acceleration-x').innerHTML = Math.round(event.acceleration.x); 
  169.                document.getElementById('acceleration-y').innerHTML = Math.round(event.acceleration.y); 
  170.                document.getElementById('acceleration-z').innerHTML = Math.round(event.acceleration.z); 
  171.                document.getElementById('acceleration-including-gravity-x').innerHTML = 
  172. Math.round(event.accelerationIncludingGravity.x); 
  173.                document.getElementById('acceleration-including-gravity-y').innerHTML = 
  174. Math.round(event.accelerationIncludingGravity.y); 
  175.                document.getElementById('acceleration-including-gravity-z').innerHTML = 
  176. Math.round(event.accelerationIncludingGravity.z); 
  177.                document.getElementById('rotation-rate-beta').innerHTML = Math.round(event.rotationRate.beta); 
  178.                document.getElementById('rotation-rate-gamma').innerHTML = Math.round(event.rotationRate.gamma); 
  179.                document.getElementById('rotation-rate-alpha').innerHTML = Math.round(event.rotationRate.alpha); 
  180.                document.getElementById('interval').innerHTML = event.interval; 
  181.             }); 
  182.          } 
  183.          if (!('oncompassneedscalibration' in window)) { 
  184.             document.getElementById('cnc-unsupported').classList.remove('hidden'); 
  185.          } else { 
  186.             window.addEventListener('compassneedscalibration', function(event) { 
  187.                alert('Compass needs calibrating! Wave your device in a figure-eight motion'); 
  188.             }); 
  189.          } 
  190.       </script> 
  191.    </body> 
  192. </html> 

總結

在今天的文章中，我們已經通過了解設備定位API的特性與潛在作用建立了對其的初步認識。在撰寫本文的時候，對于該API的支持還比較有限，不過我可以肯定它的出現(xiàn)為移動應用開發(fā)者、特別是游戲開發(fā)者帶來了無窮的可能性。再次建議大家點擊此處查看該API的實際演示運行效果。

原文：An Introduction to the Device-Orientation API

核子可樂譯

責任編輯：閆佳明 來源： 51CTO
設備定向API移動開發(fā)
相關推薦

2014-09-18 09:27:32

AndroidTransition框

2011-12-29 10:48:49

移動Web

2011-08-02 17:58:09

iPhone開發(fā) 事件

2011-11-29 16:38:58

Knockout

2014-05-16 11:09:38

Handlebars模板引擎

2011-10-21 10:16:25

百度地圖API

2011-07-25 16:21:22

Sencha touc

2013-10-09 09:10:28

移動應用開發(fā)NativeHybrid

2022-08-02 08:01:09

開發(fā)插件Chrome前端技術

2015-03-10 10:59:18

Node.js開發(fā)指南基礎介紹

2011-06-09 18:24:36

QT Wince

2012-03-26 09:27:40

谷歌安卓開發(fā)谷歌安卓

2023-05-15 18:44:07

前端開發(fā)

2011-09-22 14:39:17

API

2021-03-31 09:50:25

鴻蒙HarmonyOS應用開發(fā)

2009-06-24 16:30:21

JSF組件模型

2015-11-12 16:14:52

Python開發(fā)實踐

2015-12-16 10:30:18

前端開發(fā)指南

2010-06-13 09:27:56

Widget開發(fā)

2019-10-31 08:00:00

機器學習人工智能AI
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： h视频在线免费 | 福利久久 | 久久99精品久久久久久国产越南 | 最新免费黄色网址 | 人妖av | av天天操 | 久久男人 | 91在线电影 | 亚洲精品一区av在线播放 | 成人久久18免费网站图片 | 亚洲va中文字幕 | 久久av.com | 国产一区亚洲 | 欧美一区二区在线播放 | 伊人久久大香线 | 国产高清久久久 | 国产久| 久久久久久久亚洲精品 | 91精品国产91久久久久久丝袜 | 日韩精品一区二区三区老鸭窝 | 欧美性极品xxxx做受 | 亚洲九九色| 伊人色综合久久天天五月婷 | 亚洲一区二区久久 | 国产精品99久久久久 | 91视频官网 | 久草新在线 | 成人免费在线视频 | 欧美一区二区 | 成人a免费 | 免费特级黄毛片 | 凹凸日日摸日日碰夜夜 | 国产精品久久久久无码av | 日韩高清中文字幕 | 最新超碰 | 国产精品不卡一区 | 超碰在线免费公开 | 亚洲精品综合一区二区 | 911影院 | 国产精品成人在线播放 | 欧美日韩综合一区 |