设备方向和运动

Pete LePage

设备动作和方向事件可访问移动设备上的内置加速度计、陀螺仪和罗盘。

这些事件可用于许多用途；例如在游戏中控制角色的方向或动作。当与地理定位配合使用时，它们可以帮助建立更准确的精细导航或提供有关特定位置的信息。

摘要

  • 检测设备哪一侧向上以及设备的旋转方式。
  • 了解响应运动和方向事件的时机和方法。

哪边朝上？

如需使用设备屏幕方向和动作事件返回的数据，请务必理解所提供的值。

地球坐标系

地球坐标系由 X、Y 和 Z 值表示，以重力和标准的磁定向为基准。

坐标系
X 表示东西方向（东为正值）。
Y 表示南北方向（北为正值）。
Z 表示上下方向，与地面垂直（向上为正值）。

设备坐标系

设备坐标系的图示
设备坐标系的图示

设备坐标系由 x、y 和 z 值表示，以设备的中心为基准。

坐标系
X 位于屏幕平面，正值表示右侧。
Y 处于屏幕平面，正值表示向上。
Z 与屏幕或键盘垂直，正值表示远离。

在手机或平板电脑上，设备方向基于屏幕的典型方向。对于手机和平板电脑，以设备处于竖屏模式为基准。对于台式机或笔记本电脑，是相对于键盘来考虑方向。

旋转数据

旋转数据以欧拉角的形式返回，表示设备坐标系与地球坐标系之间的差异度数。

Alpha 版

设备坐标系中 Alpha 的图示
设备坐标系中 Alpha 的图示

绕 z 轴的旋转。当设备的顶部指向正北时，alpha 值为 0°。当设备逆时针旋转时，alpha 值会增加。

Beta 版

设备坐标系图示
设备坐标系中 Beta 版的图示

围绕 x 轴的旋转。当设备的顶部和底部与地球表面等距时，beta 值为 0°。当设备的顶部倾向地球表面时，此值增加。

灰度系数

设备坐标系图示
设备坐标系中 Gamma 的图示

围绕 y 轴的旋转。当设备的左侧边缘和右侧边缘与地球表面等距时，gamma 值为 0°。当设备的右侧倾向地球表面时，此值增加。

设备方向

设备方向事件返回旋转数据，包括设备前后倾斜度、两侧倾斜度，如果手机或笔记本电脑有罗盘，则还包括设备正在朝向的方向。

请谨慎使用。 测试是否支持。 不要在每个屏幕方向事件发生时更新界面；而是同步到 requestAnimationFrame。

何时使用设备方向事件

设备屏幕方向事件有多种用途。示例如下：

  • 随着用户移动而更新地图。
  • 细微的界面调整，例如添加视差效果。
  • 与地理定位结合，可以用于精细导航。

检查支持情况和监听事件

如需监听 DeviceOrientationEvent，请先检查浏览器是否支持这些事件。然后，将一个事件监听器附加到 window 对象，以监听 deviceorientation 事件。

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

处理设备屏幕方向事件

在设备移动或改变屏幕方向时触发设备屏幕方向事件。它会返回有关设备当前位置（相对于地球坐标系）之间的差异的数据。

该事件通常返回三个属性：alpha、beta 和 gamma。在 Mobile Safari 上，会额外返回一个带有罗盘航向的参数 webkitCompassHeading。

设备动作

设备方向事件返回旋转数据，包括设备前后倾斜度、两侧倾斜度，如果手机或笔记本电脑有罗盘，则还包括设备正在朝向的方向。

在需要设备的当前动作时，使用设备动作。rotationRate 的单位是“度/秒”。acceleration 和 accelerationWithGravity 的单位是“米/秒”2。 请注意不同浏览器实现方式之间的差异。

何时使用设备动作事件

设备动作事件有多种用途。示例如下：

  • 摇动手势以刷新数据。
  • 在游戏中让角色跳跃或移动。
  • 用于保健和健身应用。

检查支持情况并监听事件

如需监听 DeviceMotionEvent，请先检查浏览器是否支持这些事件。然后将事件监听器附加到 window 对象，以监听 devicemotion 事件。

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

处理设备动作事件

设备动作事件按定期间隔触发，并及时返回有关设备在该时刻旋转 (°/sec) 和加速度 (m/sec2) 的数据。某些设备没有硬件来排除重力的影响。

该事件会返回四个属性：accelerationIncludingGravity、acceleration（不包括重力影响）、rotationRate 和 interval。

例如，我们来看一台放在平坦桌面上的手机，其屏幕朝上。

州 旋转 加速度 (m/s2) 重力加速度 (m/s2)
未移动 [0, 0, 0] [0, 0, 0] [0, 0, 9.8]
向上移动，朝向天空 [0, 0, 0] [0, 0, 5] [0, 0, 14.81]
仅向右移动 [0, 0, 0] [3, 0, 0] [3, 0, 9.81]
向上右移 [0, 0, 0] [5, 0, 5] [5, 0, 14.81]

相反，如果拿着手机，使屏幕与地面垂直，并且观看者可以直接看到手机：

州 旋转 加速度 (m/s2) 重力加速度 (m/s2)
未移动 [0, 0, 0] [0, 0, 0] [0, 9.81, 0]
向上移动，朝向天空 [0, 0, 0] [0, 5, 0] [0, 14.81, 0]
仅向右移动 [0, 0, 0] [3, 0, 0] [3, 9.81, 0]
向上右移 [0, 0, 0] [5、5、0] [5, 14.81, 0]

示例：计算物体的最大加速度

使用设备动作事件的一种方式是计算物体的最大加速度。例如，人跳跃的最大加速度是多少？

if (evt.acceleration.x > jumpMax.x) {
  jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
  jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
  jumpMax.z = evt.acceleration.z;
}

点按 Go! 按钮后，系统会提示用户跳跃。在此期间，页面会存储最大（和最小）加速度值，并在跳跃之后告知用户其最大加速度。

反馈