新兴规范：探索设备方向和运动

30 天开发一个 Windows 8 应用

Web 标准在不断变化。就像 WebSockets 一样，昨天的原型会成为明天的成熟标准。目前在标准机构中获得动力的最新原型之一是 W3C 设备方向事件规范草案 在 HTML5Labs.com 上的实现。该规范定义了新的 DOM 事件，提供关于设备物理方向和运动的信息。这些 API 将使 Web 开发者能够利用现代设备的传感器轻松交付高级 Web 用户体验。

借助设备方向 API，开发者可以探索游戏的新输入机制、应用程序的新手势（例如“摇晃以清除屏幕”或“倾斜以缩放”）甚至增强现实体验。该原型的安装包含一个示例游戏，帮助你开始理解该 API。

工作原理 

设备方向 API 暴露两种不同类型的传感器数据：方向和运动。

当设备的物理方向发生变化时（例如，用户倾斜或旋转它），将在窗口上触发 deviceorientation 事件，并提供旋转的 alpha、beta 和 gamma 角度（以度为单位）。

 

<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 轴上的加速度（包括和不包括设备上的重力加速度的影响，以 m/s² 为单位），以及 alpha、beta 和 gamma 旋转角度的变化率（以 deg/s 为单位）： 

<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 下载该原型。该原型需要运行在支持 Windows 8 的具有加速度传感器设备的 Internet Explorer 10。该原型作为 Internet Explorer 的扩展程序在桌面上运行，开发者可以亲身体验这些 API。要开始使用原型构建自己的页面，你只需要安装原型，然后包含对 DeviceOrientation.js 脚本文件的引用（安装原型后复制到桌面上）。

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

我们希望你的反馈

我们希望听到开发者对 W3C 设备方向事件规范的此原型实现的反馈，请通过在此帖子中评论或 向我们发送消息 告诉我们你的想法。