h5实现摇一摇

监听设备加速度

使用 devicemotion 事件监听设备加速度变化。事件对象中的 accelerationIncludingGravity 属性包含设备的加速度数据（含重力影响）。

window.addEventListener('devicemotion', handleShake);

定义摇动阈值

设置加速度变化的阈值，用于判断用户是否摇动了设备。通常选择 15-20 m/s² 作为触发阈值。

const SHAKE_THRESHOLD = 15;
let lastUpdate = 0;
let x = 0, y = 0, z = 0, lastX = 0, lastY = 0, lastZ = 0;

处理加速度数据

计算三个轴向的加速度差值，若超过阈值则触发摇动事件。使用时间戳限制触发频率避免重复响应。

function handleShake(event) {
  const { x: currentX, y: currentY, z: currentZ } = event.accelerationIncludingGravity;
  const timestamp = Date.now();

  if (timestamp - lastUpdate > 100) {
    const deltaX = Math.abs(lastX - currentX);
    const deltaY = Math.abs(lastY - currentY);
    const deltaZ = Math.abs(lastZ - currentZ);

    if (deltaX > SHAKE_THRESHOLD || deltaY > SHAKE_THRESHOLD || deltaZ > SHAKE_THRESHOLD) {
      triggerShakeEvent();
    }

    lastX = currentX;
    lastY = currentY;
    lastZ = currentZ;
    lastUpdate = timestamp;
  }
}

触发自定义事件

当检测到摇动动作时，通过自定义事件或回调函数执行业务逻辑。

function triggerShakeEvent() {
  console.log('Shake detected!');
  // 执行摇动后的操作，例如显示随机结果
  document.dispatchEvent(new CustomEvent('shake'));
}

移除事件监听

在不需要时移除事件监听以节省资源。

function stopShakeDetection() {
  window.removeEventListener('devicemotion', handleShake);
}

兼容性处理

检查浏览器是否支持 devicemotion 事件，并提供降级方案。

if (!window.DeviceMotionEvent) {
  console.warn('DeviceMotionEvent is not supported');
  // 降级处理，如使用按钮点击模拟
}

权限请求（iOS 13+）

iOS 13+ 需要用户授权才能获取加速度数据，需在用户交互后请求权限。

function requestPermission() {
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    DeviceMotionEvent.requestPermission()
      .then(response => {
        if (response === 'granted') {
          window.addEventListener('devicemotion', handleShake);
        }
      });
  }
}

// 在按钮点击事件中调用
document.getElementById('shakeButton').addEventListener('click', requestPermission);

注意事项

• 安卓设备通常无需特殊权限
• 测试时建议使用真机，部分浏览器模拟器不支持传感器
• 考虑节流处理避免高频触发
• 部分低端设备可能存在传感器精度不足问题