新兴规格:探索器件方向和运动

分享于 

3分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

Web标准总是在改变。 和网格一样,昨天的 Prototype也变得成熟了。 standards标准实体中的最新Prototype之一是在 HTML5Labs.com 上实现 W3C DeviceOrientation事件规范草案。 这个规范定义了新的DOM事件,它们提供有关设备物理方向和运动的信息。 这样的api让网络开发者可以利用现代设备的传感器轻松地提供先进的网络用户体验。

借助设备方向 API,开发者可以探索游戏的新输入机制,应用新的手势,以清除屏幕"或者或或者"倾斜,以清除屏幕倾斜,甚至增强现实体验。 Prototype的安装包括一个示例游戏,让你开始理解 API。

工作方式

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

当设备的物理方向改变时( 比如。 用户倾斜或者旋转时,deviceorientation 事件在窗口触发,并提供旋转( 以度数表示)的alpha。beta和伽马角度:

<divid="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!";
 } elseif (evt.alpha <180) {
 directions.innerHTML = "Turn Left";
 } else {
 directions.innerHTML = "Turn Right";
 }
 }</script>

当移动或者旋转设备时,在窗口中激发事件,并在x,y 和z 轴,以及alpha旋转角度和gamma旋转角度( 以 deg/s 表示) 中提供加速( 无论重力加速度对器件有无影响,均用m/s2表示)

<divid="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>

试用 Prototype

你可以在 HTML5Labs 下载 Prototype。 这里Prototype要求 IE 10在设备上运行,传感器传感器支持 Windows 8. 原型可以作为桌面上 IE的扩展,开发人员可以首先看到这些 api。 你需要安装 Prototype,然后包含对 DeviceOrientation.js 脚本文件(。安装Prototype后复制到桌面)的引用,开始构建你自己的页面:

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

我们需要你的反馈

我们希望从开发人员对W3C设备定向事件规范的原型实现进行听听,因这里请了解 给我们发送消息。


EXP  spec  Motion  Specs  设备方向  
相关文章