经常我们玩微信都会用到查到附近的人，都是在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实现手机摇一摇的功能的更多相关文章

  1. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  2. h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  3. iOS摇一摇手机，播放微信摇一摇音效

    实现微信摇一摇播放音效,代码如下:- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{    if (motio ...

  4. 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

      介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...

  5. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  6. 手机摇一摇效果-html5

    1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. html5 DeviceOrientation来实现手机网站上的摇一摇功能

    原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...

  8. 监听手机晃动（摇一摇）SensorEventListener

    import android.content.Context; import android.hardware.Sensor; import android.hardware.SensorEvent; ...

  9. iOS 手机摇一摇功能

    调用手机摇一摇功能其实很简单,在你调用的控制器的 viewDidLoad方法里调用 [UIApplication sharedApplication].applicationSupportsShake ...

随机推荐

  1. Python之路【第八篇】：堡垒机实例以及数据库操作

    Python之路[第八篇]:堡垒机实例以及数据库操作   堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 SSHClient ...

  2. 设计模式-适配器模式(Adapter)

    简介: 适配器模式在我看来是最无聊的一种模式,因为他根本不是一种新的创意模式,而是一种不得已而为之的模式.就算不学适配器模式,在具体应用场景中也会自然而然的想到这种解决方案. 张三在英国留学时买了个笔 ...

  3. Arch 安装步骤

    1.CFDISK 命令分区 一个主分区和一个逻辑分区 2.partprobe /dev/sdx 刷新分区表 3.mkfs 4. 5. 6.>dhcpcd 7. 8. 9. 10. 11. 12. ...

  4. ajax翻页效果模仿yii框架

    ajax翻页效果,模仿yii框架. 复制代码代码如下: <!DOCTYPE html>  <html>  <head>  <title>ajax分页_w ...

  5. STM32F4_USART配置及细节描述

    Ⅰ.概述 关于USART串口通信,可以说是MCU的标配.不管是在实际项目应用中,还是在开发过程中,它都起着很重要的作用. 在项目应用中我们常常使用UART串口进行通信,根据通信的距离及稳定性,还选择添 ...

  6. python 小技巧(import模块、查询类继承关系、安装包)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在这里列举一些我使用Python时积累的小技巧.这些技巧是我在使用Python过程 ...

  7. Unicode字符以16进制表示

    int(x [,base ])         将x转换为一个整数 long(x [,base ])        将x转换为一个长整数 float(x )               将x转换到一个 ...

  8. Telerik XML 数据源绑定的问题

    Telerik GridView 默认的 XElement 数据源的直接绑定,会导致内置的sort, filter ,group等功能无法使用. 原因在于Telerik GridView的那些功能是根 ...

  9. Ajax-goahead局部刷新页面

    软件开发最常用的方法是:C/S,B/S.如果嵌入式设备中使用Ajax,那么既可以使用C/S方式,也可以使用B/S开发上位机.最近公司的一个项目需要异步获取后台数据,使用form更新数据时会有空白卡顿不 ...

  10. XMLCDataSection

    XmlCDataSection类描述XML数据中的CDATA节.CDATA节在XML数据中的作用是为文本内容定义引号和转义符,即XML解析器不解析CDATA中的任何字符. XmlCDataSectio ...