天天看点

h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪、罗盘及加速计)的Dom事件,事件描述如下:

deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角。

devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。

compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件。

51220网站目录

https://www.51220.cn

原理:

开发者从各个内置传感器那里获取未经修改的传感数据,并观测或响应设备各种运动和角度变化。这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。

加速器和陀螺仪的数据都是描述沿着iOS设备三个方向轴上的位置,对于一个竖屏摆放的iPhone来说,X方向从设备的左边(负)到右边(正),Y方向则是由设备的底部(-)到顶部(+),而Z方向为垂直于屏幕由设备的背面(-)到正面(+)。

h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度,加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的,通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。

利用devicemotion实现手机摇一摇

摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息。devicemotion事件对象中有一个accelerationIncludingGravity属性,该属性包括:一个包含x、y 和z 属性的对象,在考虑z轴自然重力加速度的情况下,告诉你在每个方向上的加速度。

1 <script type="text/javascript">  
 2     var currhandle=0;//判断操作是否完成
 3     if(window.DeviceMotionEvent){
 4         var speed = 15;  
 5         var x = y = z = lastX = lastY = lastZ = 0;  
 6         window.addEventListener(\'devicemotion\', function(){  
 7             var acceleration =event.accelerationIncludingGravity;  
 8             x = acceleration.x;  
 9             y = acceleration.y;  
10             z = acceleration.z;
11             if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed+10) {  
12                 if(currhandle==0){
13                     setbegin();//摇一摇事件触发后执行操作
14                     currhandle=1;
15                 }    
16             }  
17             lastX = x;  
18             lastY = y;  
19             lastZ = z;
20         }, false);  
21     }else{
22         console.log("您的设备不支持重力感应事件!")
23     }
24     function setbegin(){//开始操作
25         var color = new Array(\'#ff9\', \'#ff0\', \'#f00\', \'#000\', \'#00f\', \'#0ff\');  
26         document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
27         currhandle=0;
28     }     
29 </script>