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

相关文章

来自专栏腾讯云serverless的专栏

使用 Serverless 进行 AI 预测推理

本文演示如何使用腾讯云的 SCF 无服务器云函数来实现 AI Serving 能力。

2.8K60
来自专栏tkokof 的技术,小趣及杂念

疑难杂症小记

  说来其实也不算什么疑难杂症,原因后面再叙,只是最近遇到个代码问题确实令我犯了好一阵疑难,在此简单一记,算作总结吧~

792
来自专栏哈雷彗星撞地球

RunLoop总结:RunLoop的应用场景(三)滚动视图流畅性优化

今天要讲的RunLoop的应用场景可能太简单了,所以东西比较少。因为跟UITableView、UICollectionView等的滑动优化有关,就顺便总结一下会...

673
来自专栏佳爷的后花媛

零碎之viewport

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

1064
来自专栏数据小魔方

数据透视表入门

今天跟大家分享有关数据透视表入门的技巧! 数据透视表是excel附带功能中为数不多的学习成本低、投资回报率高、门槛低上手快的良心技能! 对于日程的排序、汇总、...

2726
来自专栏北京马哥教育

Web性能优化:图片优化

马哥linux运维 | 最专业的linux培训机构 ---- 我自己的Blog:http://blog.cabbit.me/web-image-optimiz...

3377
来自专栏曾大稳的博客

ffmpeg视频播放器相关

和播放音频一样,采用生产者消费者模型。AvPacket入队,然后AvPacket出队伍解码。

521
来自专栏生信技能树

使用IGV看序列比对情况

本文从以下五个方面介绍了可视化序列比对数据和相关的tracks: 文件格式:推荐的是BAM/SAM,其他格式,并且需要进行sorting&indexing Re...

4908
来自专栏生信技能树

(10)仿写fastqc-生信菜鸟团博客2周年精选文章集

用仿写软件的方法来学习编程 我首先仿写了fastqc软件,学会了很多基础知识: 仿写fastqc软件的一些功能-R代码 仿写fastqc软件的部分功能-perl...

30510
来自专栏机器之心

教程 | 如何使用Docker、TensorFlow目标检测API和OpenCV实现实时目标检测和视频处理

选自TowardsDataScience 作者:Léo Beaucourt 机器之心编译 参与:李诗萌、路雪 本文展示了如何使用 Docker 容器中的 Ten...

3446

扫码关注云+社区