HTML怎么做重力感应_HTML重力感应交互效果实现方法【实用】-html教程-PHP中文网

重力感应需javascript监听devicemotion/deviceorientation事件，仅支持真实移动设备；摇一摇用accelerationincludinggravity计算加速度变化率，设阈值1500–2500并防抖；倾斜控制用beta/gamma映射交互，注意https、用户交互及系统权限。

html怎么做重力感应_html重力感应交互效果实现方法【实用】

重力感应在 HTML 中无法直接“做”，必须靠 JavaScript 监听设备原生事件，且仅限真实移动设备（iOS/Android）；桌面浏览器即使开启模拟器，deviceorientation 和 devicemotion 也常返回空值或不触发。

用 `devicemotion` 检测摇一摇动作

这是最常用、兼容性最好的方式，适合「摇一摇换色」「摇一摇抽奖」等场景。核心是算加速度变化率，不是单纯读 x/y/z 值。

必须用 accelerationIncludingGravity，不能只用 acceleration（后者在 iOS 上常为 null）
SHAKE_THRESHOLD 建议设在 1500–2500 区间，太低易误触，太高难触发
时间差要控制在 100ms 左右，否则 speed 计算失真——示例里用 diffTime 归一化很关键
首次触发后建议加防抖：比如 lastShakeTime 记录上一次成功时间，间隔 1500ms 内不再响应

简版逻辑：

let lastX = 0, lastY = 0, lastZ = 0, lastTime = 0;
const THRESHOLD = 2000;
<p>function handleMotion(e) {
const acc = e.accelerationIncludingGravity;
const now = Date.now();
if (now - lastTime > 100) {
const speed = Math.abs(acc.x + acc.y + acc.z - lastX - lastY - lastZ) / (now - lastTime) <em> 10000;
if (speed > THRESHOLD) {
// 执行摇一摇逻辑
document.body.style.backgroundColor = '#' + Math.floor(Math.random()</em>16777215).toString(16);
}
[lastX, lastY, lastZ, lastTime] = [acc.x, acc.y, acc.z, now];
}
}</p><p>if ('DeviceMotionEvent' in window) {
window.addEventListener('devicemotion', handleMotion);
}
</p>

用 `deviceorientation` 实现倾斜控制小球移动

适合「小球随手机倾斜滚动」「菜单随角度滑动」类交互。它提供的是设备朝向（α/β/γ），不是加速度，所以更平滑但响应略慢。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

beta 对应前后倾斜（绕 X 轴），gamma 对应左右倾斜（绕 Y 轴），alpha 是方向角（常受干扰，慎用）
iOS Safari 默认禁用 deviceorientation，需用户手动开启「运动与方向」权限（设置 → Safari → 运动与方向）
Android Chrome 从 v98 起要求页面为 HTTPS 且用户有过交互（如点击）后才允许触发，否则 beta/gamma 恒为 0
数值有正负和量纲差异：iOS beta 范围约 -90~90，Android 可能到 -180~180，建议先做归一化或截断

例如控制 canvas 小球位置：

let ballX = canvas.width / 2, ballY = canvas.height / 2;
<p>function handleOrientation(e) {
// gamma: 左右倾斜 → 控制 X；beta: 前后倾斜 → 控制 Y
ballX += e.gamma <em> 0.5; // 系数调灵敏度
ballY += e.beta </em> 0.5;
ballX = Math.max(20, Math.min(canvas.width - 20, ballX));
ballY = Math.max(20, Math.min(canvas.height - 20, ballY));
}</p><p>if ('DeviceOrientationEvent' in window) {
window.addEventListener('deviceorientation', handleOrientation);
}
</p>

为什么本地开发时总没反应？

不是代码问题，大概率是环境或权限卡点：

必须通过 HTTPS 或 localhost 访问——file:// 协议下所有重力 API 均被现代浏览器禁用
iOS 设备需确认：设置 → 隐私与安全性 → 运动与方向 → 开启「网站可访问」
Chrome Android 要求用户至少有一次点击/触摸行为后，才能激活传感器（可在页面加个「开始体验」按钮，点击后再绑定事件）
某些安卓厂商定制系统（如华为 EMUI）会默认关闭传感器权限，需进「应用管理 → 浏览器 → 权限管理 → 体感传感器」手动打开

Canvas 小球碰撞动画要不要用 Box2D？

除非你真需要物理引擎级的刚体碰撞（旋转、摩擦、多边形支撑），否则别用 Box2D。它体积大（~300KB）、API 陡峭、移动端性能吃紧，且和重力感应是两套逻辑——Box2D 自己模拟重力，而你要的是真实设备重力驱动。

简单碰撞：canvas + 手写球体边界检测（距离公式）+ 速度向量反射，20 行内搞定
中等复杂度：用 matter-js（轻量、现代、文档好），它支持直接传入自定义重力向量，可把 deviceorientation 的 beta/gamma 映射为 world.gravity.x/y
Box2D 的 b2World 初始化依赖全局坐标系，和移动端 viewport 缩放、dpr 不匹配时容易错位，调试成本远高于收益

真正容易被忽略的点：重力感应数据是高频（60Hz+）但不可靠的，devicemotion 在静止时仍有微小漂移，deviceorientation 在快速转动时有延迟。所有逻辑都得加滤波（比如滑动平均）或置信判断，不能 raw data 拿来就用。