DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪、罗盘及加速计)的Dom事件,事件描述如下:
deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。
compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件。
51220网站目录
https://www.51220.cn
原理:
开发者从各个内置传感器那里获取未经修改的传感数据,并观测或响应设备各种运动和角度变化。这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。
加速器和陀螺仪的数据都是描述沿着iOS设备三个方向轴上的位置,对于一个竖屏摆放的iPhone来说,X方向从设备的左边(负)到右边(正),Y方向则是由设备的底部(-)到顶部(+),而Z方向为垂直于屏幕由设备的背面(-)到正面(+)。
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>