H5 设备运动事件 DeviceMotionEvent

目录

DeviceMotionEvent 简 介

devicemotion 设备运动

摇一摇改变背景色

---

DeviceMotionEvent 简 介

官方文档地址：https://w3c.github.io/deviceorientation/

html 5 提供了几个新的 DOM 事件来获得设备物理(主要针对移动端)方向及运动的信息，包括：陀螺仪、罗盘及加速计。

1）deviceorientation (设备方向/定位)：提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
2）devicemotion (设备运动/手势)：提供设备的加速度信息，表示为定义在设备上的坐标系中的笛卡尔坐标，其还提供了设备在坐标系中的自转速率。
3）compassneedscalibration (罗盘校准)：用于通知 Web 站点使用罗盘信息校准上述事件。

开发者从各个内置传感器那里获取未经修改的传感数据，并观测或响应设备各种运动和角度变化，这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。

加速器和陀螺仪的数据都是描述沿着设备三个方向轴上的位置，对于一个竖屏摆放的设备来说，X 方向从设备的左边(负)到右边(正)，Y 方向则是由设备的底部(-)到顶部(+)，而 Z 方向为垂直于屏幕由设备的背面(-)到正面(+)。

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生，事件对象封装有产生的间距值，旋转率，和设备加速度。

加速度的计算方式是重力和用户产生的两个加速度矢量之和，设备是通过 陀螺仪和加速计来区别这两者的，通过DeviceMotion 对设备运动状态的判断，则可以在网页上就实现“摇一摇”的交互效果。

devicemotion 设备运动

devicemotion：监听手机加速度变化的事件（比如 手机疯狂摇摆）

有 4 个只读属性：

（1）accelerationIncludingGravity：重力加速度（包括重心引力9.8）

（2）acceleration：加速度（需要设备陀螺仪支持）

（3）rotationRate（alpha，beat，gamma）；旋转速度

（4）interval：获取的时间间隔

注册一个devicemotion时间的接收器：

 window.addEventListener("devicemotion", function(event) {
      // 处理event.acceleration、event.accelerationIncludingGravity、
      // event.rotationRate和event.interval
  }, true);

摇一摇改变背景色

下面直接以一个例子进行说明，手机摇一摇来改变页面背景颜色。

    
    
    

    
    

    


手机摇一摇，改变手机屏幕颜色。
x 方向


y 方向


z 方向

效果如下：