实现“摇一摇”功能需监听DeviceMotionEvent，优先使用剔除重力的event.acceleration计算三维合加速度模长，检测其瞬时增量是否超阈值（如20 m/s²），配合800ms防抖锁定，并在用户手势后请求权限以兼容iOS 13+。
要实现“摇一摇”功能，核心是监听 DeviceMotionEvent，捕捉设备加速度的突变，通过判断加速度向量的模长变化是否超过阈值来识别一次有效摇动。
监听 DeviceMotionEvent 并获取加速度数据
移动端需先请求权限（iOS 13+ 和部分 Android 浏览器要求用户手势触发后才能启用传感器），然后监听 devicemotion 事件。注意使用 accelerationIncludingGravity 或更推荐的 acceleration（不含重力，更适合检测动态抖动）：
- 优先用
event.acceleration，它已剔除重力影响，数值更干净；若不可用再降级到accelerationIncludingGravity并做简单滤波 - 监听前建议检查
typeof DeviceMotionEvent !== 'undefined'，并确保在用户交互（如点击按钮）后调用window.addEventListener('devicemotion', ...)，以满足 iOS 的权限策略 - 避免在页面加载时立即监听，否则 iOS Safari 会静默忽略
定义摇动的判定逻辑
“摇一摇”不是单次峰值，而是短时间内加速度模长的显著跃升。关键在于计算三维加速度的合加速度（欧几里得范数），并检测其瞬时增量：
- 维护上一次的合加速度值：
lastAcc = Math.sqrt(ax² + ay² + az²) - 当前帧计算
currAcc，再算差值diff = currAcc - lastAcc - 当
diff > threshold（例如 15–25 m/s²，需实测调整）且持续时间短（如 200ms 内多次触发），视为一次有效摇动 - 加入防抖：触发后锁定一小段时间（如 800ms），防止连续误触发
兼容性与降级处理
并非所有设备或浏览器都支持 DeviceMotionEvent，尤其在微信内置浏览器（旧版本）、部分安卓 WebView 中可能受限：
立即学习“Java免费学习笔记（深入）”；
- 检测
DeviceMotionEvent.requestPermission是否存在，iOS 13+ 需显式调用该方法并等待用户授权（仅限 https + 用户手势上下文） - 对不支持的环境，可提供替代入口（如点击按钮模拟“摇一摇”动作），或直接隐藏该功能
- Android 大部分 Chrome/Edge 支持良好，但需注意某些定制 ROM 可能禁用传感器
代码片段示意（精简可用版）
以下为可直接嵌入业务逻辑的基础结构（含权限适配和基础防抖）：
// 摇动阈值和锁定期
let shakeThreshold = 20;
let shakeTimeout = null;
let lastAcc = 0;
<p>function handleShake() {
console.log('检测到摇一摇');
// 执行你的业务逻辑：如刷新、抽奖、跳转等
}</p><p>function onDeviceMotion(e) {
const acc = e.acceleration || e.accelerationIncludingGravity;
if (!acc) return;</p><p>const currAcc = Math.sqrt(acc.x<strong>2 + acc.y</strong>2 + acc.z**2);
const diff = currAcc - lastAcc;</p><p>if (diff > shakeThreshold && !shakeTimeout) {
handleShake();
shakeTimeout = setTimeout(() => {
shakeTimeout = null;
}, 800);
}
lastAcc = currAcc;
}</p><p>// 用户首次交互后启用（如页面有个「开启摇一摇」按钮）
document.body.addEventListener('click', () => {
if (typeof DeviceMotionEvent.requestPermission === 'function') {
DeviceMotionEvent.requestPermission()
.then(response => {
if (response === 'granted') {
window.addEventListener('devicemotion', onDeviceMotion, { passive: true });
}
})
.catch(console.error);
} else {
// 非 iOS 或老浏览器，直接监听
window.addEventListener('devicemotion', onDeviceMotion, { passive: true });
}
}, { once: true });
