关于手机重力陀螺仪事件响应

Home » web开发 » 关于手机重力陀螺仪事件响应

Archives

文件夹

DeviceOrientationEvent

DeviceMotionEvent

先通过上面两个链接,了解一下两个事件。
DeviceOrientationEvent 获取设备方向;
DeviceMotionEvent 获取设备移动速度。

 

苹果的文档里面简单描述了几个参数、返回值和相关的方法,但是没有写例子。

下面是一个摇一摇变颜色的例子,可以了解一下用法。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
<title>摇一摇变颜色</title>
<script type="text/javascript">
var color = new Array('#fff', '#fA0', '#f00', '#C00', '#03f', '#0ff');
if(window.DeviceMotionEvent) {
var speed = 20;
var x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion', function(){
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
}
lastX = x;
lastY = y;
}, false);
}
</script>
</head>
<body>
<h1>摇一摇变颜色</h1>
</body>
</html>

devicemotion事件包含的方法有:

type

devicemotion的事件类型。

bubbles

指定该事件的冒泡事件。

cancelable

关闭该事件。

acceleration

设备移动的加速度,分为x、y、z三轴。

accelerationIncludingGravity

设备移动的重力加速度,分为x、y、z三轴。

rotationRate

设备旋转速度,包括alpha、beta、gamma三个参数。

interval

距离上次收到回调通知的时间间隔。

 

deviceorientation事件包含的方法有:

type

deviceorientation的事件类型。

bubbles

指定该事件的冒泡事件。

cancelable

关闭该事件。

alpha

在围绕 z 轴旋转时(即左右旋转时),y 轴的度数差。

beta

在围绕 x 轴旋转时(即前后旋转时),z 轴的度数差。

gamma

在围绕 y 轴旋转时(即扭转设备时),z 轴的度数差。

compassHeading

与正北方向的角度差值。正北为0度,正东为90度,正南为180度,正西为270度。因为0度是正北,所以叫指北针,不是指南针。

compassAccuracy

指北针的精确度,表示偏差为正负多少度。一般是10。

如果要了解的更详细,还有两个参考文章。

参考文章:
http://blog.csdn.net/hursing/article/details/9061991
http://blog.csdn.net/hursing/article/details/9046837

发表评论