iOS Safari/WebKit对DeviceMotionEvent的实现

最新推荐文章于 2024-12-05 08:41:31 发布

lgh1117

最新推荐文章于 2024-12-05 08:41:31 发布

阅读量1k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

18 篇文章

订阅专栏

本文深入解析了iOS Safari/WebKit中用于获取设备方向和移动速度的两个事件：DeviceOrientationEvent和DeviceMotionEvent。通过实际代码示例，展示了如何在网页中实时获取并显示设备的加速度、加速度（考虑重力）、旋转速度以及通知间隔等数据，以及这两个事件的主要区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请先阅读《iOS Safari/WebKit对DeviceOrientationEvent的实现》，本文是姐妹篇。

简单地描述一下区别，后面会更详细对比：

DeviceOrientationEvent是获取方向，得到device静止时的绝对值；
DeviceMotionEvent是获取移动速度，得到device移动时相对之前某个时间的差值比。

背景知识：

Apple官方依然只发现一个文档：

https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

还是没例子的，自己写：https://code.youkuaiyun.com/hursing/pagetest/blob/master/devicemotionevent.html

[html] view plain copy

<html>
<head>
<title>DeviceMotionEvent</title>
<meta charset="UTF-8" />
</head>
<body>
x轴加速度：0米每二次方秒
y轴加速度：0米每二次方秒
z轴加速度：0米每二次方秒
<hr />
x轴加速度(考虑重力加速度)：0米每二次方秒
y轴加速度(考虑重力加速度)：0米每二次方秒
z轴加速度(考虑重力加速度)：0米每二次方秒
<hr />
左右旋转速度：0度每秒
前后旋转速度：0度每秒
扭转速度：0度每秒
<hr />
上次收到通知的间隔：0毫秒
<script type="text/javascript">
function motionHandler(event) {
document.getElementById("interval").innerHTML = event.interval;
var acc = event.acceleration;
document.getElementById("x").innerHTML = acc.x;
document.getElementById("y").innerHTML = acc.y;
document.getElementById("z").innerHTML = acc.z;
var accGravity = event.accelerationIncludingGravity;
document.getElementById("xg").innerHTML = accGravity.x;
document.getElementById("yg").innerHTML = accGravity.y;
document.getElementById("zg").innerHTML = accGravity.z;
var rotationRate = event.rotationRate;
document.getElementById("alpha").innerHTML = rotationRate.alpha;
document.getElementById("beta").innerHTML = rotationRate.beta;
document.getElementById("gamma").innerHTML = rotationRate.gamma;
}
if (window.DeviceMotionEvent) {
window.addEventListener("devicemotion", motionHandler, false);
} else {
document.body.innerHTML = "What user agent u r using???";
}
</script>
</body>
</html>

用MobileSafari或UIWebView打开以上网页，可以看到10个数值的实时变化。

（其中左图是把ipad平放在水平桌子上时的数值，右图是快速转动ipad时的数值。从右图可看到，因为表示的是速度，单位是度每秒，所以绝对值可以大于360。）

（点击图片看大图）

这十个属性分别是：

event.acceleration.x(y,z)：x(y,z)轴方向上，设备移动的加速度。请看《iOS Safari/WebKit对DeviceOrientationEvent的实现》中的图示。

event.accelerationIncludingGravity.x(y,z)：考虑重力加速度后x(y,z)轴方向上的加速度。因为重力加速度只影响z轴，所以与acceleration的数值相比，x轴和y轴是一样的，z轴相差9.8左右。（绝对数值不相等是因为浮点数精度问题）

旋转速度rotationRate：alpha、beta、gamma的概念与DeviceOrientationEvent一致。区别在于：DeviceOrientationEvent的值是相对于初始状态的差值，只要设备方向不变，怎么动都不会影响数值；DeviceMotionEvent是相对于之前的某个瞬间值的差值时间比，即变化的速度，一旦设备静止则会恢复为0。

event.interval是距离上次收到回调通知的时间间隔。