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 条评论
登录 后参与评论

相关文章

来自专栏Crossin的编程教室

【每周一坑】蜥蜴流感与贝叶斯定理

春季是流感的高发季节。不要觉得只是小小的“感冒”,严重起来甚至也会危及生命,而且还没有特效药。因此,身体不适请及时到医院检查。

903
来自专栏老司机的简书

老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制

老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制

692
来自专栏牛客网

CVTE 前端一面面经

【每日一语】在年轻的时候,在那些充满了阳光的长长的下午,我无所事事,也无所惧怕,只因为我知道,在我的生命里有一种永远的等待。挫折会来,也会过去,热泪会流下,也会...

423
来自专栏北京马哥教育

Python新手应该如何练手?知乎5600赞答案告诉你!

作者:小小搬运工 链接:https://www.zhihu.com/question/29372574/answer/88624507 一直在学习python,...

3367
来自专栏偏前端工程师的驿站

Thinking in React Implemented by Reagent

973
来自专栏非典型技术宅

iOS传感器:使用陀螺仪完成一个小球撞壁的小游戏1. 陀螺仪介绍2. 陀螺仪的使用3. 开始我们的小游戏

1044
来自专栏何俊林

FFmpeg开发(一)常用处理视频命令

前言:FFmpeg是做音视频开发的一个优秀的开源库,可以在不同平台下编译,能够实现视频采集、视频格式转化、视频截图、视频添加水印、视频切片、视频录制、视频推流、...

4716
来自专栏Python中文社区

Python破解简书登录极验验证码

專 欄 ❈ treelake ,Python中文社区专栏作者。 博客地址: http://www.jianshu.com/u/66f24f2c0f36 ❈...

3295
来自专栏程序员的碎碎念

GD实战开发验证码

GD GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,在网站上GD库通常用来生成缩略图,或者用来对图片加水印,或者用来生成汉字验证码,或...

3486
来自专栏QQ音乐技术团队的专栏

Android 中图片压缩分析(上)

在 Android 中进行图片压缩是非常常见的开发场景,主要的压缩方法有两种:其一是质量压缩,其二是下采样压缩。

1.1K0

扫描关注云+社区