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>
- 效果如下: