设备方向和运动

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°。当设备的顶部倾向地球表面时，此值增加。

伽马星

设备坐标系图示
设备坐标系中的灰度系数图示

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

设备方向

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

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

何时使用设备屏幕方向事件

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

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

检查支持情况并监听事件

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

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

处理设备方向事件

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

该事件通常会返回三个属性：alpha、beta 和 gamma。在移动 Safari 上，系统会额外返回一个包含罗盘航向的参数 webkitCompassHeading。

设备移动

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

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

何时使用设备动作事件

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

  • 摇晃手势即可刷新数据。
  • 在游戏中让角色跳跃或移动。
  • 适用于健康与健身应用。

检查支持情况并监听事件

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

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

处理设备动作事件

设备动作事件会定期触发，并及时返回有关设备在该时刻旋转（以°/秒）和加速度（以米/秒2）为单位的数据。一些设备没有硬件来排除重力影响。

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

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

状态 Rotation 加速度 (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]

相反，如果拿着手机时屏幕与地面垂直，并且观看者能够直接看到它们：

状态 Rotation 加速度 (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!”按钮后，系统会指示用户跳跃。在此期间，页面会存储最大（和最小）加速度值，并在跳跃之后告知用户其最大加速度。

反馈