用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实现Material Design效果
Mar 09 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP实现图片压缩
2020/09/09 PHP
JavaScript的Function详细
2006/11/14 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python中用Spark模块的使用教程
2015/04/13 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Selenium的使用详解
2018/10/19 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
yy生日主持词
2014/03/20 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
奔腾年代观后感
2015/06/09 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
Java 超详细讲解hashCode方法
2022/04/07 Java/Android