zoukankan      html  css  js  c++  java
  • 手机端重力感应接口及应用

    现在微信开发如火如荼,各种基于微信的H5市场上也是很火爆,今天做个笔记就是跟大家分享手机端重力感应的应用,根据重力感应接口我们可以得到手机的方向,移动速度,xyz轴偏移量,现在先上所有数据展示,大家有兴趣的也可以亲身测试:

     

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8"/>
    <title>H5获取陀螺仪/重力感应(参考网上资源)</title>
    <meta name="viewport"
    content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=device-dpi"/>
    <style type="text/css">
    body{font-size: 24px;}
    span{color:#f00;}
    a{text-decoration: none;color:#f00;}
    a:hover{color:#000;}
    </style>
    </head>

    <body>
    <!--
    DeviceOrientationEvent是获取方向,得到device静止时的绝对值;
    DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比
    设备定位API,该API允许你收集设备的方向和移动信息。此外,该API只在具备陀螺仪功能的设备上使用。
    -->
    <h3>请用手机浏览器访问</h3>
    <p>EGRET白鹭版降临:<br/><a href="http://weixin.shinycg.com/weixin/DeviceOrientation" target="_blank">http://weixin.shinycg.com/weixin/DeviceOrientation</a></p>
    <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">

    init();
    function init(){
    if (window && window.DeviceMotionEvent)
    window.addEventListener("devicemotion", motionHandler, false);
    if (window && window.DeviceOrientationEvent)
    window.addEventListener("deviceorientation", orientationHandler, false);
    }

    function orientationHandler(event) {
    document.getElementById("alpha").innerHTML = event.alpha||0;
    document.getElementById("beta").innerHTML = event.beta||0;
    document.getElementById("gamma").innerHTML = event.gamma||0;
    document.getElementById("heading").innerHTML = event.webkitCompassHeading||0;
    document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy||0;
    }

    function motionHandler(event) {
    document.getElementById("interval").innerHTML = event.interval||0;
    var acc = event.acceleration;
    document.getElementById("x").innerHTML = acc.x||0;
    document.getElementById("y").innerHTML = acc.y||0;
    document.getElementById("z").innerHTML = acc.z||0;
    var accGravity = event.accelerationIncludingGravity;
    document.getElementById("xg").innerHTML = accGravity.x||0;
    document.getElementById("yg").innerHTML = accGravity.y||0;
    document.getElementById("zg").innerHTML = accGravity.z||0;
    var rotationRate = event.rotationRate;
    document.getElementById("Ralpha").innerHTML = rotationRate.alpha||0;
    document.getElementById("Rbeta").innerHTML = rotationRate.beta||0;
    document.getElementById("Rgamma").innerHTML = rotationRate.gamma||0;
    }

    </script>
    </body>
    </html>

     


    以上是重力感应接口所有的参数,那么根据这些参数我们就可以做出:
    1、摇动计数,根据偏移量阀值来计算摇动的次数,次数达到一定数目,就触发某种事件,摇一摇开红包就是个例子:

     

     
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #ceshi{
    font-size: 50px;
    }
    </style>
    </head>
    <body>
    <div id="ceshi"></div>
    <script>
    function init(){
      if (window.DeviceMotionEvent) {
        // 移动浏览器支持运动传感事件
        window.addEventListener('devicemotion', deviceMotionHandler, false);
        
      }
    }

    // 那么,我们如何计算用户是否是在摇动手机呢?可以从以下几点进行考虑:
    // 1、其实用户在摇动手机的时候始终都是以一个方向为主进行摇动的;
    // 2、用户在摇动手机的时候在x、y、z三个方向都会有相应的想速度的变化;
    // 3、不能把用户正常的手机运动行为当做摇一摇(手机放在兜里,走路的时候也会有加速度的变化)。
    // 从以上三点考虑,针对三个方向上的加速度进行计算,间隔测量他们,考察他们在固定时间段里的变化率,而且需要确定一个阀值来触发摇一摇之后的操作。

    // 首先,定义一个摇动的阀值
    var SHAKE_THRESHOLD = 3000;
    // 定义一个变量保存上次更新的时间
    var last_update = 0;
    // 紧接着定义x、y、z记录三个轴的数据以及上一次触发的时间
    var x;
    var y;
    var z;
    var last_x;
    var last_y;
    var last_z;

    // 为了增加这个例子的一点无聊趣味性,增加一个计数器
    var count = 0;

    function deviceMotionHandler(eventData) {
      // 获取含重力的加速度
      var acceleration = eventData.accelerationIncludingGravity;

      // 获取当前时间
      var curTime = new Date().getTime();
      var diffTime = curTime -last_update;
      // 固定时间段
      if (diffTime > 100) {
        last_update = curTime;

        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;

        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

        if (speed > SHAKE_THRESHOLD) {
          // TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作
          count++;
          document.getElementById("ceshi").innerHTML = count;
          
        }

        last_x = x;
        last_y = y;
        last_z = z;
      }
    }
    init()
    </script>
    </body>
    </html>

    2、左右偏移角度,手机平放是0度,往左偏就是负数度,往右同理,根据这个接口我们就可以做:飞机大战,根据偏转角度来实现主角飞机在屏幕中的移动,可以参考我做的demo:http://www.sanmuweb.com/shoot/index.html(手机端才能正常试玩),效果略简陋,但是逻辑通了。

    3、还有个跟重力感应相关的插件就是parallax.js,这个插件在电脑端可以通过鼠标实现图片的分层偏移,手机端可以通过重力感应实现,见demo:http://www.sanmuweb.com/zhongli3.html

  • 相关阅读:
    用户验证之自定义身份验证
    再谈CLR:查看程序集的依赖关系
    关于私钥加密、公钥加密、签名在生活中的场景
    MOSS 2010服务器对象模型(Object Model)
    用户身份验证之Windows验证
    由object不能比较引发的问题
    再谈CLR: .NET 4.0新功能:Mscoree.dll + Mscoreei.dll=更少的Reboot (上)
    再谈CLR:事件定义
    WPF:如何为程序添加splashScreen?
    通过反射得到类型的所有成员
  • 原文地址:https://www.cnblogs.com/guandekuan/p/6377173.html
Copyright © 2011-2022 走看看