× 提示:平板电脑上请横向浏览,以获得更好的效果!确实需要竖向浏览的话,请点击【 手机版本网站 】

【HTML5开发】重力感应控制方向

设计目的

重力感应控制方向的设计目的是:
利用手机的重力感应器来控制页面上元素的移动方向,进而实现页面上的某种动画效果。

原理阐释

HTML5 DeviceOrientation 接口应用一文中介绍了DeviceOrientation的一个用例,就是判断手机的左右摇摆方向。

var gamma_html = ""; if( gamma > 0 ){
    gamma_html = "向右倾斜";
}else{
    gamma_html = "向左倾斜";
}

这个是假设我们用手拿手机时的状态为:面对手机屏幕,手机头部朝斜上方。此时,beta值在0-90之间。对于大多数人来说,要让他向左旋转手机,他可能会做两种不同的动作:把手机绕y轴向左翻转;或者把手机绕z轴逆时针旋转(面对z轴正向)同时向左整体移动手机。

第一种动作中,手机只绕y轴发生了旋转,也就是说只有gamma值发生了变化。我们只要判断gamma值的正负即可判断手机的旋转方向。

第二种动作比较复杂,手机在绕z轴旋转的同时,其他两个轴的角度也发生了变化。实际上,这个动作发生的过程中,手机的欧拉角发生了变化。

虽然通过alpha,beta和gamma值计算出欧拉角,然后确定手机在三维空间中旋转方向会比较精确,但对于只需要简单判断方向的Web应用场景来说有点小题大作了。

通过观察发现,在发生第二种动作时,beta值的变化并没有那么大,不超过10。alpha的变化范围在-50到50之间,但它跟手机头部与地磁N极相关,与局部空间内手机的选择关系不大。而gamma值的变化非常明显,在-30到30之间。因此我们仍然可以通过gamma值的变化来确定手机的摇动方向。

代码实现和类型设计

通过原理分析和实践观察,我们得出可以利用gamma值的变化粗略判断手机旋转的方向。其核心代码依然不变,即根据gamma值的正负来判断朝左还是朝右,根据其大小来判断旋转的程度(或角度)。

把核心的代码放进程序中就能实现判断手机旋转,当然也可以封装出一个组件,在任何地方重复调用。

GravityController类设计

功能描述

GravityContoller设计为系统级对象,其自身通过window对象来监听手机的旋转朝向,并获得各个轴方向的角度。通过给它绑定onScrollLeft和onScrollRight方法来执行相应代码。

对象设计
access type name description
private float alpha alpha角度
private float beta beta角度
private float gamma gamma角度
public function onScrollLeft 向左旋转时执行的函数
public function onScrollRight 向右旋转时执行的函数

alpha,beta,gamma为GravityController类私有属性,值来自于window的deviceorientationevent对象。当deviceorientation事件发生时,根据gamma值的变化调用onScrollLeft或onScrollRight函数,并传入gamma。

接口使用示例

首先编写onScrollLeft和onScrollRight函数:

var scrollLeftHandler = function(angle){ console.log( "Cellphone Turn Left:" + Math.abs(angle).toFixed(2) );
}; var scrollRightHandler = function(angle){ console.log( "Cellphone Turn Right:" + Math.abs(angle).toFixed(2) );
};

然后声明GravityController对象,并传入onScrollLeft和onScrollRight函数:

var gc = new GravityController({
    onScrollLeft : scrollLeftHandler,
    onScrollRight : scrollRightHandler
});

文/codemarker(简书作者)
原文链接:http://www.jianshu.com/p/36d7c2886c03


  点作科技是一家专业的软件定制、网站定制服务商,提供APP开发、微信公众号开发、微信小程序开发等定制服务!


分享到:

关闭本页