html5重力感應事件

科技 0評論 2017-04-27 18:34:20

收藏 | 點贊

  
一、手機重力感應圖形分析
1、設(shè)備圍繞z軸的旋轉(zhuǎn)角度為α,α角度的取值范圍在[0,360)。
設(shè)備在初始位置,與地球（XYZ）和身體（XYZ）某個位置對齊。
設(shè)備圍繞z軸的旋轉(zhuǎn)角度為α,并與先前的x和y軸位置對比，顯示x，y軸新坐標為x0和y0。
 
2、設(shè)備圍繞x軸的旋轉(zhuǎn)角度為β,β角度的取值范圍在(-180,180)。
設(shè)備圍繞x軸的旋轉(zhuǎn)角度為β,并與先前的y和z軸的位置對比，顯示y，z軸新坐標為y0和z0。
 
3、設(shè)備圍繞y軸的旋轉(zhuǎn)角度為γ,γ角度的取值范圍在(-90,90)。
設(shè)備圍繞y軸的旋轉(zhuǎn)角度為γ,并與先前的x和z軸的位置對比，顯示x，z軸新坐標為x0和z0。
 
 
二、事件介紹
1、deviceorientation 提供設(shè)備的物理方向信息，表示為一系列本地坐標系的旋角。

2、devicemotion 提供設(shè)備的加速信息，表示為定義在設(shè)備上的坐標系中的α坐標。其還提供了設(shè)備在坐標系中的自轉(zhuǎn)速率。若可行的話，事件應該提供設(shè)備重心處的加速信息。

3、compassneedscalibration 用于通知Web站點使用羅盤信息校準上述事件。
 
 
 
三、使用說明
1、 注冊一個deviceorientation事件的接收器：
  window.addEventListener("deviceorientation", function(event) {
      // 處理event.alpha、event.beta及event.gamma
  }, true);
 
2、將設(shè)備放置在水平表面，屏幕頂端指向西方，則其方向信息如下：
  {alpha: 90,
   beta: 0,
   gamma: 0};
為了獲得羅盤指向，可以簡單的使用360度減去alpha。若設(shè)被平行于水平表面，其羅盤指向為(360 - alpha)。
 
3、若用戶手持設(shè)備，屏幕處于一個垂直平面且屏幕頂端指向上方。beta的值為90，alpha和gamma無關(guān)。 用戶手持設(shè)備，面向alpha角度，屏幕處于一個垂直屏幕，屏幕頂端指向右方，則其方向信息如下：
  {alpha: 270 - alpha,
   beta: 0,
   gamma: 90};
 
4、顯示自定義UI界面指導用戶校準羅盤：
 window.addEventListener("compassneedscalibration", function(event) {
      alert('您的羅盤需要校準，請將設(shè)備沿數(shù)字8方向移動。');
      event.preventDefault();
  }, true);
 
5、注冊一個devicemotion時間的接收器：
 window.addEventListener("devicemotion", function(event) {
      // 處理event.acceleration、event.accelerationIncludingGravity、
      // event.rotationRate和event.interval
  }, true);
 
6、將設(shè)備放置在水平表面，屏幕向上，acceleration為零，則其accelerationIncludingGravity信息如下：
  {x: 0,
   y: 0,
   z: 9.81};
 
7、設(shè)備做自由落體，屏幕水平向上，accelerationIncludingGravity為零，則其acceleration信息如下：
  {x: 0,
   y: 0,
   z: -9.81};
 
8、將設(shè)備安置于車輛至上，屏幕處于一個垂直平面，頂端向上，面向車輛后部。車輛行駛速度為v，向右側(cè)進行半徑為r的轉(zhuǎn)彎。設(shè)備記錄acceleration和accelerationIncludingGravity在位置x處的情況，同時設(shè)備還會記錄rotationRate.gamma的負值：
  {acceleration: {x: v^2/r, y: 0, z: 0},
   accelerationIncludingGravity: {x: v^2/r, y: 0, z: 9.81},
   rotationRate: {alpha: 0, beta: 0, gamma: -v/r*180/pi} };
 
 
四、DEMO代碼：
if (window.DeviceMotionEvent) { 
  window.addEventListener('devicemotion',deviceMotionHandler, false); 
} 
var speed = 30;//速度
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) { 
  var acceleration =eventData.accelerationIncludingGravity;
     x = acceleration.x;
     y = acceleration.y;
     z = acceleration.z;
     if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
       //簡單的搖一搖觸發(fā)代碼
       alert('觸發(fā)了重力感應');
     }
     lastX = x;
     lastY = y;
     lastZ = z;
}
DEMO演示
 
此篇文章主要轉(zhuǎn)譯自：http://w3c.github.io/deviceorientation/spec-source-orientation.html

暫無評論