H5案例分享:html5重力感应事件

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

时间: 2024-11-02 21:34:43

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

html5重力感应事件

if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } var speed = 30;//speed var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData) { var acceleration =event.accelerationIncl

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

今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的效果,并且在运动过程中模拟了重力感应的物理效果.你可以在DEMO演示中来尝试一下. 你也可以在这里查看在线演示 接下来我们来分析一下这款超酷的HTML5重力动画实现的思路及源码,主要由HTML代码和Javascript代码组成. HTML代码: <div id="canvas">

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

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

《开发之旅》学习笔记:重力感应事件

监听事件的时候使用的是是cc.eventManager.addListener,包含两个参数,一个是监听的事件,一个是节点. 第一个参数对象中,除了触发事件外,要声明是何种event 重力感应事件有两个返回参数accelerometerInfo以及event 一下DEOMO为一个重力感应小球运动 /* 重力感应 事件 */ var AccelerometerLayer = cc.Layer.extend({ ctor: function () { this._super(); var winSi

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detect

移动端html5重力感应

下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test.html 重力感应主要用到两种事件: 1 orientationchange 这个事件在屏幕发生翻转时触发 window.orientation可获得设备的方向,一共有三个值0:竖直,   90:右旋,   -90:左旋 2 deviceorientation 和 MozOrientation(fi

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

移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发.touchmove: //在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止滚动.touchend: //从屏幕上移开

H5案例分享:移动端touch事件判断滑屏手势的方向

移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 思路:用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动:X的结果如果负数,则说明手指是从右往左划动:Y的结果如果正数,则说明手指是从

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

html5移动开发细微之美 1.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2.忽略将页面中的数字识别为电话号码 <meta name="format-detection"