zoukankan      html  css  js  c++  java
  • HTML5晃动DeviceMotionEvent事件

     

    关于devicemotion

    html5提供了几个新的DOM事件来获得设备物理方向及运动的信息,包括:陀螺仪、罗盘及加速计。

    第一个DOM事件是**deviceorientation**,其提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
    第二个DOM事件是**devicemotion**,其提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。
    第三个DOM事件是**compassneedscalibration**,其用于通知Web站点使用罗盘信息校准上述事件。

    原理

    开发者从各个内置传感器那里获取未经修改的传感数据,并观测或响应设备各种运动和角度变化。这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。
    加速器和陀螺仪的数据都是描述沿着iOS设备三个方向轴上的位置,对于一个竖屏摆放的iPhone来说,X方向从设备的左边(负)到右边(正),Y方向则是由设备的底部(-)到顶部(+),而Z方向为垂直于屏幕由设备的背面(-)到正面(+)。

    DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度.
    加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的.
    通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。

    事件监听

    if ((window.DeviceMotionEvent) {
      window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
      document.getElementById("dmEvent").innerHTML = "Not supported on your device."
    }
    

    捕捉重力加速度

    var acceleration = eventData.accelerationIncludingGravity;
    

    摇一摇demo

    var SHAKE_THRESHOLD = 800;
    var last_update = 0;
    var x, y, z, last_x, last_y, last_z;       
    function deviceMotionHandler(eventData) {        
      var acceleration =eventData.accelerationIncludingGravity;
      var curTime = new Date().getTime();       
      if ((curTime - last_update)> 300) {                
          var diffTime = curTime -last_update;
          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) {
                    alert("shaked!");
          }
          last_x = x;
          last_y = y;
          last_z = z;
        }
    } 
    

    另外一个栗子~

    function deviceMotionHandler(eventData) {
      // 捕捉重力加速度
      var acceleration = eventData.accelerationIncludingGravity;     
      // 打印加速数据
      var rawAcceleration = "[" +  Math.round(acceleration.x) + ", " +Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";
    // Z轴,可知设备朝上或者朝下
      var facingUp = -1;
      if (acceleration.z > 0) {
        facingUp = +1;
      }     
      // 根据重力通过 acceleration.x|y 转换得到加速值,
      // 运用重力加速度9.81来计算得到一个百分比然后乘以转换角度90
      var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
      var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);     
      // 打印加速度的计算结果
      document.getElementById("moAccel").innerHTML = rawAcceleration;
      document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
      document.getElementById("moCalcTiltFB").innerHTML = tiltFB;     
      // 将2D和3D的转换应用到图片上
      var rotation = "rotate(" + tiltLR + "deg) (1,0,0, " + (tiltFB) + "deg)";
      document.getElementById("imgLogo").style.webkitTransform = rotation;
    }
     
     
  • 相关阅读:
    在Ubuntu中通过update-alternatives切换软件版本
    SCons: 替代 make 和 makefile 及 javac 的极好用的c、c++、java 构建工具
    mongodb 的使用
    利用grub从ubuntu找回windows启动项
    How to Repair GRUB2 When Ubuntu Won’t Boot
    Redis vs Mongo vs mysql
    java script 的工具
    python 的弹框
    how to use greendao in android studio
    python yield的终极解释
  • 原文地址:https://www.cnblogs.com/xzzzys/p/7827079.html
Copyright © 2011-2022 走看看