<!doctype html> <html> <head> <meta charset="gbk"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <style> .test{ border:2px solid green; width:300px; height:350px; background: #000; position: relative; COLOR:#FFF; } .test #ball{ width:12px; height:12px; background: #fff; -webkit-border-radius:6px; position: absolute; left:0; right: 0; } </style> </head> <body> <h2>設備方向感應測試</h2> <div id="msg"></div> <div id='test' tabindex='0' class="test"> <!--<img src="img/3.png" id="ball">--> <div id="ball"></div> </div> <script> function Orientation(selector){} Orientation.prototype.init = function(){ window.addEventListener('deviceorientation', this.oriListener, false); window.addEventListener('MozOrientation', this.oriListener, false); //為firefox所用 window.addEventListener('devicemotion', this.oriListener, false); //重力感應 } Orientation.prototype.oriListener = function(e) { setTimeout(function(){ handler(e); deviceMotionHandler(e) },10); function handler(e){ // For FF3.6+ if (!e.gamma && !e.beta) { // angle=radian*180.0/PI 在firefox中x和y是弧度值, e.gamma = (e.x * (180 / Math.PI)); //轉換成角度值, e.beta = (e.y * (180 / Math.PI)); //轉換成角度值 e.alpha = (e.z * (180 / Math.PI)); //轉換成角度值 } /* beta: -180..180 (rotation around x axis) */ /* gamma: -90..90 (rotation around y axis) */ /* alpha: 0..360 (rotation around z axis) (-180..180) */ var gamma = e.gamma var beta = e.beta var alpha = e.alpha if(e.accelerationIncludingGravity){ // window.removeEventListener('deviceorientation', this.orientationListener, false); gamma = e.accelerationIncludingGravity.x*300 beta = -e.accelerationIncludingGravity.y*300 alpha = event.accelerationIncludingGravity.z*300 } if (this._lastGamma != gamma || this._lastBeta != beta) { document.querySelector("#msg").innerHTML = "x: "+ beta.toFixed(2) + " y: " + gamma.toFixed(2) + " z: " + (alpha != null?alpha.toFixed(2):0) var style = document.querySelector("#ball").style; style.left = gamma/90 * 200 + 150 +"px"; style.top = beta/90 * 200 + 100 +"px"; this._lastGamma = gamma; this._lastBeta = beta; } } function deviceMotionHandler(e) { /* if(e.accelerationIncludingGravity){ var gx = e.accelerationIncludingGravity.x; var gy = e.accelerationIncludingGravity.y; var gz = e.accelerationIncludingGravity.z; } var facingUp = -1; if (gz > 0) { facingUp = +1; } var tiltLR = Math.round(((gx) / 9.81) * -90); var tiltFB = Math.round(((gy + 9.81) / 9.81) * 90 * facingUp); //document.getElementById("moCalcTiltLR").innerHTML = tiltLR; // document.getElementById("moCalcTiltFB").innerHTML = tiltFB; var rotation = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB) + "deg)"; document.getElementById("imgLogo").style.webkitTransform = rotation; */ var gamma = e.gamma var beta = e.beta var alpha = e.alpha var tiltLR =gamma; //Math.round(((beta) / 9) * -90); var tiltFB = beta; var rotation = "rotate(" + tiltLR + "deg)"; var rotation2 = "rotate(" + tiltFB + "deg)"; var style = document.querySelector("#imgLogo").style; var style2 = document.querySelector("#imgLogo2").style; style.webkitTransform = rotation; style2.webkitTransform = rotation2; } }; (new Orientation()).init(); </script> </body> </html>
擴展:微信小程序鏈接:http://www.wxappclub.com/doc/1-43
H5監聽搖一搖和手機傾斜事件(重力感應)
| 屬性 | 釋義 |
|---|---|
| event.accelaration | x(y,z):設備在x(y,z)方向上的移動加速度值 |
| event.accelarationIncludingGravity | x(y,z):考慮了重力加速度后設備在x(y,z)方向上的移動加速度值 |
| event.rotationRate | alpha,beta,gamma:設備繞x,y,z軸旋轉的角度 |
var shakeThreshold = 1000; // 定義一個搖動的閾值
var lastUpdate = 0; // 記錄上一次搖動的時間
var x, y, z, lastX, lastY, lastZ; // 定義x、y、z記錄三個軸的數據以及上一次觸發的數據
// 監聽傳感器運動事件
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
//瀏覽器不支持DeviceMotion
alert('天吶,你的手機竟然還不支持搖一搖ヾ(?°?°?)??');
}
// 運動傳感器處理
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity; // 獲取含重力的加速度
var curTime = new Date().getTime();
// 100毫秒進行一次位置判斷
if ((curTime - lastUpdate) > 100) {
var diffTime = curTime - lastUpdate;
lastUpdate = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
if (speed > shakeThreshold) {
alert("搖一搖觸發")
}
lastX = x;
lastY = y;
lastZ = z;
}
}
- 重力感應方向控制(DeviceOrientation)——個人測試這里使用過
-
屬性 釋義 alpha 設備指示的方向,根據指南針的設定情況而定 beta 設備繞x軸旋轉的角度 gamma 設備繞y軸旋轉的角度 工作原理 :
根據event對象的三個方向的參數來確定設備的旋轉角度。其中,alpha的取值范圍是0-360,這個需要根據設備的指南針設定情況而定,一般來說,設備指向正北方向時為0.beta值為設備繞x軸旋轉的角度,取值范圍為-180-180。gamma取值范圍-90-90.
這里面alpha值的意義并不大,主要參考beta和gamma值。
當屏幕從水平沿y軸向左傾斜時gamma值變為負值,向右傾斜變為正值。
當屏幕從水平沿x軸向前傾斜時beta值變為正值,向后傾斜時變為負值。
所以,如果我們設定一個閾值,當beta和gamma的絕對值大于這個閾值時,我們就認為設備發生了旋轉。另外根據beta和gamma的值來判斷向左傾斜還是向右傾斜,以及傾斜的程度。
// 綁定deviceorientation事件和處理程序
if(window.DeviceOrientationEvent){
window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
}else{
alert("您的瀏覽器不支持DeviceOrientation");
}
function DeviceOrientationHandler(event){
var alpha = event.alpha,beta = event.beta,gamma = event.gamma;
if(alpha != null || beta != null || gamma != null){
//各個方向旋轉的值
//alert("alpha:" + alpha + "<br />beta:" + beta + "<br />gamma:" + gamma)
//判斷屏幕方向
if( gamma > 0 ){
alert("向右傾斜");
}else{
alert("向左傾斜");
}
}
}
DeviceOrientationEvent是獲取方向,得到device靜止時的絕對值; DeviceMotionEvent是獲取移動速度,得到device移動時相對之前某個時間的差值比 設備定位API,該API允許你收集設備的方向和移動信息。此外,該API只在具備陀螺儀功能的設備上使用。 <html> <head> <title>DeviceOrientationEvent</title> <meta charset="UTF-8" /> </head> <body> <p>左右:<span id="alpha">0</span> </p> <p>前后:<span id="beta">0</span> </p> <p>扭轉:<span id="gamma">0</span> </p> <p>指北針指向:<span id="heading">0</span>度</p> <p>指北針精度:<span id="accuracy">0</span>度</p> <hr /> <p>x軸加速度:<span id="x">0</span>米每二次方秒</p> <p>y軸加速度:<span id="y">0</span>米每二次方秒</p> <p>z軸加速度:<span id="z">0</span>米每二次方秒</p> <hr /> <p>x軸加速度(考慮重力加速度):<span id="xg">0</span>米每二次方秒</p> <p>y軸加速度(考慮重力加速度):<span id="yg">0</span>米每二次方秒</p> <p>z軸加速度(考慮重力加速度):<span id="zg">0</span>米每二次方秒</p> <hr /> <p>左右旋轉速度:<span id="Ralpha">0</span>度每秒</p> <p>前后旋轉速度:<span id="Rbeta">0</span>度每秒</p> <p>扭轉速度:<span id="Rgamma">0</span>度每秒</p> <hr /> <p>上次收到通知的間隔:<span id="interval">0</span>毫秒</p> <script type="text/javascript"> function orientationHandler(event) { document.getElementById("alpha").innerHTML = event.alpha; document.getElementById("beta").innerHTML = event.beta; document.getElementById("gamma").innerHTML = event.gamma; document.getElementById("heading").innerHTML = event.webkitCompassHeading; document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy; } function motionHandler(event) { document.getElementById("interval").innerHTML = event.interval; var acc = event.acceleration; document.getElementById("x").innerHTML = acc.x; document.getElementById("y").innerHTML = acc.y; document.getElementById("z").innerHTML = acc.z; var accGravity = event.accelerationIncludingGravity; document.getElementById("xg").innerHTML = accGravity.x; document.getElementById("yg").innerHTML = accGravity.y; document.getElementById("zg").innerHTML = accGravity.z; var rotationRate = event.rotationRate; document.getElementById("Ralpha").innerHTML = rotationRate.alpha; document.getElementById("Rbeta").innerHTML = rotationRate.beta; document.getElementById("Rgamma").innerHTML = rotationRate.gamma; } if (window.DeviceMotionEvent) { window.addEventListener("devicemotion", motionHandler, false); } else { document.body.innerHTML = "What user agent u r using???"; } if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", orientationHandler, false); } else { document.body.innerHTML = "What user agent u r using???"; }; </script> </body>
</html>
<!DOCTYPE html> <html> <head> <title>compass</title> <style type="text/css"> html,body{ margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; } #compass{ width: 50vw; height: 50vw; transform-origin:center center; border-radius: 50vw; overflow: hidden; border: 10px double #333; } .compass-inner{ margin: auto; height: 100%; width: 10vw; position: relative; } .compass-inner::before{ content: ""; display: block; left: 0; top: 0; height: 0; width: 0; border: 25vw solid red; border-width: 0 5vw 25vw 5vw; border-color: transparent transparent red transparent; } .compass-inner::after{ content: ""; display: block; left: 0; bottom: 0; height: 0; width: 0; border: 25vw solid blue; border-width: 25vw 5vw 0 5vw; border-color: blue transparent transparent transparent; } </style> </head> <body> <div id="compass"> <div class="compass-inner"></div> </div> <script type="text/javascript"> var compass = document.getElementById('compass'); if(window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', function(event) { var alpha; if(event.webkitCompassHeading) { //iOS alpha = event.webkitCompassHeading; compass.style.WebkitTransform = 'rotate(-' + alpha + 'deg)'; show.innerHTML = alpha; } else { alpha = event.alpha; webkitAlpha = alpha; if(!window.chrome) { webkitAlpha = alpha-270; } } compass.style.Transform = 'rotate(' + alpha + 'deg)'; compass.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)'; compass.style.MozTransform = 'rotate(-' + alpha + 'deg)'; }, false); }else{ document.querySelector('body').innerHTML = '瀏覽器不支持陀螺儀'; } </script> </body> </html>

具體解釋下三個量:
aplha
裝置水平放置時,繞 Z 軸旋轉的角度,數值為 0 度到 360 度。

beta
行動裝置水平放置時,繞 X 軸旋轉的角度,數值為 -180 度到 180 度。

gamma
行動裝置水平放置時,繞 Z 軸旋轉的角度,數值為 -90 度到 90 度。

HTML5新API—重力感應器(搖一搖)

當我們的設備“位置”發生變化時,會在devicemotion的事件對象(ev)內保存相關信息,我們從其中獲取我們所需要的信息即可。 首先我們要判斷下我們的設備是否支持DeviceMotionEvent if(window.DeviceMotionEvent){ alert('ok,可以支持');} else { alert('不支持'); } 接下來我們就可以通過devicemotion事件(注意此處必須用事件綁定,必須用事件綁定必須用事件綁定),然后通過ev下的accelerationIncludingGravity來獲取X、Y、Z的相關參數: if(window.DeviceMotionEvent){ window.addEventListener('devicemotion',function(ev){ //當觸發devicemotion事件后查看相關信息 var acc = ev.accelerationIncludingGravity; alert('x坐標:'+acc.x+'--y坐標:'+acc.y+'---z坐標:'+acc.z); },false); } 下面我們就開始,編寫一個簡單的微信搖一搖功能 當我們手機端X方向或Y方向或Z方向,就觸發搖一搖功能 利用CSS3的動畫來給box一個隨機的背景色 html布局: <div id="box"></div> 簡單的為box設置點樣式: <style type="text/css" media="screen"> //定義一個左右搖擺動畫 @keyframes test{ 0%{ transform:rotate(0deg); } 25%{ transform:rotate(30deg); } 50%{ transform:rotate(0deg);} 75%{ transform:rotate(-30deg); } 100%{ transform:rotate(0deg);} } #box{ width:400px;height:200px; background:red; margin:200px auto; } //給box加一個動畫 #box.shake{ animation:200ms test ease; } </style> 接下來我們就用JS獲取信息沒然后操作BOX的顏色與位置變化 //在這里定義一個隨機數函數 function rnd(m,n){ return parseInt(Math.random()*(n-m)+m); } //給文檔加DOMContentLoaded事件,該事件類似window.onloaded document.addEventListener('DOMContentLoaded',function(){ var oBox = document.getElementById('box'); var timer=null; if(window.DeviceMotionEvent){ window.addEventListener('devicemotion',function(ev){ var acc = ev.accelerationIncludingGravity; //獲取devicemotion的xyz變化 var x = acc.x; var y = acc.y; var z = acc.z; if( x>30|| y>30|| z>30 ){ oBox.className ='shake'; 、 oBox.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')'; timer=setTimeout(function(){ oBox.className =''; },300) } },false); }else{ alert('不支持'); } },false); 轉鏈接:https://www.jianshu.com/p/6dcb963a58dd
浙公網安備 33010602011771號