h5 android 重力 晃动,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演示
h5 android 重力 晃动,H5案例分享:html5重力感应事件(示例代码)相关推荐
- js 年会大屏_年会H5大屏互动游戏案例分享
原标题:年会H5大屏互动游戏案例分享 利用h5制作年会互动小游戏越来越火爆了,今天小编就给大家推荐两个年会h5案例,希望能给大家的设计带来灵感,参考网站:hui.cdlchd.com. 案例一:201 ...
- Android Native crash 处理案例分享
简介:Android Native crash 处理案例分享 1. 背景 目前 mPaas[1] Android使用Crash SDK对闪退进行的处理,CrashSDK 是 Android 平台上一款 ...
- 百叶窗设计原理 html5,Html5百叶窗效果的示例代码_html5教程技巧
本篇文章主要介绍了Html5百叶窗效果的示例代码,小编觉得挺不错的,现在分享给大家HTML5源码和解释,也给大家做个参考.对HTML5感兴趣的小伙伴可以一起跟随小编过来看看吧 本文介绍了Html5百叶 ...
- html常规的布局模版,html5/css3常规布局(示例代码)
简介这篇文章主要介绍了html5/css3常规布局(示例代码)以及相关的经验技巧,文章约2644字,浏览量165,点赞数6,值得推荐! content="initial-scale=1.0, ...
- uni-app - 最详细 H5 网页接入微信支付功能,提供从详细的示例代码与注释(移动端网页实现微信支付能力,微信公众号前端支付 JSAPI / JS-SDK 详细示例源码)官方最新超级详细教程
前言 关于 uni-app 项目中接入微信支付的文章鱼龙混杂,各种 JSAPI / JS-SDK 乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现 ...
- android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
- android原生代码转h5,Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。...
当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID: 大概就是点击H5界面跳转到Androi ...
- Android APP加固混淆案例分享(解决风险提示问题)
由于第一次用 AI2 开发安卓应用程序,第一次发现有编程入门不拿 Hello world 招呼人的,很是意外,也令人欣慰.随手撸了几个 Demo ,打包,下载,安装到手机,发现居然有风险提示. 若应用 ...
- Android之android studio如何把项目分享到github并提修改的代码到Github
android studio如何提交代码到Github 第一步.下载git 第二步:在android studio指定git路径 Fil ...
- unity Android 剪贴板,Unity移动端的复制要这么写示例代码
前言 Unity官网提供了详尽的文档和丰富的教学视频,昨天跟着视频做了一个简单的3d游戏"roll-a-ball".游戏涉及了许多Unity的基本知识,用来入门很不错. 本文主要给 ...
最新文章
- matlab pup,matlab利用bar函数画不同颜色直方图
- 雷观(十七):想拉人入伙,合伙创业,请拿出一点认真的态度
- CSS深入理解学习笔记之overflow
- centos6查看java命令_centos6.5下常见命令和操作
- [IE9] 开发IE9上的屏幕取词功能
- 【转载】输出二进制 C
- LintCode 795. 4种独特的路径(DFS)
- QT 010 Qt 4.2 在线手册含UML图解释 User's Guide Documentation
- 应用keyup监测输入框兼容IE处理
- Jenkins控制台出现中文乱码
- ESET NOD32激活码/许可证密钥/用户名密码
- Python Excel 批量生成二维码
- 陈耀烨九段加冕新名人见证实录
- cocos2dx腾讯实时语音sdk接入
- Java后端开发工程师简历加分项:个人在线简历的搭建
- CA认证简单介绍与工作流程
- Javaweb-01.html和css
- ORB_SLAM2源码阅读(三)相机定位
- 经典语录:二十不勤,三十不立,四十不富,五十而衰靠子助
- 什么是推荐系统与常见的推荐系统评价指标
热门文章
- 浅谈混迹力扣和codeforces上的几个月
- 《德鲁克管理思想精要》读书笔记7 - 如何做人
- 阿里乾坤qiankun
- elite php,Elite Chat (开源在线客服系统)
- 新年贺卡用python_Photoshop 一张简洁的新年贺卡制作方法
- OpenFeign报文内容大报错: {“code“:1,“msg“:“JSON parse error: Illegal character ((CTRL-CHAR, code 31))
- 抖音云控系统领先品牌
- 【RuoYi-Vue-Plus】扩展笔记 01 - 集成 JavaMail 发送邮件(源码)
- SCI论文结构化阅读法
- 谈谈写程序与学英语 --宋劲杉