设备方向事件与设备运动事件以及简单的摇一摇实现
设备方向事件
当设备的物理方向改变（如果用户倾斜或旋转设备）且改变幅度大于等于 0.01 度时，触发 DeviceOrientationEvent 对象。DeviceOrientationEvent 对象提供的数据可指定设备在地球固定坐标系上的对应方向。具体而言，此地球坐标系包含以下三个轴： 东方轴 (X) 为地平面，垂直于北方轴且正对东方。 北方轴 (Y) 为地平面，正对正北方（指向北极）。 上方轴 (Z) 垂直于地平面并与地平面正对。
这些（X、Y 和 Z）轴分别对应于 三个主要的属性：
alpha: 在围绕 z 轴旋转时（即左右旋转时），y 轴的度数差。 beta: 在围绕 x 轴旋转时（即前后旋转时），z 轴的度数差。 gamma: 在围绕 y 轴旋转时（即扭转设备时），z 轴的度数差。
以下代码显示如何使用 deviceorientation 事件指导用户使其设备指向北方。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
</head>
<body>
<div id="directions" style="padding:20px; text-align:center; font-size:14px;"></div>
<script>
window.addEventListener("deviceorientation", findNorth);
function findNorth(evt) {
var directions = document.getElementById("directions");
if (evt.alpha < 5 || evt.alpha > 355) {
directions.innerHTML = "北";
} else if (evt.alpha < 180) {
directions.innerHTML = "左转";
} else {
directions.innerHTML = "右转";
}
}
</script>
</body>
</html>
提示：你可以先修改部分代码再运行。
设备运动事件
当移动或旋转（或者更精确地说是加速）设备时，会触发 DeviceMotionEvent 对象，并在 x、y 和 z 轴中提供 acceleration data（重力加速度对设备造成的 with 和 without 影响，用 m/s2 表示），并会在 alpha、beta 和 gamma 旋转角度中提供 rotational rate of change data（用 deg/s表示）。旋转遵循右手规则，这样，当顺着轴正向观察时，围绕该轴所做的正向旋转为顺时针旋转。 以下示例演示如何使用 ondevicemotion 事件检测和报告高于指定阈值的所有设备运动。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
</head>
<body>
<div id="status" style="padding:20px; text-align:center; font-size:14px;"></div>
<script>
window.addEventListener("devicemotion", detectShake);
function detectShake(evt) {
var status = document.getElementById("status");
var accl = evt.acceleration;
if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {
status.innerHTML = "EARTHQUAKE!!!";
} else {
status.innerHTML = "All systems go!";
}
}
</script>
</body>
</html>
提示：你可以先修改部分代码再运行。
下面我们就可以利用 设备运动事件 来简单实现 摇一摇 的功能了(使用支持该事件的移动设备访问)
<!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>demo</title>
<style>
*{margin:0;font-size:14px;}
</style>
<script src="http://s1.pp.itc.cn/ux_cloud_atlas/js/lib/requirejs/require-jquery-1.7.2.js" ></script>
<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;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
$('#dataX').html(x);
$('#dataY').html(y)
$('#dataZ').html(z)
}
lastX = x;
lastY = y;
}, false);
};
</script>
</head>
<body>
<h1>demo</h1>
<h2>event.accelerationIncludingGravity.x</h2>
<div id="dataX"></div>
<h2>event.accelerationIncludingGravity.y</h2>
<div id="dataY"></div>
<h2>event.accelerationIncludingGravity.z</h2>
<div id="dataZ"></div>
</body>
</html>
提示：你可以先修改部分代码再运行。