陀螺仪属性介绍和实战分分快三计划

作者:分分快三计划

devicemotion事件

<!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. x轴方向是从左往右
  2. y轴方向是从下往上
  3. z轴方向是从后往前

 

事件对象包含的属性:

 

    lastY = y;

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;
}

摇一摇实际例子:

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

devicemotion事件是要告诉开发人员设备什么时候移动,而不仅仅是设备方向如何改变。如:检测设备是不是正在往下掉、检测设备是不是被走着的人拿在手里

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

if (window.DeviceMotionEvent) {

<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>

陀螺仪又叫角速度传感器,是不同于加速度计(G-sensor)的,他的测量物理量是偏转、倾斜时的转动角速度。在手机上,仅用加速度计没办法测量或重构出完整的3D动作,测不到转动的动作的,G-sensor只能检测轴向的线性动作。但陀螺仪则可以对转动、偏转的动作做很好的测量,这样就可以精确分析判断出使用者的实际动作。而后根据动作,可以对手机做相应的操作![百度百科]

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

    var acceleration = eventData.accelerationIncludingGravity;

<script type="text/javascript">

    }

2、左右偏移角度,手机平放是0度,往左偏就是负数度,往右同理,根据这个接口我们就可以做:飞机大战,根据偏转角度来实现主角飞机在屏幕中的移动,可以参考我做的demo:

}

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

  • 什么是陀螺仪? 
  • 陀螺仪的分类 
  • 陀螺仪的作用 
  • 手机陀螺仪的作用 
  • deviceorientation事件 
  • devicemotion事件 

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

    z = acceleration.z;

// 首先,定义一个摇动的阀值
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 x = y = z = lastX = lastY = lastZ = 0;

<!DOCTYPE html>
<html>

为了方便说明:引入三轴实际旋转手势表示图,经过真机测试,所有轴都是按照逆时针旋转

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

        alert('摇一摇成功');

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

var speed = 30; //speed

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

deviceorientation事件:是在加速计检测到设备方向变化时在window对象上触发,不过,deviceorientation事件的意图是告诉开发人员设备在空间中朝向哪儿,而不是如何移动

**

  1. acceleration:一个包含x、y、z属性的对象,在不考虑重力的情况下,告诉开发者在每个方向上的加速度
  2. accelerationIncludingGravity:一个包含x、y、z属性的对象,在考虑z轴自然重力加速度的情况下,告诉开发者每个方向上的加速度
  3. interval:以毫秒表示的时间值,必须在另一个devicemotion事件触发前传入。这个值在每个事件是一个常量
  4. rotationRate:一个包含表示方向的alpha、beta、gamma属性的对象

 

指北针实例

 

三维空间中xyz三轴定位:

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

说明:当xyz任意方向上的加速大大于30(任意设置,设置大一点能治肩周炎,哈哈)的时候,触发成功

* *

devicemotion事件-实际例子

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

 

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 deviceMotionHandler(eventData) {

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

事件对象包含4个属性:

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

 

**

<script>

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

陀螺仪属性介绍和实战

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

 

  1. 压电陀螺仪
  2. 微机械陀螺仪
  3. 光纤陀螺仪
  4. 激光陀螺仪

</script>

  1. alpha:围绕Z轴旋转,Y轴的度数差;范围介于:0-360之间的浮点数
  2. beta:围绕X轴旋转,Z轴度数差;范围介于:-180度-180度之间的浮点数
  3. gamma:围绕Y轴旋转,Z轴度数差;范围介于:-90度-90度之间的浮点数
  4. absolute:布尔值,表示设备是否返回一个绝对值
  5. compassCalibrated:布尔值,表示设备的指南针是否校准过
  6. webkitCompassHeading:与正北方向的角度差值。正北为0度,正东为90度,正南为180度,正西为270度。因为0度是正北,所以叫指北针,不是指南针
  7. webkitCompassAccuracy:指北针的精确度,表示偏差为正负多少度。一般是10

deviceorientation事件

手机陀螺仪的作用

先来个激发兴趣的例子:根据手机旋转移动而变化的骰子

    lastZ = z;

    if (Math.abs(x

陀螺仪的作用

  1. 通过陀螺仪,能够对手机的偏转角度、速度、时间等进行测量,从而实现对游戏视野的变化和车辆方向速度的改变,让游戏的体验有了质的提升!
  2. 能够帮助摄像头进行防抖,通俗来说就是当你按下快门的那一刻,陀螺仪检测手机抖动的角度,然后根据角度来算出镜头模组需要补偿的距离,让镜头通过反向运动来抵消手机的抖动,从而实现镜头在拍摄的那一刻的绝对静止,提高成片率。
  3. 辅助GPS导航,在某些gps信号弱或者无信号的地方,比如隧道等,手机就可以根据之前定位的地点和陀螺仪检测的运动速度和时间和方向,推算出当前的位置,来达到暂时定位的目的。

        //简单的摇一摇触发代码

陀螺仪的分类

  1. 陀螺仪器能提供准确的方位、水平、位置、速度和加速度等信号,以便驾驶员或用自动导航仪来控制飞机、舰船或航天飞机等航行体按一定的航线飞行。
  2. 作为稳定器,陀螺仪器能使列车在单轨上行驶,能减小船舶在风浪中的摇摆,能使安装在飞机或卫星上的照相机相对地面稳定等等。
  3. 作为精密测试仪器,陀螺仪器能够为地面设施、矿山隧道、地下铁路、石油钻探以及导弹发射井等提供准确的方位基准。
  • lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed) {

    lastX = x;

    window.addEventListener('devicemotion', deviceMotionHandler, false);

    x = acceleration.x;

}

什么是陀螺仪?

手机上的指南针,其实就是指北针,ios端使用alpha角不对,应该使用webkitCompassHeading来获得真实的旋转角度,真机测试的时候发现使用alpha角,进入界面时候,手机顶部方向对着的方位默认为正北,这明显是不对的;安卓端使用alpha是对的,当然也不支持webkitCompassHeading;W3C上还有关于罗盘航向的计算公式等相关信息和资料,对于这个属性的使用和探索到目前的位置暂时可以了

    y = acceleration.y;

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 JS HTML5