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 条评论
登录 后参与评论

相关文章

来自专栏Thinks

HTML5设计原理(上)

今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML...

24810
来自专栏潘兴颂的专栏

WEB 文件传输技术全讲解

近些年以来,技术突飞猛进,唯独文件上传这一块却貌似依然停留在IE6的年代。对于用户来说,最不能忍受的事情,大概就是上传到99%的时候突然卡住不动然后被告知要从头...

75600
来自专栏Thinks

HTML5设计原理(中)

避免不必要的复杂性 下面我就给大家介绍一些这份文档中记载的设计原理。第一个,非常简单:避免不必要的复杂性。好像很简单吧。我用一个例子来说明。 假设我使用HTML...

15810
来自专栏练小习的专栏

W3C对外公布了标准HTML5的草案

周二,W3C机构正式对外公布了互联网网页代码新标准HTML5的草案.预计正式版的标准将会在两年以后形成. HTML可以说是互联网信息组织的一个基石.据悉,这是自...

25290
来自专栏CodingBlock

Android开发必知--WebView加载html5实现炫酷引导页面

  大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动...

533100
来自专栏IMWeb前端团队

html5 article & section

html5 article & section 关于 article & section 关于 article 和 section 的区别也是老生常谈的事了 但...

21860
来自专栏企鹅号快讯

九大网页编程入门网站

许多职业需要几年的时间来学习和训练, 而对于许多刚刚踏入网页开站发的人来说, 最令人高兴的事莫过于可以很轻松的入门。 ? 但你真的找到了适合自己的学习平台吗? ...

42480
来自专栏云加头条

微信小程序的编程模式

在进行「轻芒小程序+」和其他小程序应用开发的过程中,本文作者与其团队对当前正火热的小程序开发有了更为深度的理解与认识,进而有了本文。文章从从编程模式入手,看在小...

2.6K10
来自专栏Thinks

HTML5设计原理(下)

平稳退化 下一条原理大家应该都很熟悉了,那就是平稳退化。毕竟,我们已经遵守这条规则好多年了。渐进增强的另一面就是平稳退化。 有关HTML5遵循这条原理的例子,就...

16410

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励