deviceOrientation简介

1. 写在前面

是否记得盗梦空间,是否记得那个一直在转的陀螺仪?这里,我们将要说的是deviceOrientation,手机中的陀螺仪,是否还记得去年,天猫“穿越宇宙的邀请函”,其中就用到了陀螺仪的概念,在这里,我们就先来看看,这个炫炫的东西,到底是个什么吧。

2. deviceOrientation兼容性

作为前端的我们,如果在想要使用一个属性之前,都会先问一句,兼容性怎么样?适合哪些浏览器使用,不兼容的会怎么样?

那就来看看兼容性吧:

或者可以去这里,看一下最新的兼容性:deviceOrientation

从上图可以看出来,deviceOrientation的兼容性已经是很不错的了,图中的兼容性,是有些错误的,在上图中,显示在Safari中,不支持,但是真实的情况是,在IOSSafari中,支持性是很好的,并且做的一些东西的流畅性,也比Android的好很多,所以如果要使用该属性的话,可以放心的使用了。

并且,你也不用担心那些不支持的设备,因为这个属性如果不支持的话,其实是完全支持向后兼容的,不会报错了,也不会执行任何其他的非预期的操作,因为这个是一个事件…只要浏览器不会触发这个事件,就这些方法,就没有任何的影响。

这个时候,陀螺仪就不会有任何动作,而变成了一个静止的静态页了,而如果对于支持的那些,则可以有更好的体验了。

所以,如果有需求是需要使用到陀螺仪的,那么就放心的使用吧。

3. deviceOrientation使用

deviceOrientation的使用方法很简单,可以直接绑定事件就可以了,比如:


function _cb(event){
    console.log(event);
}

window.addEventListener('deviceorientation', _cb);


前面也说了,这是一个事件类型,那么对于使用者的我们来说,事件的回调数据,才是我们最关注的,也就是在回调函数中,event对象,到底可以提供给我们哪些数据可用,这些数据代表的含义又是什么?

除去正常的event事件都包含的一些属性之外,这里还包含了以下几个数据,也是我们最关心的几个数据:


absolute:false
alpha:null
beta:null
gamma:null


按理说,我们接下来就要看看,上面的几个属性,分别代表的含义,事实上,我们在接下来却是要对这几个属性进行说明,但是在了解个属性之前,先来看一个更重要的概念,那就是坐标系,不管什么东西,都要有个参考,才能更好的理解,不然就要得雪盲症了呢。

那么陀螺仪的坐标系是怎么样的呢?来看下图(图片取自网络,如有问题,请联系作者):

把手机放在水平的桌面上(屏幕朝上),坐标系就如图中所示,x轴指向手机的右侧,y轴指向手机的头部,z轴垂直于整个手机。

该坐标系是相对于手机的,不是相对我们所在的空间的,如果手机的在空间的位置改变了(水平放改为了竖直放),这个时候,手机的这个x,y,z的坐标系会跟着手机的位置,进行变动的,只是这样单纯的说,是很难理解到的,那么接下来,我们就来根据单个属性,配合着示例,来看看吧。

第一次实战演练:axes坐标系数据测试

可以直接扫描二维码:

3.1:alpha属性

该属性的获取方法:event.alpha属性,表示在沿着Z轴的旋转。

先来理解一下,沿着Z轴旋转是怎么样的,看下图(图片取自网络,如有问题,请联系作者):

如图所示,把手机水平放置在桌面上,在水平方向上,就让手机躺在桌面上,把手机进行旋转,就是按照z轴旋转。

W3C中指出,该属性的取值是[0, 360)的,即旋转一周是360度的。那哪个方向是0度和360度的交互点呢?

W3C中规定,把手机水平的放在桌面上,手机的头部指向西方,这个时候,陀螺仪的数据是如下的数据:


{
    alpha: 90,
    beta: 0,
    gamma: 0
}


但是我自己试了一下,这个是受限于手机浏览器的,我自己使用的iPhone 5S中,我测试使用了三个浏览器得到的结果,都不是太统一,都是有一定的误差的。

水平向西时,各浏览器的数据:

Safari:230左右(不知道什么鬼)

UC浏览器:180左右

QQ浏览器:360/0左右,微信内部也是这个,所以微信内部是使用IOS的QQ浏览器的…

为什么只有这几个浏览器呢?因为手机还是IOS8的系统,手机端的ChromeFF,都嫌弃我系统版本低,不让我安装了。

如果您已经打开了前面的那个示例,就把手机放在水平的桌面上,试试吧。

然后再把手机立起来,试试?依然按照旋转Z轴的方式,然后换其他的角度,再试试,你对这个属性的了解就会更深了。

3.2:beta属性

该属性的获取方法:event.beta属性,表示在沿着X轴的旋转,它的取值范围是[-180, 180)。

先来理解一下,沿着X轴旋转是怎么样的,看下图(图片取自网络,如有问题,请联系作者):

所以,关于这个属性,我们可以这么理解,把手机水平放置,屏幕朝上,这个时候,beta的取值,理论上0的(不能完全水平,所以有些误差),在现在把手机的头部抬高,然后慢慢的立起来,这个时候,beta的值是会从0一直变到90的,而如果让手机的底部,慢慢抬高,然后慢慢的倒立起来,这个时候beta的值是从0变化到-90的。

关于上面说的点,是我自己使用手机测试出来的,与W3C中的数据,是不同的。

注:W3C中,规定该值的取值是[-180,180),而我自己使用IOS8Iphone5S测试的数据则是[-90,90)。这个数据是有问题的,这里暂且认为是IOS系统的这个数据,不准吧,毕竟这里没有Chrome做对比测试,所以,仅做参考。

虽然这里的取值范围是有不同的,但是在W3C中,规定,手机立起来时,beta的值是90,这个是没有问题的。

请扫前文中的二维码,来做这个测试。

3.2:gamma属性

该属性的获取方法:event.gamma属性,表示在沿着Y轴的旋转,它的取值范围是[-90, 90)。

先来理解一下,沿着Y轴旋转是怎么样的,看下图(图片取自网络,如有问题,请联系作者):

所以,关于这个属性,我们可以这么理解,把手机水平放置,屏幕朝上,这个时候,gamma的取值,理论上0的(不能完全水平,所以有些误差),现在把手机的左侧抬高,然后慢慢的完全反转180度,这个时候,gamma的值是会从0一直变到180的,而如果让手机的右侧,慢慢抬高,然后慢慢的完全反转180度,这个时候gamma的值是从0变化到-180的。

依然,这里的测试是个人手机测试,与W3C中的数据,是不同的。

注:W3C中,规定gamma的取值是[-90,90),而我自己使用IOS8Iphone5S测试的数据则是[-180,180)。

注:这个很关键,关于gamma的取值,在屏幕水平朝上时,gamma的取值是0,但是在屏幕朝下的时候,gamma的取值是180的临界点,随便变动都会出现,突然从-170多变到170多的情况,这个时候的数据跳动是特别大的,所以这里是需要特别注意一下的。

3.4:疑惑

我现在想要表达的是一个疑惑,这个疑惑起源于我自己的测试:

为什么这里的betagamma,不进行统一一下呢,既然都是手机按照不同的方向进行翻转来得到的数据,都统一到[-90,90)不是很好的吗,这样就不会导致gamma在屏幕水平向下时,会出现,180-180这两个变动特别大的临界点的出现了。

当然,如果在正常使用时,真实的数据情况,可能是比这个更复杂的。

4:个人想法

文中的数据,一部分是参考W3C中的规定,另外一部分是直接测试所得,因为测试的设备有限,所以不确定现在到底有多少手机类型是完全按照W3C中的规定来处理的,也可能最近生产的手机,已经是按照最新的W3C标准来的了,毕竟W3C的规范,最新的一次更新是在20160818去W3C看看

所以本篇的仅做参考,如果通过本篇文章,能让您对各属性的角度有一个自己的认识,那么就是本篇文章的最大收获了。

在写本篇文章之前,是想写一个优化陀螺仪数据的方法,但是到这里之后,却发现无法写下去了,毕竟与如果各设备的获取数据差异过大,那么这个方法,基本就是无效的。

所以本篇就到此为止了,虽然没有能写一个通用的规范性的方法,但是通过本篇,我也更清楚了陀螺仪各数据的获取方式,也算是一个额外的收获吧。

所以虽然本盘文章有些内容不全,也依然发布一下吧,希望对您也能有所帮助。

5:结尾

在本篇文章的开头中,有引入caniuse的支持性的一张图,之前还说是,支持性很好的,现在看来,IOS下,确实没有按照W3C的标砖支持,IOS下的数据,虽然也支持了该功能,但是其数据获取与W3C的规定,是有差距的,所以在真实的项目中使用,还是要注意这一点的。

在陀螺仪的使用方面,有一个当前已经很普及的库了,如果想要使用的话,可以参考:parallax,它给提供的一个DEMO

本篇内容偏少,但到此为止。

如果您发现文中有描述错误或者不当的地方,请留言指出,不胜感激,谢谢!

本文属于原创文章,如需转载,请注明出处,谢谢!

本文地址:http://www.zhangyunling.com/?p=725

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>