javascript html5摇一摇功能的实现


Posted in Javascript onApril 19, 2016

通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份。
知识要点 

1、DeviceMotionEvent
    这是html5支持的重力感应事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html
事件介绍:
deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。
compassneedscalibration 用于通知Web站点使用罗盘信息校准上述事件。

 

2、事件简介
 window.addEventListener("deviceorientation",function(event){// 处理event.alpha、event.beta及event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0};

这是 deviceorientation事件返回的参数,为了获得罗盘指向,可以简单的使用360度减去alpha。若设被平行于水平表面,其罗盘指向为(360 - alpha)。 若用户手持设备,屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90,alpha和gamma无关。 用户手持设备,面向alpha角度,屏幕处于一个垂直屏幕,屏幕顶端指向右方,则其方向信息如下

{alpha:270- alpha,
 beta:0,
 gamma:90};

 注册一个devicemotion事件的接收器:

window.addEventListener("devicemotion",function(event){// 处理event.acceleration、event.accelerationIncludingGravity、// event.rotationRate和event.interval},true);

 

 将设备安置于车辆之上,屏幕处于一个垂直平面,顶端向上,面向车辆后部。车辆行驶速度为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}};

 功能实现

if(window.DeviceMotionEvent){
 window.addEventListener('devicemotion', YaoYiYao,false);
 }
 var speed =30;//speed
 var x = y = z = lastX = lastY = lastZ =0;
 function YaoYiYao(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(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 }

首先判断浏览器是否支持该事件。
YaoYiYao用来检测是否对手机进行摇动操作,具体就是获取手机的的移动数据,将其存在一个外部变量中,当下次又触发摇动事件时,判断上次的摇动坐标 和现在的摇动坐标 是否处于一个频繁调动的范围:Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed
基本上 满足这种条件的话,就是手机正处于摇动状态,在if语句里面添加进你要执行的摇一摇代码即可。

以上就是html5摇一摇功能的实现思路,希望对大家的学习有所帮助。

Javascript 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
一个简单的node.js界面实现方法
Jun 01 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
node.js通过url读取文件
Oct 16 Javascript
一些实用性较高的js方法
Apr 19 #Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 #Javascript
JavaScript中创建对象的模式汇总
Apr 19 #Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 #Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 #Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 #Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
You might like
PHP has encountered an Access Violation
2007/01/15 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Java及python正则表达式详解
2017/12/27 Python
使用python编写监听端
2018/04/12 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
旅游活动总结
2014/08/27 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
2015年党员自评材料
2014/12/17 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书