HTML5 – 重力传感器接口 – 前端崽儿 – 热爱前端,热爱生活

HTML5 – 重力传感器接口

chauvet , 2013/07/10 22:54 , html5 , 评论(0) , 阅读(10594) , Via 本站原创 | |

在移动设备中,重力传感器已经是不可或缺的一个模块,利用这一天然特性,在APP和游戏中可以做很多好玩的事情,这样的案例也是不胜枚举,那么能否在webApp中也用到这一特性呢,答案是肯定的,在IOS4.2以及android 3.0以上版本中都提供了对这一特性的支持,主要用到了html5的两个特性deviceOrientation(FF中是MozOrientation)和deveicemotion。

基本的实现原理可以查看这篇文章,www.html5rocks.com/en/tutorials/device/orientation/,写的很详细,接口的实现主要依靠重力传感器(也就是一个3d陀螺仪),在空间中提供了一个三维的笛卡尔坐标系,使得传感器能够定时检测设备的当前状态然后传递给操作系统进行处理,这里有一张比较直观的图片进行描述:

言归正传,这些与硬件相关的细节我们可以不用深究,来看一下怎样使用这两个接口吧,deviceOrientation接口主要获取的是设备静态的一些特性,比如设备向左边旋转了多少度,向右边旋转了多少度,或者设备从后面向正前方旋转了多少度,以及借助设备的指南针提供设备的一个朝向信息,devicemotion接口主要提供的是偏动态的一些信息,比如在x,y三个维度上移动的加速度信息。

如果要是使用deviceOrientation接口监控设备的状态,可以对window对象的deviceorientation进行监听:

JavaScript代码

        

  1. if (window.DeviceOrientationEvent) {  
  2.     

  3.      window.addEventListener('deviceorientation', function(eventData) {  
  4.     

  5.      // gamma is the left-to-right tilt in degrees, where right is positive  
  6.     

  7.     var tiltLR = eventData.gamma;    
  8.     

  9.     // beta is the front-to-back tilt in degrees, where front is positive  
  10.     

  11.     var tiltFB = eventData.beta;    
  12.     

  13.     // alpha is the compass direction the device is facing in degrees  
  14.     

  15.     var dir = eventData.alpha    
  16.     

  17.     // deviceorientation does not provide this data  
  18.     

  19.     var motUD = null;    
  20.     

  21. }  
  22.     

  23. }  

在eventData对象中,gamma指的是设备在水平方向上从左向右旋转的角度,eventData.beta则表示设备在垂直方向上从后面向正面旋转的角度,eventData.alpha表示设备当前的一个朝向信息。这些信息在实际应用中还没找到合适的场景使用。

如果要使用devicemotion接口监听设备移动的加速度,可以这样操作:

JavaScript代码

        

  1. if (window.DeviceMotionEvent) {  
  2.     

  3.   window.addEventListener('devicemotion', deviceMotionHandler, false);  
  4.     

  5. }    
  6.     

  7. function deviceMotionHandler(eventData){  
  8.     

  9.    // Grab the acceleration including gravity from the results  
  10.     

  11.   var acceleration = eventData.accelerationIncludingGravity;    
  12.     

  13.   // Display the raw acceleration data  
  14.     

  15.   var rawAcceleration = "[" +  Math.round(acceleration.x) + ", " +  
  16.     

  17.     Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";    
  18.     

  19.   // Z is the acceleration in the Z axis, and if the device is facing up or down  
  20.     

  21.   var facingUp = -1;  
  22.     

  23.   if (acceleration.z > 0) {  
  24.     

  25.     facingUp = +1;  
  26.     

  27.   }      
  28.     

  29.   // Convert the value from acceleration to degrees acceleration.x|y is the   
  30.     

  31.   // acceleration according to gravity, we'll assume we're on Earth and divide   
  32.     

  33.   // by 9.81 (earth gravity) to get a percentage value, and then multiply that   
  34.     

  35.   // by 90 to convert to degrees.                                  
  36.     

  37.   var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);  
  38.     

  39.   var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);  
  40.     

  41. …  
  42.     

  43. }  

eventData对象中除了包含accelerationIncludingGravity(包含重力加速度)属性外,还包括acceleration(不包含重力加速度)属性,两个属性都提供了设备当前在x、y、z轴上移动的加速度,利用这个特性我们可以在webApp中模拟摇一摇的效果,参考自www.mhtml5.com/2012/11/5405.html

JavaScript代码

        

  1. var shake = function(){  
  2.     

  3.     var SHAKE_THRESHOLD = 1200;    
  4.     

  5.     var last_update = 0;    
  6.     

  7.     var frequency = 200;  
  8.     

  9.     var x, y, z, last_x, last_y, last_z,callback;            
  10.     

  11.     var _isMotionAble = !!window.DeviceMotionEvent;  //判断是否支持加速度传感器        
  12.     

  13.     var _init = function(fn,freq){  
  14.     

  15.         if(_isMotionAble){  
  16.     

  17.             window.addEventListener("devicemotion",_deviceMotionHandler,false);  
  18.     

  19.             callback = fn;  
  20.     

  21.             x = y = z = last_x = last_y = last_z = 0;  
  22.     

  23.             frequency = freq||frequency;  
  24.     

  25.         }  
  26.     

  27.     };        
  28.     

  29.     var _deviceMotionHandler = function(eventData) {    
  30.     

  31.         var acceleration = eventData.accelerationIncludingGravity;            
  32.     

  33.         var curTime = +new Date;            
  34.     

  35.         if (curTime – last_update > frequency) {            
  36.     

  37.             var diffTime = curTime – last_update;    
  38.     

  39.             last_update = curTime;
  40.     

  41. x = acceleration.x;    
  42.     

  43.             y = acceleration.y;    
  44.     

  45.             z = acceleration.z;            
  46.     

  47.             var speed = Math.abs(x +y + z – last_x – last_y – last_z) / diffTime * 10000;        
  48.     

  49.             if (speed > SHAKE_THRESHOLD) {  
  50.     

  51.                 callback && callback();  
  52.     

  53.             }    
  54.     

  55.             last_x = x;    
  56.     

  57.             last_y = y;    
  58.     

  59.             last_z = z;    
  60.     

  61.         }    
  62.     

  63.     }          
  64.     

  65.     return {  
  66.     

  67.         isShakeAble: _isMotionAble,  
  68.     

  69.         init:  _init  
  70.     

  71.     }  
  72.     

  73. }();  

实现的过程很简单,就不唠叨了,正所谓与人方便,与己方便,感谢互联上上其他同学的分享,也希望在方便自己查阅的时候方便他人。

 

Tags: ,