重力感应控制方向

设计目的

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

原理阐释

在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
});