通过手机Web实现手机摇一摇的功能
经常我们玩微信都会用到查到附近的人，都是在app上实现手机摇一摇的功能。现在，我们将此技术搬移到手机web上，供大家学习，主要是用到HTML5的重要特性就是DeviceOrientation：官方文档
它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：
deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。
deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
使用它我们能够很容易的实现重力感应、指南针等有趣的功能，在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation API的deviceOrientation事件来实现的。
让我们赶快开始吧！
DeviceMotionEvent（设备运动事件）返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴：x，y和z（示意如下图所 示，x轴横向贯穿手机屏幕或者笔记本键盘，y轴纵向贯穿手机屏幕或笔记本键盘，z轴垂直于手机屏幕或笔记本键盘）。因为有些设备可能没有硬件来排除重力的 影响，该事件会返回两个属性，accelerationIncludingGravity（含重力的加速度）和acceleration（加速度），后者 排除了重力的影响。
我们先来监听运动传感事件。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
然后获取含重力的加速度。
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
}
下面就涉及到我们如何计算用户摇晃手机的原理了。考虑的要点如下：
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("你摇了!");
}
last_x = x;
last_y = y;
last_z = z;
}
}
完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>手机web摇一摇</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 定义预准备函数
var imgs = new Array(
'http://www.baidu.com/img/baidu_jgylogo3.gif', // 百度logo
'http://tongji.cnzz.com/static/img/main/cnzz-logo.gif', // cnzz logo
'http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png', // QQ logo
'http://163css.com/myweb/hihilinxuan/template/index/images/logo.gif', // 163logo
'http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png' // 新浪logo
);
// 判断手机是否运动支持传感器
if (window.DeviceMotionEvent) {
var speed = 25; // 定义默认加速度，达到这个速度才执行摇一摇 // x,y 表示当前的左边，
// lastX,lastY 表示摇一摇后最后停留的坐标
var x = y = z = lastX = lastY = lastZ = 0;
// 监听设备运动事件
window.addEventListener('devicemotion', function () {
var acceleration = event.accelerationIncludingGravity; // 获取设备的加速度
x = acceleration.x; // 获取加速度的x轴，用于计算水平水平加速度
y = acceleration.y; // 获取加速度的y轴，用于计算垂直方向的加速度，同时计算正玄值 // 计算当前的加速度是否大于默认加速度
if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
// 摇一摇换logo
$('body').css('background', 'url(' + imgs[Math.round(Math.random() * 10) % 5] + ') no-repeat center 120px');
}
// 重新记录最后一次值，作为下一次开始坐标
lastX = x;
lastY = y;
}, false);
}
})
</script>
</head>
<body>
<div class="picbox" id="picbox"><h1>手机摇一摇，改变LOGO</h1></div>
</body>
</html>
在手机上打开就可以，别忘了引用jquery,当然可以直接直接修改原生js。
看完此文章，你是否会了，是否有更多想法了？
通过手机Web实现手机摇一摇的功能的更多相关文章
- 用HTML5实现手机摇一摇的功能(转)
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...
- h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃
DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...
- iOS摇一摇手机，播放微信摇一摇音效
实现微信摇一摇播放音效,代码如下:- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{ if (motio ...
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- 手机摇一摇效果-html5
1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- html5 DeviceOrientation来实现手机网站上的摇一摇功能
原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...
- 监听手机晃动（摇一摇）SensorEventListener
import android.content.Context; import android.hardware.Sensor; import android.hardware.SensorEvent; ...
- iOS 手机摇一摇功能
调用手机摇一摇功能其实很简单,在你调用的控制器的 viewDidLoad方法里调用 [UIApplication sharedApplication].applicationSupportsShake ...
随机推荐
- 十六、Struts2文件上传与下载
文件上传与下载 1.文件上传前提:<form action="${pageContext.request.contextPath}/*" method="post& ...
- 双人对战的球类游戏IOS源码
双人对战的球类游戏源码,这个是一款双人对战的ios球类游戏源码,游戏的源码也比较详细的,我们在屏幕上下看到各有一个球门,内有一球,两边通过控制轮盘使球进入对方的球门的,其实玩法也很简单的,我们知道体育 ...
- Linux 不挂载设备，获取设备的文件系统信息
块设备挂载后,可以通过df 或者 mount命令查看设备的文件系统信息.然而,有时候需要在不挂载设备的情况下予以判断,此时可以使用如下的方法: (1)查看文件系统类型 命令: file -sL /de ...
- 修改Hosts后对火狐不起作用解决办法
修改Hosts后对火狐不起作用: 重启火狐浏览器仍不起作用的话,执行下面操作即可. FireFox - 选项 - 高级 - 网络 - 立即清除(缓存) 就解决了
- mysql实体关系(mysql学习五)
实体关系 表设计 1:1 两个实体表内,存在相同的主键字段 如果记录的主键值等于另一个关系表内记录的主键值,则两条记录的对应为一一对应 优化上称为垂直分割 1:n 一个实体对应多个其他实体(一个班级 ...
- mysql之数据库基本概念(mysql学习笔记一)
数据库系统 数据库管理系统(DBMS)+数据库(DATABASE)(+数据库管理员) DBS=dbms+db 定义: 大量信息进行管理的高效解决方案,按照数据结构来组织.存储和管理数据的仓库 关系 ...
- php 安装pdo_mysql 扩展
如果pdo在linux下出现exception 'PDOException' with message 'could not find driver'则问题是php编译时少加--with-pdo-my ...
- 升级Mac X Mavericks MacMiv 无法启动
今天把Mac 系统升级到了 Mac X Mavericks ,确实有不少的惊喜.虽然体验不出Mac X Mavericks拥有更强的性能/更好的电池表现,但是新版的Safari浏览器的提供了更方便的主 ...
- sql server 跨库操作
SELECT *FROM OPENDATASOURCE('SQLOLEDB','Data Source=sql服务器名;User ID=用户名;Password=密码;').PersonDb.dbo. ...
- UCOS2_STM32F1移植详细过程（二）
Ⅰ.概述 打开上一篇文章新建的工程,是提取的ST标准库里面源代码文件和UCOS工程包源代码文件.下载过的朋友可能会知道,直接编译那个工程会有大片的错误和警告,原因在于那个工程是没有经过修改源代码的工程 ...