H5 设备运动事件 DeviceMotionEvent

谁借莪１个温暖的怀抱￠ 2022-05-09 12:48 141阅读 0赞

**目录**

DeviceMotionEvent 简 介

devicemotion 设备运动

摇一摇改变背景色

--------------------

# DeviceMotionEvent 简 介 #

官方文档地址：[https://w3c.github.io/deviceorientation/][https_w3c.github.io_deviceorientation]

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

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

![70][]

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

加速器和陀螺仪的数据都是描述沿着设备三个方向轴上的位置，对于一个竖屏摆放的设备来说，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);

# 摇一摇改变背景色 #

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

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>HTML5 手机摇一摇</title>
    
        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                crossorigin="anonymous"></script>
    
        <script type="text/javascript">
            /**
             * 颜色数组
             * @type {Array}
             */
            var colorArray = new Array('#fff', '#ff0', '#f0f', '#0ff', '#f00', '#0f0', '#00f', "#000");
            /**window.DeviceMotionEvent：判斷浏览器是否支持此时间*/
            if (window.DeviceMotionEvent) {
                /**
                 * speed：速度，根据摇一摇的动作幅度可以适当增加或减小
                 * cx、cy、cz：分别是当前在 x,y,z 3个方向上的加速度
                 * lastX、lastY、lastZ：分别是上一次在 x,y,z 3个方向上的加速度
                 */
                var speed = 20;
                var cx = cy = cz = lastX = lastY = lastZ = 0;
    
                /**注册devicemotion(设备运动)事件
                 * Window.prototype.addEventListener = function(type,listener,useCapture)
                 * type：事件类型，如 devicemotion、deviceorientation、compassneedscalibration 等
                 * listener：事件触发的回调函数，也可以提取出来单独写
                 * useCapture：是否捕获
                 * */
                window.addEventListener('devicemotion', function (evenData) {
                    /**获取重力加速度
                     * x、y、z 三个属性，分别表示 3 个方向上的重力加速度
                     * */
                    var acceleration = evenData.accelerationIncludingGravity;
                    cx = acceleration.x;
                    cy = acceleration.y;
                    cz = acceleration.z;
    
                    /**只要手机有稍微的抖动，就会进入此回调函数
                     * 当某一个方向上的加速度超过 speed 的值时，改变背景色
                     */
                    if (Math.abs(cx - lastX) > speed || Math.abs(cy - lastY) > speed || Math.abs(cz - lastZ) > speed) {
                        document.body.style.backgroundColor = colorArray[Math.round(Math.random() * 10) % 8];
    
                        /** 将数据打印出来瞧一瞧*/
                        $("#x").append("cx:" + cx + "\r\n");
                        $("#y").append("cy:" + cy + "\r\n");
                        $("#z").append("cz:" + cz + "\r\n");
                    }
                    lastX = cx;
                    lastY = cy;
                    lastZ = cz;
                }, true);
            } else {
                alert('您的浏览器不支持摇一摇功能.');
            }
        </script>
    </head>
    <body>
    手机摇一摇，改变手机屏幕颜色。
    <p>x 方向</p>
    <p id="x"></p>
    
    <p>y 方向</p>
    <p id="y"></p>
    
    <p>z 方向</p>
    <p id="z"></p>
    </body>
    </html>

效果如下：

![70 1][]

[https_w3c.github.io_deviceorientation]: https://w3c.github.io/deviceorientation/
[70]: /images/20220506/ffed59ceac14404d98012f1eb6cd585c.png
[70 1]: /images/20220506/9f3f96d211f342bcb297b1d46381004b.png