VillainHR

orientation 陀螺仪 API

全景 陀螺仪 HTML5.0 2017-12-20

在 Web 的 orientation 对象中,有两种坐标,一个是相对于 earth,一个是相对于手机本身的坐标。

地球坐标

以手机本身为坐标点,有如图所示:

image.png-24.9kB

其分为 3 个坐标,x、y、z

  • x:表示东西朝向,X 正向指向东
  • y:表示南北朝向,Y 正向指向北
  • z:垂直于地心,Z 正向指向上

其一般是固定值。

手机坐标

手机参考点是手机平面,同样也有 3 个坐标系 X/Y/Z。

  • X:平行于屏幕向右
  • Y:平行于屏幕向上
  • Z:正向为垂直于手机屏幕向上。

旋转数据

旋转数据是根据手机坐标的变动,相对于固定地球坐标的变化来决定的。这里,旋转角分为 3 个,alpha、beta、gamma。

  • alpha:当 手机坐标 X/Y 和 地球 X/Y 重合时,绕着 Z 轴转动的夹角为 alpha,范围值为 [0,360)。逆时针转动为正

image.png-63.1kB

  • beta:当手机坐标 Y/Z 和地球 Y/Z 重合时,绕着 Z 轴转动的夹角为 beta。范围值为 [-180,180) 。顶部朝着地球表面转动为正。也有可能朝着用户为正

image.png-58.8kB

  • gamma:当手机 X/Z 和地球 X/Z 重合时,绕着 Y 轴转动的夹角为 gamma。范围值为 [-90,90)。右边朝着地球表面转动为正。

image.png-36.6kB

针对方向事件做动画时,不要依靠 event,而是根据 requestAnimationFrame API。

方向事件

在 H5 中,提供了 deviceorientation 事件,来直接给 Web 开发者手机关于方向的相关参数。不过,有的设备时不支持的,所以,我们可以通过 window.DeviceOrientationEvent 来进行判断:

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

其回调函数提供了如下的数据:

interface DeviceOrientationEvent : Event {
      readonly attribute double? alpha;
      readonly attribute double? beta;
      readonly attribute double? gamma;
      readonly attribute boolean absolute;
    };

其中,alpha,beta,gamma 都是前面提到左边参考计算值。其中 absolute 属性需要额外注意一下。

  • absolute[boolean]: 代表着上述角的计算值是否是参考地球坐标。true 为参考真实地球坐标,false 为参考的随机坐标值。

原文链接: https://www.villianhr.com/2017/12/20/orientation 陀螺仪 API