设备动作和方向事件提供了对内置 移动设备上的加速度计、陀螺仪和罗盘。
这些事件可用于多种用途:游戏行业,例如, 角色的方向或动作。与地理定位配合使用时, 帮助创建更准确的精细导航,或提供有关 特定位置
摘要
- 检测设备哪一侧朝上以及设备如何旋转。
- 了解何时以及如何响应动作和方向事件。
哪边朝上?
如需使用设备屏幕方向和动作事件返回的数据, 请务必了解所提供的值
地球坐标系
地球坐标系(由 X
、Y
和 Z
值表示)已对齐
基于重力和标准磁性方向。
坐标系 | |
---|---|
X |
表示东西方向(东为正值)。 |
Y |
表示南北方向(北为正值)。 |
Z |
表示上下方向,与地面垂直 (其中 up 为正数)。 |
设备坐标系
<ph type="x-smartling-placeholder">![设备坐标系图示](https://web.developers.google.cn/static/articles/device-orientation/image/illustration-device-coor-9952f2421cc29.png?authuser=7&hl=ro)
设备坐标系(由 x
、y
和 z
值表示)已对齐
基于设备的中心移动
坐标系 | |
---|---|
X |
位于屏幕平面,正值表示右侧。 |
Y |
位于屏幕平面,正值表示向上。 |
Z |
与屏幕或键盘垂直,正向扩展 。 |
在手机或平板电脑上,设备方向基于典型的 屏幕的方向。对于手机和平板电脑,该指标取决于所使用的设备 使用竖屏模式对于台式机或笔记本电脑,屏幕方向为 与键盘相关
旋转数据
旋转数据以欧拉角的形式返回, 表示设备坐标之间的差异度数 坐标系。
Alpha 版
<ph type="x-smartling-placeholder">![设备坐标系中 Alpha 的图示](https://web.developers.google.cn/static/articles/device-orientation/image/illustration-alpha-the-9a77d8ab9d7af.png?authuser=7&hl=ro)
围绕 Z 轴的旋转。当顶角为 0° 时,alpha
值为 0°
设备指向正北当设备逆时针旋转时,
alpha
值增加。
Beta 版
<ph type="x-smartling-placeholder">![设备坐标系图示](https://web.developers.google.cn/static/articles/device-orientation/image/illustration-device-coor-b7e152c8a2b6d.png?authuser=7&hl=ro)
围绕 x 轴的旋转。beta
值为 0°,
设备底部与地球表面等距。值
会随着设备的顶部倾向地球表面而增加。
灰度系数
<ph type="x-smartling-placeholder">![设备坐标系图示](https://web.developers.google.cn/static/articles/device-orientation/image/illustration-device-coor-0377d10426e9c.png?authuser=7&hl=ro)
围绕 y 轴的旋转。gamma
值为 0°,
设备的右侧边缘与地球表面等距。值
随着设备的右侧倾向地球表面而增大。
设备方向
设备屏幕方向事件会返回旋转数据,其中包括 设备前后倾斜、左右倾斜,如果是手机或笔记本电脑, 具有罗盘,表示设备面向的方向。
谨慎使用。
测试支持情况。
不要在每个方向事件发生时更新界面;请改为同步到 requestAnimationFrame
。
何时使用设备屏幕方向事件
设备屏幕方向事件有多种用途。示例如下:
- 随着用户移动而更新地图。
- 细微的界面调整,例如添加视差效果。
- 与地理定位结合,可以用于精细导航。
检查支持情况并监听事件
如需监听 DeviceOrientationEvent
,请先检查浏览器是否支持这些事件。然后,将事件监听器附加到 window
对象,以监听 deviceorientation
事件。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
处理设备屏幕方向事件
在设备移动或更改时触发设备屏幕方向事件 屏幕方向。它会返回 相对于 地球坐标系。
该事件通常返回三个属性:alpha
、
beta
和gamma
。在移动 Safari 浏览器上,一个附加参数
webkitCompassHeading
与罗盘方向一起返回。
设备动作
设备屏幕方向事件会返回旋转数据,其中包括 设备前后倾斜、左右倾斜,如果是手机或笔记本电脑, 具有罗盘,表示设备面向的方向。
在需要设备的当前动作时,使用设备动作。
rotationRate
的单位是“°/秒”。
acceleration
和 accelerationWithGravity
的单位为 m/sec2。
请注意不同浏览器实现方式之间的差异。
何时使用设备动作事件
设备动作事件有多种用途。示例如下:
- 摇晃手势以刷新数据。
- 在游戏中,让角色跳跃或移动。
- 用于健康与健身应用。
检查支持情况并监听事件
如需监听 DeviceMotionEvent
,请先检查事件是否
。然后,将事件监听器附加到 window
。
对象监听 devicemotion
事件。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
处理设备动作事件
设备动作事件会定期触发,并返回 旋转角度(以°/秒为单位)和加速度(以米/秒为单位2) 设备的实际情况某些设备没有相应的硬件 来排除重力的影响
该事件会返回四个属性:
accelerationIncludingGravity
、
acceleration
,其中排除了
重力、rotationRate
和 interval
。
例如,我们来看一下放在平坦桌子上的一部手机, 屏幕朝上。
州 | 旋转 | 加速度 (m/s2) | 重力加速度 (m/s2) |
---|---|---|---|
没有移动 | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
向上移动 | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
仅向右移动 | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
向上和向右移动 | [0, 0, 0] | [5、0、5] | [5, 0, 14.81] |
相反地,如果拿着手机,使屏幕与 并且直接对观看者可见:
州 | 旋转 | 加速度 (m/s2) | 重力加速度 (m/s2) |
---|---|---|---|
没有移动 | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
向上移动 | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
仅向右移动 | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
向上和向右移动 | [0, 0, 0] | [5、5、0] | [5, 14.81, 0] |
示例:计算对象的最大加速度
使用设备动作事件的一种方法是计算最大加速度 对象。例如,一个人的最大加速度是多少 跳跃?
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
在点按 Go!按钮时,用户被告知跳跃。在此期间, 网页存储最大(和最小)加速度值,并在 跳跃,告知用户其最大加速度。