設(shè)計(jì)目的
重力感應(yīng)控制方向的設(shè)計(jì)目的是：
利用手機(jī)的重力感應(yīng)器來(lái)控制頁(yè)面上元素的移動(dòng)方向，進(jìn)而實(shí)現(xiàn)頁(yè)面上的某種動(dòng)畫(huà)效果。
原理闡釋
在HTML5 DeviceOrientation 接口應(yīng)用一文中介紹了DeviceOrientation的一個(gè)用例，就是判斷手機(jī)的左右搖擺方向杠园。
var gamma_html = "";
if( gamma > 0 ){
gamma_html = "向右傾斜";
}else{
gamma_html = "向左傾斜";
}
這個(gè)是假設(shè)我們用手拿手機(jī)時(shí)的狀態(tài)為：面對(duì)手機(jī)屏幕，手機(jī)頭部朝斜上方。此時(shí)野蝇，beta值在0-90之間。對(duì)于大多數(shù)人來(lái)說(shuō)括儒，要讓他向左旋轉(zhuǎn)手機(jī)绕沈，他可能會(huì)做兩種不同的動(dòng)作：把手機(jī)繞y軸向左翻轉(zhuǎn)；或者把手機(jī)繞z軸逆時(shí)針旋轉(zhuǎn)（面對(duì)z軸正向）同時(shí)向左整體移動(dòng)手機(jī)帮寻。
第一種動(dòng)作中乍狐，手機(jī)只繞y軸發(fā)生了旋轉(zhuǎn)，也就是說(shuō)只有g(shù)amma值發(fā)生了變化固逗。我們只要判斷gamma值的正負(fù)即可判斷手機(jī)的旋轉(zhuǎn)方向浅蚪。
第二種動(dòng)作比較復(fù)雜，手機(jī)在繞z軸旋轉(zhuǎn)的同時(shí)烫罩，其他兩個(gè)軸的角度也發(fā)生了變化惜傲。實(shí)際上，這個(gè)動(dòng)作發(fā)生的過(guò)程中贝攒，手機(jī)的歐拉角發(fā)生了變化盗誊。
雖然通過(guò)alpha,beta和gamma值計(jì)算出歐拉角，然后確定手機(jī)在三維空間中旋轉(zhuǎn)方向會(huì)比較精確，但對(duì)于只需要簡(jiǎn)單判斷方向的Web應(yīng)用場(chǎng)景來(lái)說(shuō)有點(diǎn)小題大作了哈踱。
通過(guò)觀察發(fā)現(xiàn)荒适，在發(fā)生第二種動(dòng)作時(shí)，beta值的變化并沒(méi)有那么大开镣，不超過(guò)10吻贿。alpha的變化范圍在-50到50之間，但它跟手機(jī)頭部與地磁N極相關(guān)哑子，與局部空間內(nèi)手機(jī)的選擇關(guān)系不大舅列。而gamma值的變化非常明顯，在-30到30之間卧蜓。因此我們?nèi)匀豢梢酝ㄟ^(guò)gamma值的變化來(lái)確定手機(jī)的搖動(dòng)方向帐要。
代碼實(shí)現(xiàn)和類(lèi)型設(shè)計(jì)
通過(guò)原理分析和實(shí)踐觀察，我們得出可以利用gamma值的變化粗略判斷手機(jī)旋轉(zhuǎn)的方向弥奸。其核心代碼依然不變榨惠，即根據(jù)gamma值的正負(fù)來(lái)判斷朝左還是朝右，根據(jù)其大小來(lái)判斷旋轉(zhuǎn)的程度（或角度）盛霎。
把核心的代碼放進(jìn)程序中就能實(shí)現(xiàn)判斷手機(jī)旋轉(zhuǎn)赠橙，當(dāng)然也可以封裝出一個(gè)組件，在任何地方重復(fù)調(diào)用愤炸。
GravityController類(lèi)設(shè)計(jì)
功能描述
GravityContoller設(shè)計(jì)為系統(tǒng)級(jí)對(duì)象期揪，其自身通過(guò)window對(duì)象來(lái)監(jiān)聽(tīng)手機(jī)的旋轉(zhuǎn)朝向，并獲得各個(gè)軸方向的角度规个。通過(guò)給它綁定onScrollLeft和onScrollRight方法來(lái)執(zhí)行相應(yīng)代碼凤薛。
對(duì)象設(shè)計(jì)
| access | type | name | description |
|---|---|---|---|
| private | float | alpha | alpha角度 |
| private | float | beta | beta角度 |
| private | float | gamma | gamma角度 |
| public | function | onScrollLeft | 向左旋轉(zhuǎn)時(shí)執(zhí)行的函數(shù) |
| public | function | onScrollRight | 向右旋轉(zhuǎn)時(shí)執(zhí)行的函數(shù) |
alpha,beta,gamma 為GravityController類(lèi)私有屬性，值來(lái)自于window的deviceorientationevent對(duì)象诞仓。當(dāng)deviceorientation事件發(fā)生時(shí)缤苫，根據(jù)gamma值的變化調(diào)用onScrollLeft或onScrollRight函數(shù)，并傳入gamma墅拭。
接口使用示例
首先編寫(xiě)onScrollLeft和onScrollRight函數(shù)：
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對(duì)象活玲，并傳入onScrollLeft和onScrollRight函數(shù)：
var gc = new GravityController({
onScrollLeft : scrollLeftHandler,
onScrollRight : scrollRightHandler
});
