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

相关文章

来自专栏MixLab科技+设计实验室

谈设计与技术,以WEB布局为例

本文基于“跨界”思维,以 WEB 布局为例,从3个方面,谈谈设计与技术的关系: 1 自适应布局与响应式布局 2 CSS 的布局特性演进 3 设计语言与 W...

2837
来自专栏星回的实验室

CSS居中方法集锦

这阵一直忙各路笔试面试,心越来越浮躁,也好久没有写些东西。不过也正是这些虐我千百遍的笔试面试题让我愈发地觉得确有必要整理一下知识点,让网上书上看的杂乱无章的东西...

761
来自专栏前端黑板报

小程序-实现竖排文字

最近我在做一个诗词类的小程序:《诗词屋》,已经上线。因为古文有从上到下,从右到左阅读和书写的习惯,所以我设计了一个摘录页面,如下: ? 整体布局...

7308
来自专栏Thinks

谈响应式web设计代码实现

在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用i...

291
来自专栏腾讯NEXT学位

简单粗暴的移动端适配方案 - REM

37910
来自专栏Android知识点总结

D5-Android绘图之让图形动起来

752
来自专栏天天P图攻城狮

例说 Constraint Layout(三)—— 性能测评

在各种页面设计下,提升有多有少,但 CL 的性能确实是最佳的!

2003
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

963
来自专栏Android机器圈

Android之MaterialDesign应用技术

  PS:纵观现在大大小小软件的界面都变的比较漂亮,还有一些系统了,比如小米的MIUI,华为的EMUI等,虽然底层都是安卓,但他们的界面多多少少都会不同,谷歌对...

3519
来自专栏Objective-C

Swift-低仿搜狐新闻标签页效果

2994

扫码关注云+社区