设备方向和运动

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

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

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

哪边朝上?

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

地球坐标系

地球坐标系由 XYZ 值表示,以重力和标准的磁定向为基准。

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

设备坐标系

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

设备坐标系由 xyz 值表示,以设备的中心为基准。

坐标系
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!';
}

处理设备屏幕方向事件

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

该事件通常返回三个属性:alphabetagamma。在 Mobile Safari 上,会额外返回一个带有罗盘航向的参数 webkitCompassHeading

设备动作

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

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

何时使用设备动作事件

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

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

检查支持情况并监听事件

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

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

处理设备动作事件

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

该事件会返回四个属性:accelerationIncludingGravityacceleration(不包括重力影响)、rotationRateinterval

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

旋转 加速度 (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! 按钮后,系统会提示用户跳跃。在此期间,页面会存储最大(和最小)加速度值,并在跳跃之后告知用户其最大加速度。

反馈