<!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的值來判斷向左傾斜還是向右傾斜，以及傾斜的程度。

屬性	釋義
alpha	設備指示的方向，根據指南針的設定情況而定
beta	設備繞x軸旋轉的角度
gamma	設備繞y軸旋轉的角度

// 綁定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("向左傾斜");
         }
     }
 }

html5 獲取陀螺儀，重力感應(轉發)

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

posted on 2019-08-21 15:11 不見花落閱讀(1165) 評論(0) 收藏舉報

刷新頁面返回頂部