随着技术的发展,原型逐渐成为明天成熟的标准。在标准机构中,一个最新的原型正在获得动力,那就是在HTML5Labs.com上实施的W3C DeviceOrientation Event Specification草案。这个规范定义了新的DOM事件,提供了关于设备物理方向和运动的信息。这样的API将使Web开发者能够利用现代设备传感器轻松地提供高级Web用户体验。
设备方向API暴露了两种不同类型的传感器数据:方向和运动。当设备的物理方向发生变化时(例如,用户倾斜或旋转设备),会在窗口上触发deviceorientation事件,并提供旋转的alpha、beta和gamma角度(以度为单位):
window.addEventListener("deviceorientation", findNorth);
function findNorth(evt) {
var directions = document.getElementById("directions");
if (evt.alpha < 5 || evt.alpha > 355) {
directions.innerHTML = "北!";
} else if (evt.alpha < 180) {
directions.innerHTML = "向左转";
} else {
directions.innerHTML = "向右转";
}
}
当设备被移动或旋转(更准确地说,是加速)时,会在窗口上触发devicemotion事件,并提供加速度(包括和不包括设备上的重力加速度影响,以m/s²表示)在x、y和z轴上,以及alpha、beta和gamma旋转角度变化率(以deg/s表示):
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 = "地震!!!";
} else {
status.innerHTML = "一切正常!";
}
}
可以在HTML5Labs下载这个原型。这个原型需要在支持Windows 8的设备上运行的Internet Explorer 10。这个原型作为Internet Explorer桌面上的扩展工作,开发者可以亲身体验这些API。要开始使用原型构建自己的页面,只需要安装原型,然后包括对DeviceOrientation.js脚本文件的引用(在安装原型后复制到桌面):
<script type="text/javascript" src="DeviceOrientation.js"></script>
希望听到开发者对这个W3C设备方向事件规范原型实现的反馈,所以请通过在这篇文章下评论或给发送消息来告诉想法。
通过使用设备方向API,开发者可以探索游戏的新输入机制,为应用程序创建新的手势(例如“摇一摇清除屏幕”或“倾斜以放大”),甚至增强现实体验。这个原型的安装包括一个示例游戏,帮助开始理解API。
设备方向API为开发者提供了一种新的工具,使他们能够利用现代设备的传感器来创造更丰富、更互动的Web体验。随着技术的不断进步,可以期待看到更多创新的应用和游戏,它们将利用这些API来提供前所未有的用户体验。