探测设备方向和运动

今天,我们在 HTML5Labs.com 上发布了 W3C DeviceOrientation 事件规范草稿的原型实施。此规范定义了提供设备的物理方向和运动相关信息的新 DOM 事件。此类 API 将允许 Web 开发者利用现代设备的传感器轻松地提供高级的 Web 用户体验。

开发者获益

利用设备方向 API,开发者可以探索游戏的新输入机制、应用程序的新笔势(例如“摇晃以清屏”或“倾斜以缩放”)或者甚至放大实际体验。原型的安装包括一个示例游戏,帮助您开始了解 API。

该视频以动态形式说明本博文中介绍的概念。

如何工作

设备方向 API 公开了两种不同类型的传感器数据:方向和运动。

当设备的物理方向变化时(例如用户倾斜或旋转设备),将会在窗口触发 deviceorientation 事件,并提供旋转的 alpha、beta 和 gamma 角度(以度表示):

显示由与 3D X、Y 和 Z 轴相关的 deviceorientation 事件返回的旋转的 alpha、beta 和 gamma 角:alpha = 绕 Z 轴旋转、beta = 绕 X 轴旋转和 gamma = 绕 Y 轴旋转。

<div id="directions"></div>

<script>

window.addEventListener("deviceorientation", findNorth);

function findNorth(evt) {

var directions = document.getElementById("directions");

if (evt.alpha < 5 || evt.alpha > 355) {

directions.innerHTML = "North!";

} else if (evt.alpha < 180) {

directions.innerHTML = "Turn Left";

} else {

directions.innerHTML = "Turn Right";

}

}

</script>

当设备移动或旋转(更精确地说是加速)时,将在窗口触发 devicemotion 事件,并提供在 x、y 和 z 轴方向加速(包括体现以及不体现设备的重力加速度,以米/秒表示2),以及在 alpha、 beta 和 gamma 旋转角度(以度/秒表示):

该图显示 devicemotion 事件在 x、y 和 z 轴方向返回的重力加速度。

<div id="status"></div>

<script>

window.addEventListener("devicemotion", detectShake);

function detectShake(evt) {

var status = document.getElementById("status");

var accl = evt.acceleration;

if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {

status.innerHTML = "EARTHQUAKE!!!";

} else {

status.innerHTML = "All systems go!";

}

}

</script>

试验原型

您可以在 HTML5Labs 下载该原型。此原型需要设备上运行 Internet Explorer 10,并且该设备附带有 Windows 8 所支持的加速度传感器。该原型作为台式机上 Internet Explorer 的扩展,开发者可以在台式机上获取这些 API 的第一印象。要利用该原型开始构建自己的页面,您所需做的就是安装该原型,并包括一个对 DeviceOrientation.js 脚本文件的引用(安装原型后复制到台式机上):

<script type="text/javascript" src="DeviceOrientation.js"></script>

我们期待您的反馈

我们希望可以收到开发者在 W3C 设备方向事件规范的原型实施的反馈,所以您可以在本篇博文后评论或者向我们发送邮件,让我们了解您的想法。

—Microsoft Open Technologies Inc. 项目经理 Abu Obeida Bakhach
—Internet Explorer 项目经理 Jacob Rossi