浏览器 API 之设备姿态

本文翻译自 MDN，原文版本为 Aug 5, 2015, 5:03:11 PM

渐渐地，一些上网设备支持了设备姿态的探测，这为使得用户在旋转手机时设备上的显示也会随之转动。手机就是其中一类这种设备。

现在有两个可以处理设备姿态的 JavaScript 事件。第一个是 DeviceOrientationEvent，当设备感知到了姿态的变化，这个事件就会被触发。通过处理事件中附带的信息，网页可以动态地改变显示的朝向。

第二个事件是 DeviceMotionEvent，当设备的加速度发生变化时，这个事件会被触发。该事件不同于 DeviceOrientationEvent，该事件是在加速度发生改变时而不是方向发生改变时被触发。DeviceMotionEvent 通常被用于保护移动中的存储设备。DeviceOrientationEvent 则更多地存在于手机上。

处理旋转事件

你需要监听 deviceorientation 来获取这些事件。、

window.addEventListener("deviceorientation", handleOrientation, true);

在注册了事件监听器之后，该监听函数会不断的被调用。该事件提供了以下信息：

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

事件处理函数可以像这样：

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha = event.alpha;
  var beta = event.beta;
  var gamma = event.gamma;

  // Do stuff with the new orientation data
}

事件内键值的解释

事件内的每一个键都对应着一个坐标上的旋转程度。更为详细的解释请看 Orientation and motion data explained。

我会抽时间画一张表示图。

• DeviceOrientationEvent.alpha 的值表示了设备绕着 Z 轴旋转的程度，以角度表示，取值范围 0~360。
• DeviceOrientationEvent.beta 的值表示了设备绕着 X 轴旋转的程度，同样以角度表示，取值范围 -180 ～ 180。
• DeviceOrientationEvent.gamma 的值表示了绕着 Y 轴旋转的程度，以角度表示，取值范围 -90~90。

示例

下面的示例可以在支持 deviceorientation 事件的浏览器上运行，当然设备要有相应的传感器。

源代码及在线运行的示例请转至 MDN。

处理运动事件

运动事件和旋转事件类似，它的事件名是 devicemotion

window.addEventListener("devicemotion", handleMotion, true);

DeviceMotionEvent 事件内的键值如下

• DeviceMotionEvent.acceleration
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

运动事件的键值解释

DeviceMotionEvent 事件提供了设备的加速度等信息。这些信息分成三个轴来表示。

acceleration 和 accelerationIncludingGravity 由下面的轴构成：

• x：表示从东到西的轴。
• y：表示从南到北的轴。
• z：表示垂直地面的轴。

rotationRate 由下面的轴构成：

• alpha：表示了设备绕垂直于地面的轴的旋转速度。
• beta：表示了设备绕设备顶部边缘的旋转速度。
• gamma：表示了设备绕设备侧边的旋转速度。

最后，interval 表示了时间间隔，以毫秒为单位。

规范

浏览器兼容性

1. Firefox 3.6 至 5 支持 mozOrientation 而不是标准的 DeviceOrientationEvent

参考资料

• DeviceOrientationEvent
• DeviceMotionEvent
• The legacy MozOrientation event.
• Orientation and motion data explained
• Using deviceorientation in 3D Transforms
• Cyber Orb: 2D maze game with device orientation