首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

重力感应控制方向

2024-12-15 来源:花图问答

设计目的

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

原理阐释

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

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

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

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

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

代码实现和类型设计

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

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

GravityController类设计

功能描述

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

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

alpha,beta,gammaGravityController类私有属性,值来自于windowdeviceorientationevent对象。当deviceorientation事件发生时,根据gamma值的变化调用onScrollLeftonScrollRight函数,并传入gamma

接口使用示例

首先编写onScrollLeftonScrollRight函数:

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对象,并传入onScrollLeftonScrollRight函数:

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