用HTML5实现手机摇一摇的功能的教程


Posted in HTML / CSS onOctober 30, 2012

在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:
1、  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation API的deviceOrientation事件来实现的。
 
用HTML5实现手机摇一摇的功能的教程 用HTML5实现手机摇一摇的功能
其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。
我最开始见到这个功能其实是在PhotoShake里,后来包括微信在内的许许多多、大大小小的应用都加入了这个功能。
用HTML5实现手机摇一摇的功能的教程 用HTML5实现手机摇一摇的功能
如果你曾经做过Android或者iOS开发,对于这样的功能可能非常了解。但是下面,我们将在Web上首次实现这个功能。
让我们赶快开始吧!
DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴:x,y和z(示意如下图所 示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或笔记本键盘,z轴垂直于手机屏幕或笔记本键盘)。因为有些设备可能没有硬件来排除重力的 影响,该事件会返回两个属性,accelerationIncludingGravity(含重力的加速度)和acceleration(加速度),后者 排除了重力的影响。
用HTML5实现手机摇一摇的功能的教程
用HTML5实现手机摇一摇的功能
我们先来监听运动传感事件。

复制代码
代码如下:

[javacript]
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
[/javascript]
然后获取含重力的加速度。
[javacript]
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
}
[/javascript]</p> <p>

下面就涉及到我们如何计算用户摇晃手机的原理了。考虑的要点如下:
1、  用户大多时候都是以一个方向为主晃动手机来进行摇动;
2、  在晃动时三个方向的加速度数据必定都会变化;
3、  我们不能误判手机正常的运动行为,想一想,如果你的手机放在裤兜里,走路时它也会有加速度数据变化。
综上,我们应该针对三个方向的加速度进行计算,间隔测量它们,考察它们在固定时间段里的变化率,而且需要为它确定一个阈值来触发动作。
我们需要定义几个变量来记录历史x、y、z轴的数据以及上一次触发的时间。核心方法实现代码如下:

复制代码
代码如下:

var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = newDate().getTime();
if ((curTime - lastUpdate)> 100) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {
alert("shaked!");
}
last_x = x;
last_y = y;
last_z = z;
}
}

由此我们完成了手机摇一摇的功能,是不是非常简单?

HTML / CSS 相关文章推荐
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 #HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 #HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 #HTML / CSS
input元素的url类型和email类型简介
Jul 11 #HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 #HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 #HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 #HTML / CSS
You might like
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php获取参数的几种方法总结
2014/02/18 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
js静态作用域的功能。
2006/12/25 Javascript
JavaScript脚本性能的优化方法
2007/02/02 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
nodeJS微信分享
2017/12/20 NodeJs
详解vue中的computed的this指向问题
2018/12/05 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python实现实时监控文件的方法
2016/08/26 Python
Python2与Python3的区别实例分析
2019/04/11 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
班委竞选演讲稿
2014/04/28 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
小学美术教学反思
2016/02/17 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL