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);

摇一摇改变背景色

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

<!doctype html>
<html>
<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>HTML5 手机摇一摇</title><!-- JQuery CDN --><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>

效果如下：

H5 设备运动事件 DeviceMotionEvent相关推荐

H5鼠标拖动事件（drag）
H5鼠标拖动事件一.元素拖动二.相关事件 1.拖拽元素 (1)dargstart (2)drag (3)dragend 2.目标元素 (1)drop (2)dragover (3)dragente ...
Scratch基础知识总结（运动~事件）
在Scratch中,界面每个部分都有自己的名称,如舞台区.角色区以及指令分类区等.今天我们就详细讲一讲指令分类区中,从运动到运算的各分类作用以及指令. 在Scratch中默认分类有9个,分别是:运动. ...
彻底理解H5的DOM事件
我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和HTML之间是如何进行交互 ...
H5常用拖放事件解析
在用户拖放HTML元素中,可能会触发如下表所示的事件: 事件事件源描述 ondragstart 被拖动的HTML元素开始拖动操作时触发该事件 ondrag 被拖动的HTML元素拖动过程中会不断 ...
javascript判断是否手机设备+滑动事件
//判断是否手机端 var isMobile = false; try { //手机端 document.createEvent("TouchEvent"); isMobile = ...
ios h5 用kepup事件验证获取数据问题
1.用keyup事件手机数据在ios中的问题:ios下多数为用户提供词汇选择,因此用户选择ios提供的词汇时,不会触发keyup事件. 解决方法:在离开页面之前用DOM方法获取用户输入的内容
小程序web-view跳转H5页面，H5页面通过事件返回小程序页面
小程序页面: //url为H5页面路径 H5页面跳转小程序页面 npm install weixin-js-sdk 在使用的vue单页面内引入:import wx from 'weixin-js-sd ...
HTML5 API详解（4）:最实用的API DeviceOrientation设备传感器
DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持. 这个特性包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可 ...
用HTML5实现手机摇一摇的功能并配上声音
一.用HTML5实现手机摇一摇的功能并配上声音 HTML5的一个重要特性:DeviceOrientation,他将底层的方向传感器和运动传感器进行了高级封装,提供DOM事件支持. DeviceOrie ...
H5监听摇一摇和手机倾斜事件（重力感应）
摇一摇功能(DeviceMotion) 摇一摇功能是很多原生APP都可以实现的功能,如微信中的摇一摇找好友,QQ音乐中的摇一摇换歌等.它们都是利用了手机加速传感器提供的API,当监听到手机加速变化的事 ...

H5 设备运动事件 DeviceMotionEvent

DeviceMotionEvent 简介

devicemotion 设备运动

摇一摇改变背景色

H5 设备运动事件 DeviceMotionEvent相关推荐

最新文章

热门文章

H5 设备运动事件 DeviceMotionEvent

DeviceMotionEvent 简 介

devicemotion 设备运动

摇一摇改变背景色

H5 设备运动事件 DeviceMotionEvent相关推荐

最新文章

热门文章

DeviceMotionEvent 简介