你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

设备方向事件与设备运动事件以及简单的摇一摇实现

行为 练习 2740浏览 2评论

设备方向事件

当设备的物理方向改变(如果用户倾斜或旋转设备)且改变幅度大于等于 0.01 度时,触发 DeviceOrientationEvent 对象。DeviceOrientationEvent 对象提供的数据可指定设备在地球固定坐标系上的对应方向。具体而言,此地球坐标系包含以下三个轴:
东方轴 (X) 为地平面,垂直于北方轴且正对东方。
北方轴 (Y) 为地平面,正对正北方(指向北极)。
上方轴 (Z) 垂直于地平面并与地平面正对。

这些(X、Y 和 Z)轴分别对应于 三个主要的属性:

alpha: 在围绕 z 轴旋转时(即左右旋转时),y 轴的度数差。
beta: 在围绕 x 轴旋转时(即前后旋转时),z 轴的度数差。
gamma: 在围绕 y 轴旋转时(即扭转设备时),z 轴的度数差。

以下代码显示如何使用 deviceorientation 事件指导用户使其设备指向北方。

提示:你可以先修改部分代码再运行。

设备运动事件

当移动或旋转(或者更精确地说是加速)设备时,会触发 DeviceMotionEvent 对象,并在 x、y 和 z 轴中提供 acceleration data(重力加速度对设备造成的 with 和 without 影响,用 m/s2 表示),并会在 alpha、beta 和 gamma 旋转角度中提供 rotational rate of change data(用 deg/s表示)。旋转遵循右手规则,这样,当顺着轴正向观察时,围绕该轴所做的正向旋转为顺时针旋转。
以下示例演示如何使用 ondevicemotion 事件检测和报告高于指定阈值的所有设备运动。

提示:你可以先修改部分代码再运行。

下面我们就可以利用 设备运动事件 来简单实现 摇一摇 的功能了(使用支持该事件的移动设备访问)

提示:你可以先修改部分代码再运行。

转载请注明:练小习的前端技术笔记 » 设备方向事件与设备运动事件以及简单的摇一摇实现

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 马克
    厉害4年前 (2015-03-07)回复
  2. 习总威武!!!! 😉
    315264年前 (2015-02-12)回复