关于devicemotion
html5提供了几个新的dom事件来获得设备物理方向及运动的信息，包括：陀螺仪、罗盘及加速计。
第一个dom事件是**deviceorientation**，其提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
第二个dom事件是**devicemotion**，其提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。
第三个dom事件是**compassneedscalibration**，其用于通知web站点使用罗盘信息校准上述事件。
原理
开发者从各个内置传感器那里获取未经修改的传感数据，并观测或响应设备各种运动和角度变化。这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。加速器和陀螺仪的数据都是描述沿着ios设备三个方向轴上的位置，对于一个竖屏摆放的iphone来说，x方向从设备的左边(负)到右边(正)，y方向则是由设备的底部(-)到顶部(+)，而z方向为垂直于屏幕由设备的背面(-)到正面(+)。
devicemotionevent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度.
加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的.
通过devicemotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。
事件监听
if ((window.devicemotionevent) {
window.addeventlistener('devicemotion', devicemotionhandler, false);
} else {
document.getelementbyid(dmevent).innerhtml = not supported on your device.
}
捕捉重力加速度
var acceleration = eventdata.accelerationincludinggravity;
摇一摇demo
var shake_threshold = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;
function devicemotionhandler(eventdata) {
var acceleration =eventdata.accelerationincludinggravity;
var curtime = new date().gettime();
if ((curtime - last_update)> 300) {
var difftime = curtime -last_update;
last_update = curtime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = math.abs(x +y + z - last_x - last_y - last_z) / difftime * 10000;
if (speed > shake_threshold) {
alert(shaked!);
}
last_x = x;
last_y = y;
last_z = z;
}
}
另外一个栗子~
function devicemotionhandler(eventdata) {
// 捕捉重力加速度
var acceleration = eventdata.accelerationincludinggravity;
// 打印加速数据
var rawacceleration = [ + math.round(acceleration.x) + , +math.round(acceleration.y) + , + math.round(acceleration.z) + ];
// z轴,可知设备朝上或者朝下
var facingup = -1;
if (acceleration.z > 0) {
facingup = +1;
}
// 根据重力通过 acceleration.x|y 转换得到加速值,
// 运用重力加速度9.81来计算得到一个百分比然后乘以转换角度90
var tiltlr = math.round(((acceleration.x) / 9.81) * -90);
var tiltfb = math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingup);
// 打印加速度的计算结果
document.getelementbyid(moaccel).innerhtml = rawacceleration;
document.getelementbyid(mocalctiltlr).innerhtml = tiltlr;
document.getelementbyid(mocalctiltfb).innerhtml = tiltfb;
// 将2d和3d的转换应用到图片上
var rotation = rotate( + tiltlr + deg) (1,0,0, + (tiltfb) + deg);
document.getelementbyid(imglogo).style.webkittransform = rotation;
}