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 平台上一款 ...
- android原生代码转h5,Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。...
当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID: 大概就是点击H5界面跳转到Androi ...
- Android APP加固混淆案例分享(解决风险提示问题)
由于第一次用 AI2 开发安卓应用程序,第一次发现有编程入门不拿 Hello world 招呼人的,很是意外,也令人欣慰.随手撸了几个 Demo ,打包,下载,安装到手机,发现居然有风险提示. 若应用 ...
- html5 360 重力 感应,H5案例分享:html5重力感应事件
html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...
- html5源码 母亲节,母亲节H5:非常有创意的5款母亲节H5案例分享
节日类 有些事情是无法用言语表达的,就比如对母亲的爱,我相信很少有人会经常对母亲说:我爱你,这也是因为国人太过于腼腆的原因.既然没办法用言语来表示对母亲的爱,或许下面这些母亲节H5案例是一个不错的表达 ...
- H5案例分享—你的数学是语文老师教的吗?
教育类H5游戏已经被广泛应用,很多教育软件都采用H5游戏形式向玩家传递知识,金豆微游戏为大家倾情奉献H5数学游戏,测一测你的数学能力有多高,众多的数学算术题,你能答对几题呢,赶紧来挑战一下吧! 游戏需 ...
- h5页面移动端的社会化分享_Adobe年尾续运H5页面
好看的H5层出不穷 小编的压力越来越大 头发变得越来越稀少 但这都不是重点 重点是 我们应该怎么学会操作和应用呢 1. H5页面是什么 首先,H5这个词,来自"HTML5",且是国 ...
- Android SDK 的 H5 打通方案演进 | 数据采集
一.前言 近年来,混合开发越来越流行,App 与 H5 的打通需求也越来越迫切. 那什么是 App 与 H5 打通呢? 所谓 "打通",是指 H5 集成 JavaScript 数据 ...
- Android WebView 支持H5图片上传input type=file
2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...
最新文章
- SqlConnection的open打开后没关闭的后果
- rocketmq 消息 自定义_rocketMq-Topic创建过程
- ShowAllPic--图片
- BufferedInputStream_字节缓冲输入流
- 用“谬论”指挥研究方向数十年,是谁让“老年痴呆”至今仍是绝症?
- mysql索引使增删变慢_mysql优化(四)–索引
- 手把手搭建一个容器化+代理网关+可视化管理环境
- Vue3 --- axios 简单封装APi
- Python笔记-房贷计算(本息和本金,每月还利息和每月还本金)及作图对比
- m_Orchestrate learning system---二十二、html代码如何变的容易
- 使用计算机的硬件及参数,硬件参数怎么看?如何选配电脑硬件?
- 【文文殿下】[BZOJ4008] [HNOI2015] 亚瑟王
- Flex请求Php端的奇怪现象
- C语言如何使用三角函数
- linux系统的负载
- 塔防三国志服务器维护时间,《塔防三国志》停服公告
- 前端开发和后端开发哪个难学
- Microsoft Office 2021 for mac v16.54 微软office办公套件
- presson绘图练习
- Quantopian自学笔记02
热门文章
- CentOS7/rhel7 T440P 控制散热风扇转速等级
- FineReport 11.0 帆软报表 授权文件 补丁
- cubieboard mysql_【Linux】【笔记】Cubieboard开发板Debian系统+SAMBA共享+远程迅雷Xware+Nginx+PH......
- SICP 第一章的练习
- 通过get和post访问HTTP接口的方法
- docker 安装 Nginx 并配置反向代理
- 四季清果·体内净化三部曲
- Android 学习笔记(6)之Lambda和注解
- 【Cisco Packet Tracer--error】192.168.0.1overlaps with Internet
- 英国加入亚投行是顺从中国还是想玩无间道?