HTML5 实现手机摇一摇

HTML5新增了一些JavaScript API接口,比如地理定位、重力感应等。今天主要介绍devicemotion事件(设备事件),它提供设备的加速信息,表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。

手机摇一摇的实现思路:

1、检测设备是否支持重力传感;

// 监听运动传感事件,查看是否支持硬件运动
if (window.DeviceMotionEvent) {
    alert("您的设备支持硬件调用");
} else {
    alert("您的设备不支持硬件调用");
}

2、绑定运动传感(devimotion)事件;

window.addEventListener('devicemotion', deviceMotionHandler, false);

3、根据devimotion事件对象,获取三个方向的重力加速度;

/*
* [deviceMotionHandler 摇一摇处理函数]
* @param {[type]} eventData [事件对象]
* @return {[type]} [无返回值]
* @author 刘国利、陈能堡、HTML5学堂
*/
function deviceMotionHandler(eventData){
    // acceleration加速度
    var acceleration = eventData.accelerationIncludingGravity;
    $(".wrap")[0].innerHTML = acceleration.x + " " + acceleration.y + " " + acceleration.z;
}

4、为了防止系统认为简单的变化也是在摇动手机,所以在每隔一段时间进行三个方向值的计算;

// 获取当前时间
curTime = new Date().getTime();
if (curTime - lastTime > 100) {
    // 计算出时间断
    diffTime = curTime - lastTime;
    // 记录上一次的时间
    lastTime = curTime;
 
    // 获取当前的三个方向的值
    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;
 
    // 计算速度,为了防止出现负数,进行绝对值
    speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 10000);
 
    // 记录上一次三个方向的值
    lastX = x;
    lastY = y;
    lastZ = z;
};

5、当计算的该值大于预定的值(阀值),执行相应的操作。

if (speed > SHAKE_THRESHOLD) {
    alert("实现了摇一摇");
};

图片来源于网络

完整的实例

var con = document.getElementById("con");
 
(function(){
    // 监听运动传感事件,查看是否支持硬件运动
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
        alert("您的设备不支持硬件调用");
    }
 
    // 变量初始化
    var x = 0,
     y = 0,
     z = 0,
    lastX = 0,
    lastY = 0,
    lastZ = 0,
curTime = 0,
lastTime = 0,
diffTime = 0,
    speed = 0;
 
    // 设置一个阀值
    var SHAKE_THRESHOLD = 800; // 设定摇晃的阈值为600 运行相应操作
 
    /*
     * 功能:测算三个方向重力加速度,达到一定值进行相应操作
     * 作者:HTML5学堂、刘国利、陈能堡
     *
     */
    function deviceMotionHandler(eventData){
        var acceleration = eventData.accelerationIncludingGravity;
 
        // 获取当前时间
        curTime = new Date().getTime();
        // 计算时间差,当这个差值大于一定值执行计算三个方向的速度
        if ((curTime - lastTime) > 100) {
            // 记录上一次的时间
            diffTime = curTime - lastTime;
            lastTime = curTime;
 
            // 获取当前三个方向的值
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
 
            // 计算速度,为了防止出现负数,进行绝对值
            speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000);
            if (speed > SHAKE_THRESHOLD) {
                alert("我实现摇一摇了");
            };
 
            // 记录上一次三个方向的值
            lastX = x;
            lastY = y;
            lastZ = z;                    
        };
    }
})();

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Data Analysis & Viz

百年百图の中国(1900-1999):另类python爬虫和PIL拼图

标题有点长,也有点怪。前半部分文艺向,后半部分python技术向。目的就是用PIL库得到100张图的拼图(成果图见文末)。

9520
来自专栏落影的专栏

Audio Unit录音(播放伴奏+耳返)

前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使...

49660
来自专栏浅探ARKit

ARKit制作红包雨效果

新年快到了!给大家献上一个3D红包雨效果! #####思路: 1.用scenekit来创建红包模型 先创建一个长方体,此长方体厚度很薄 然后设置模型的cont...

40790
来自专栏iOSDevLog

初试 iOS 11 新框架:Vision Framework 让文字检测变得更容易

69440
来自专栏数据小魔方

Xcelsius(水晶易表)系列2——单值部件

今天专门跟大家分享水晶易表中的一大类部件——单值部件。 单值部件使用频率很高,从它的名称就能猜个大概,它是用来表达单个指标的图表部件。 水晶易表中的单值部件大体...

29450
来自专栏落影的专栏

iOS音视频播放(Audio Unit播放音频+OpenGL ES绘制视频)

前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使...

57390
来自专栏技术/开源

【开源】XPShadow, 用阴影让UWP更有层次感

UWP采用的是纯扁平化的设计,个人感觉极端了点,整个世界都是平的,导致App分不清层次,看不出重点。其实扁平化是趋势,android, ios都在搞,问题是an...

214100
来自专栏zone7

用Python告诉你深圳房租有多高

最近各大一二线城市的房租都有上涨,究竟整体上涨到什么程度呢?我们也不得而知,于是乎 zone 为了一探究竟,便用 Python 爬取了房某下的深圳的租房数据,以...

16300
来自专栏生信技能树

一篇文章学会ChIP-seq分析(上)

写在前面:《一篇文章学会ChIP-seq分析(上)》《一篇文章学会ChIP-seq分析(下)》为生信菜鸟团博客相关文章合集,共九讲内容。带领你从相关文献解读、资...

3.4K60
来自专栏用户2442861的专栏

Pyqt phonon的使用

Qt phonon地址:http://wenku.baidu.com/link?url=nH_dZ8lZbXHy8N5__8jAWLXcuMYf4yRjdCK...

21310

扫码关注云+社区

领取腾讯云代金券