html5重力感应事件

一、手机重力感应图形分析

1、设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360)。

设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐。

设备围绕z轴的旋转角度为α,并与先前的x和y轴位置对比,显示x,y轴新坐标为x0和y0。

2、设备围绕x轴的旋转角度为β,β角度的取值范围在(-180,180)。

设备围绕x轴的旋转角度为β,并与先前的y和z轴的位置对比,显示y,z轴新坐标为y0和z0。

3、设备围绕y轴的旋转角度为γ,γ角度的取值范围在(-90,90)。

设备围绕y轴的旋转角度为γ,并与先前的x和z轴的位置对比,显示x,z轴新坐标为x0和z0。


二、事件介绍

1、deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角。

2、devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系中的α坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。

3、compassneedscalibration 用于通知Web站点使用罗盘信息校准上述事件。


三、使用说明

1、 注册一个deviceorientation事件的接收器:

window.addEventListener("deviceorientation", function(event) {

// 处理event.alpha、event.beta及event.gamma

}, true);

2、将设备放置在水平表面,屏幕顶端指向西方,则其方向信息如下:

{alpha: 90,

beta: 0,

gamma: 0};

为了获得罗盘指向,可以简单的使用360度减去alpha。若设被平行于水平表面,其罗盘指向为(360 - alpha)。

3、若用户手持设备,屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90,alpha和gamma无关。 用户手持设备,面向alpha角度,屏幕处于一个垂直屏幕,屏幕顶端指向右方,则其方向信息如下:

{alpha: 270 - alpha,

beta: 0,

gamma: 90};

4、显示自定义UI界面指导用户校准罗盘:

window.addEventListener("compassneedscalibration", function(event) {

alert('您的罗盘需要校准,请将设备沿数字8方向移动。');

event.preventDefault();

}, true);

5、注册一个devicemotion时间的接收器:

window.addEventListener("devicemotion", function(event) {

// 处理event.acceleration、event.accelerationIncludingGravity、

// event.rotationRate和event.interval

}, true);

6、将设备放置在水平表面,屏幕向上,acceleration为零,则其accelerationIncludingGravity信息如下:

{x: 0,

y: 0,

z: 9.81};

7、设备做自由落体,屏幕水平向上,accelerationIncludingGravity为零,则其acceleration信息如下:

{x: 0,

y: 0,

z: -9.81};

8、将设备安置于车辆至上,屏幕处于一个垂直平面,顶端向上,面向车辆后部。车辆行驶速度为v,向右侧进行半径为r的转弯。设备记录acceleration和accelerationIncludingGravity在位置x处的情况,同时设备还会记录rotationRate.gamma的负值:

{acceleration: {x: v^2/r, y: 0, z: 0},

accelerationIncludingGravity: {x: v^2/r, y: 0, z: 9.81},

rotationRate: {alpha: 0, beta: 0, gamma: -v/r*180/pi} };


四、DEMO代码:

if (window.DeviceMotionEvent) { 
  window.addEventListener('devicemotion',deviceMotionHandler, false); 

var speed = 30;//速度
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) { 
  var acceleration =eventData.accelerationIncludingGravity;
     x = acceleration.x;
     y = acceleration.y;
     z = acceleration.z;
     if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
       //简单的摇一摇触发代码
       alert('触发了重力感应');
     }
     lastX = x;
     lastY = y;
     lastZ = z;
}

DEMO演示

H5案例分享:html5重力感应事件的更多相关文章

  1. html5重力感应事件之DeviceMotionEvent

    前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...

  2. html5重力感应事件

    if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); ...

  3. h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  4. HTML5重力感应小球冲撞动画实现教程

    今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的 ...

  5. Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)

    这节我们来学习Cocos2d-x的最后一节.怎样处理重力感应事件.移植到Android后加入再按一次返回键退出游戏等.我这里用的Android.IOS不会也没设备呃 效果图不好弄,由于是要移植到真机上 ...

  6. HTML5 重力感应效果,实现摇一摇效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 移动端html5重力感应

    下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test. ...

  8. H5案例分享:html5移动开发细微之美

    html5移动开发细微之美 1.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=dev ...

  9. H5案例分享:移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

随机推荐

  1. vim配置有竖对齐线

    https://github.com/lvxiaobo616/vim-indent-guides 参考 https://github.com/Yggdroot/indentLine 先安装 Yggdr ...

  2. Altium Designer 15 --- Nets Update

    Now I want to introduce the use of 'Configure Physical Nets', as follows: If you has finished the PC ...

  3. 初始化Git的配置

    如何使用Git上传项目代码到github http://blog.csdn.net/llf369477769/article/details/51917557

  4. jquery selector 基础

    转自:http://www.cnblogs.com/zwl12549/archive/2008/08/09/1264163.html query的这套选择符是比较帅气的,借用了XPath2.0和CSS ...

  5. StringUtils 的常用方法

    StringUtils 方法的操作对象是 Java.lang.String 类型的对象,是 JDK 提供的 String 类型操作方法的补充,并且是 null 安全的(即如果输入参数 String 为 ...

  6. 适可而止:YAGNI原则

    适可而止:You Ain't Gonna Need It YAGNI原则指的是只需要将应用程序必需的功能包含进来,而不要试图添加任何其他你认为可能需要的功能. 在一个软件项目中,往往80%的时间花费在 ...

  7. Java单例模式——并非看起来那么简单

    版权声明:本文为[viclee]原创,如需转载请注明出处~ Java中单例(Singleton)模式是一种广泛使用的设计模式.单例模式的主要作用是保证在Java程序中,某个类只有一个实例存在.一些管理 ...

  8. Git删除tag

    git tag -d v2016062101 删除本地tag git push origin --delete tag v2016062101 删除远程tag

  9. xpath php

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...

  10. 比较oracle数据的表结构

    对比不同用户对象的异同,同时生成sql语句或直接提交到数据库,powerdesinger的比较实在是麻烦. pl/sql为我们提供了很好的工具 在pl/sql中的工具下“比较用户对象”,下即可实现: