HTML5设备定向小实践

简介

HTML5的Device API中提供了几个DOM事件,可以获得设备的物理方向及运动的信息,API提供的数据不是来源于原始的传感器信息,而是来源于设备上的陀螺仪、加速计以及指南针等。

  • deviceorientation事件,提供了设备的物理方向信息,表示为一系列本地坐标系的旋角。
  • devicemotion事件,提供了设备的加速信息,表示为定义在设备上的坐标系中的笛卡尔坐标以及设备在坐标系中的自转速率。
  • 实际上还有另一个事件compassneedscalibration,用于罗盘信息校准,其浏览器支持性较差,就先不讨论了。

首先我们来关注一下deviceorientation和devicemotion这两个事件的兼容性:

只能算是部分支持,所以在使用时,首先需要检测支持能力,很简单:

if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(event) {}, false);
} else {
    alert('本设备不支持deviceorientation事件');
}
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('本设备不支持devicemotion事件');
}

对于不支持的平台,就不要想太炫酷的效果了,老老实实用触摸滑动等基础操作与用户交互,对于各种动态效果或者交互,我认为第一原则是保证可用且性能良好。

deviceorientation事件

// 注册一个deviceorientation事件的接收器:
window.addEventListener("deviceorientation", function(event) {
    // 处理event.alpha、event.beta及event.gamma
}, true);

event.alpha、event.beta及event.gamma表示设备坐标系上的旋角,这个角度具体是怎么理解的呢?先来看看从标准上贴过来的一段话:对于一个移动设备,例如电话或平板,设备坐标系的定义于屏幕的标准方向相关。这意味着类似于键盘的滑动元素没有展开、类似于显示器的选择元素折叠至其默认位置。如果在设备旋转或展开滑动键盘时屏幕方向发生变化,这不会影响关于设备的坐标系的方向。用户希望获得这些屏幕方向的变化可以使用现有的orientationchange事件。

这段话的重点是,因为设备坐标系是一个相对的方向坐标系,所以设备旋转等事件发生后,设备坐标系会根据基准的改变相对应改变。 地球坐标系:

  • 东(X)在地面上,垂直于北轴,向东为正。
  • 北(Y)在地面上,向正北为正(指向北极)。
  • 上(Z)垂直于地面,向上为正。

对于笔记本电脑,设备的坐标系定义于集成键盘:

  • x在屏幕或键盘平面上,屏幕或键盘的右侧为正。
  • y在屏幕或键盘屏幕上,屏幕或键盘的上方为正。
  • z垂直于屏幕或键盘屏幕,离开屏幕或键盘为正。 旋转必须使用右手规则,即正向沿一个轴旋转为从该轴的方向看顺时针旋转。

以两个坐标系重合为初始状态,旋转应用下列规则:

  • 以设备坐标系z轴为轴,旋转alpha度。alpha的作用域为[0, 360)。
  • 以设备坐标系x轴为轴,旋转beta度。beta的作用域为[-180, 180)。
  • 已设备坐标系y轴为轴,旋转gamma度。gamma的作用域为[-90, 90)。

deviceorientation事件提供一个absolute属性参数,值为true时,提供三个角度绝对值, 为false时,提供任意方向的相对值。

devicemotion事件

// 注册一个devicemotion时间的接收器:
window.addEventListener("devicemotion", function(event) {
    // 处理event.acceleration、event.accelerationIncludingGravity、
    // event.rotationRate和event.interval
}, true);

每当设备运动状态出现加速或者减速时,devicemotio事件都会被触发。event事件包含acceleration、accelerationIncludingGravity、rotationRate以及interval四个属性。

  • acceleration指定设备相对于地球在x、y与z轴上的加速状况,可以分别通过其x、y与z属性进行访问,单位必须是m/s2。
  • accelerationIncludingGravity与acceleration属性所取的数值相同,但会加上一个加速度相等方向相反的反重力加速度。
  • rotationRate指定设备在各个轴上每秒运动多少度。我们可以通过其alpha、beta与gamma属性访问rotationRate的各独立取值,单位必须是deg/s。
  • interval指定不同数据获取操作之间的时间间隔,单位必须是毫秒。并且它必须是一个常量,一旦设定不允许改变。

应用之摇一摇

既然我们可以获取设备当前的3D角度,并且可以获得设备在空间中的运动速度,很容易就能想到摇一摇这样有趣的应用。 摇一摇判断即判定设备是否有超过加速度变化临界值的晃动:

if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', shakeEventHandler, false);
} else {
    alert('本设备不支持devicemotion事件');
}

var THRESHOLD = 1000;
var preX = preY = preZ = x = y = z = 0;
var preTime = 0;

function shakeEventHandler(event) {
    var acceleration = event.accelerationIncludingGravity; 
    var curTime = new Date().getTime();
    var diffTime = curTime-preTime;

    if (diffTime > 100) { 
        preTime = curTime;  
        x = acceleration.x;  
        y = acceleration.y;  
        z = acceleration.z;  

        var accelerationDiff = Math.abs(x + y + z - preX - preY - preZ) / diffTime * 10000;  

        if (accelerationDiff > THRESHOLD) {  
            alert("摇一摇有惊喜!");  
        }  
        preX = x;  
        preY = y;  
        preZ = z;  
    }  
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

【插件开发】—— 6 SWT 复杂控件使用以及布局

前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭...

2489
来自专栏田超学前端

【微信小程序】c# 实现获取openid、session_key 服务端

6330
来自专栏james大数据架构

CSS好看的按钮

好看的按钮 <style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDE...

2057
来自专栏码匠的流水账

zuul自定义SimpleHostRoutingFilter

zuul的SimpleHostRoutingFilter主要用来转发不走eureka的proxy,里头是使用httpclient来转发请求的,但是有时候我们需要...

1502
来自专栏Golang语言社区

GO语言 TCP传输实例

package main import ( "net" "fmt" ) var ( maxRead = 1100 msgStop = []byt...

3436
来自专栏c#开发者

xmldocument内嵌入另一个xmldocument,xmlnode的方法

string xmlstr1 = @"<root><head>myHead</head><body></body></root>"; s...

2775
来自专栏菩提树下的杨过

Silverlight:利用异步加载Xap实现自定义loading效果

关键点: 1.利用WebClient的DownloadProgressChanged事件更新下载进度 2.下载完成后,分析Xap包的程序集Assembly信息 ...

18610
来自专栏跟着阿笨一起玩NET

C# WinForm 判断窗体控件是否修改过

860
来自专栏自由而无用的灵魂的碎碎念

小项目分享---混色器

编写代码的同志们一般懂美术的就少了,偶也是,什么色轮、三维加色等等。虽然看过一些书籍(如内田广由纪的《配色基础原理》),不过还是一知半解的。

1023
来自专栏张善友的专栏

弹出式模态窗体选择文本控件

2006年就要到来了,最近比较忙,很少更新blog,今天发一个模态窗体选择文本控件辞旧迎新.新年在发几个asp.net2.0 webPart控件同各位分享: ...

1987

扫码关注云+社区