javascript html5搖一搖功能的實(shí)現(xiàn)_

1、javascript html5搖一搖功能的實(shí)現(xiàn)_ 這篇文章主要為大家具體介紹了javascript html5搖一搖功能的實(shí)現(xiàn)過程，具有肯定的參考價(jià)值，感愛好的小伙伴們可以參考一下 通過網(wǎng)上的資料，加上自己的整理，寫了一份html搖一搖功能的簡介，用做技術(shù)備份。 學(xué)問要點(diǎn) 1、DeviceMotionEvent 這是html5支持的重力感應(yīng)大事，關(guān)于文檔請(qǐng)看：l 大事介紹： deviceorientation 供應(yīng)設(shè)備的物理方向信息，表示為一系列本地坐標(biāo)系的旋角。 devicemotion 供應(yīng)設(shè)備的加速信息，表示為定義在設(shè)備上的坐標(biāo)系中的卡爾迪坐標(biāo)。其還供應(yīng)了設(shè)備在坐標(biāo)系中的自轉(zhuǎn)速率。若可

2、行的話，大事應(yīng)當(dāng)供應(yīng)設(shè)備重心處的加速信息。 compassneedscalibration 用于通知Web站點(diǎn)用法羅盤信息校準(zhǔn)上述大事。 2、大事簡介 window.addEventListener(deviceorientation,function(event)/ 處理event.alpha、event.beta及event.gamma,true); alpha:90, beta:0, gamma:0; 這是 deviceorientation大事返回的參數(shù)，為了獲得羅盤指向，可以簡潔的用法360度減去alpha。若設(shè)被平行于水平表面，其羅盤指向?yàn)?360 - alpha)。 若用戶手持設(shè)

3、備，屏幕處于一個(gè)垂直平面且屏幕頂端指向上方。beta的值為90，alpha和gamma無關(guān)。 用戶手持設(shè)備，面對(duì)alpha角度，屏幕處于一個(gè)垂直屏幕，屏幕頂端指向右方，則其方向信息如下 alpha:270- alpha, beta:0, gamma:90; 注冊(cè)一個(gè)devicemotion大事的接收器： 代碼如下: window.addEventListener(devicemotion,function(event)/ 處理event.acceleration、event.accelerationIncludingGravity、/ event.rotationRate和e

4、rval,true); 將設(shè)備安置于車輛之上，屏幕處于一個(gè)垂直平面，頂端向上，面對(duì)車輛后部。車輛行駛速度為v，向右側(cè)進(jìn)行半徑為r的轉(zhuǎn)彎。設(shè)備記錄acceleration 和accelerationIncludingGravity在位置x處的狀況，同時(shí)設(shè)備還會(huì)記錄rotationRate.gamma的負(fù)值： acceleration:x: v2/r, y:0, z:0, accelerationIncludingGravity:x: v2/r, y:0, z:9.81, rotationRate:alpha:0, beta:0, gamma:-v/r*180/pi; 功能實(shí)現(xiàn) if(window

5、.DeviceMotionEvent) window.addEventListener(devicemotion, YaoYiYao,false); var speed =30;/speed var x = y = z = lastX = lastY = lastZ =0; function YaoYiYao(eventData) var acceleration =eventData.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) speed |Math.abs(y-lastY) speed |Math.abs(z-lastZ) speed) /簡潔的搖一搖觸發(fā)代碼 alert(1); lastX = x; lastY = y; lastZ = z; 首先推斷掃瞄器是否支持該大事。 YaoYiYao用來檢測(cè)是否對(duì)手機(jī)進(jìn)行搖動(dòng)操作，具體就是獵取手機(jī)的的移動(dòng)數(shù)據(jù)，將其存在一個(gè)外部變量中，當(dāng)下次又觸發(fā)搖動(dòng)大事時(shí)，推斷上次的搖動(dòng)坐標(biāo) 和現(xiàn)在的搖動(dòng)坐標(biāo) 是否處于一個(gè)頻繁調(diào)動(dòng)的范圍：Math.abs(x-lastX) speed |Math.abs(y-lastY) speed |Math.abs(z-las