让我们来看一些有趣的例子来捕捉手机动作：

1. OnePiece 骰子

   

2. 摇一摇

3. 指南针

目前，一般智能手机将内置陀螺仪和加速度传感器，以获取用户手机的动作数据。

在手机上，要测量或绘制手机运动的完整性 3D 动作必须依靠陀螺仪，因为陀螺仪可以测量手机旋转和偏转时的旋转加速度，从而准确分析用户的实际动作，然后让手机根据动作做出相应的反应。

Javascript 负责处理设备方向信息的事件有两种。

1. DeviceOrientationEvent

   当手机在方向上发生变化时触发。有可能通过处理事件传来的数据信息来响应用户移动设备的旋转和仰角变化。

2. DeviceMotionEvent

   当手机各方向的加速度发生变化时触发。DeviceOrientationEvent 监控方向的变化，DeviceMotionEvent 监控是相应方向加速度的变化。

在了解如何获取手机方向之前，让我们来看看手机坐标系

只需监控手机方向变化的信息 deviceorientation 事件即可

window.addEventListener(   "deviceorientation",   (DeviceOrientationEvent) => { 
        },   true ); 

最新的手机方向事件对象将定期接收回调函数：DeviceOrientationEvent，该对象包含以下四个值：

• alpha

  表示手机在 z 轴上的旋转角度范围为 0°~360°。alpha 为 0° 当手机向左旋转时，手机的顶部指向北极，alpha 将增大。

• beta

  表示手机在 x 轴上的旋转角度范围为 -180°~180°。 beta 为 0° 当设备向前旋转时，手机顶部和底部与地面高度相同，beta 递增到 180°，向后翻转递减 -180°。

• gamma

  表示手机在 y 轴上的旋转角度为-90°~90°。gamma 为 0° 当设备向右旋转时，表示手机的左右两侧与地高度相同，gamma 递增到 90° ，向左翻转时，递减到 -90°。

• absolute

  布尔值表示手机能否探测到地球坐标系

主要用于横竖屏 beta 和 gamma 值来判定：

• 可设定：当 gamma 值在 45°~90° 或 -45°~-90° 之间并且 beta 值 -30°~30° 之间时切换横屏(同时满足切换)
• 可设定：当 gamma 值在 45°~90° 或 -45°~-90° 之外（及 -45°~45°）并且 beta 值 -30°~30° 之外（即：30°~180 ° 或 -180°~-30°）时切换垂直屏幕(同时满足切换)
• 否则保持现状

至于为什么这样判断，可以自己探索一下。

核心代码如下。单击查看详细的源代码

function handleOrientation(event) { 
           const beta = event.beta;   const gamma = event.gamma;

  const betaBetween = beta >= -30 && beta <= 30;
  const gammaBetween = gamma >= -45 && gamma <= 45;
  if (!gammaBetween && betaBetween) { 
        
    now.innerHTML = "横屏";
    Horizontal();
  } else if (gammaBetween && !betaBetween) { 
        
    now.innerHTML = "竖屏";
    Vertical();
  }
}

window.addEventListener("deviceorientation", handleOrientation);

要接收手机在各方向上位置和方向的变化速度，只需要监听 devicemotion 事件即可

window.addEventListener("devicemotion", (DevicemotionEvent) => { 
        });

回调函数会定期地接收到手机最新的方向事件对象：DeviceOrientationEvent，这个对象上包含了以下四个值：

• acceleration

  一个包含手机在 X Y Z 三个轴上加速度的对象， 值的单位为 m/s²：{x: value, y: value, z: value}

• accelerationIncludingGravity

  一个包含手机在 X Y Z 三个轴上受到引力影响的加速度的对象，值的单位为 m/s²：{x: value, y: value, z: value}

• rotationRate

  一个包含手机在 alpha、beta 和 gamma 三个方向上加速度的对象，值的单位为度每秒：{alpha: value, beta: value, gamma: value}

• interval

  表示从设备获取数据的时间间隔的数字，值的单位为毫秒。

核心代码如下，点击可查看详细源码

ios 系统需要向用户申请权限，在源码中有展示

function gotoShake() { 
        
  const threshold = 10;
  let xBefore = 0; // 记录上一次 x 轴方向的加速度
  let yBefore = 0; // 记录上一次 y 轴方向的加速度
  let zBefore = 0; // 记录上一次 z 轴方向的加速度

  function handleShake(devicemotionEvent) { 
        
    const { 
         x, y, z } = devicemotionEvent.acceleration; // 当前 x y z 轴的加速度
    const inX = Math.abs(x - xBefore); // 本次加速度与上一次加速度差值
    const inY = Math.abs(y - yBefore);
    const inZ = Math.abs(z - zBefore);
    xBefore = x;
    yBefore = y;
    zBefore = z;
    const isShaking = inX > threshold || inY > threshold || inZ > threshold; // 只要有一个差值超过阈值，则说明正在摇一摇
    if (isShaking) { 
        
      handleShaking(); // 调用摇动处理函数
      startVibrate(); // 调起手机震动
    } else { 
        
      handleStop();
    }
  }

  window.addEventListener("devicemotion", throttle(handleShake, 200), true);
}

1. 本文示例源代码

   • H5-gyroscope

2. 参考文献

   • Detecting device orientation

   • Orientation and motion data explained

   • Window: deviceorientation event

   • How do I get DeviceOrientationEvent and DeviceMotionEvent to work on Safari

偶来尝试，没想还挺有意思的。 一直以来都觉得硬件是真的很有魅力，要想捕获手机的动作，底层硬件不支持的话，都是白搭。 但如果硬件支持了，软件不加以利用，不也是白搭嘛！ 所以呀，硬件是骨骼，软件是血液，加以利用，必有奇效，说来微信不就是典型的例子嘛！