通过手机Web实现手机摇一摇的功能

最新推荐文章于 2024-04-24 09:22:16 发布

weixin_30414155

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量147

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wln3344/p/4436873.html

版权

经常我们玩微信都会用到查到附近的人，都是在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。

看完此文章，你是否会了，是否有更多想法了？

转载于:https://www.cnblogs.com/wln3344/p/4436873.html

weixin_30414155

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过手机Web实现手机摇一摇的功能

经常我们玩微信都会用到查到附近的人，都是在app上实现手机摇一摇的功能。现在，我们将此技术搬移到手机web上，供大家学习，主要是用到HTML5的重要特性就是DeviceOrientation：官方文档它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，...
复制链接

扫一扫