HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5高级知识 ——> HTML5 重力感应 实现手机摇一摇

HTML5 重力感应 实现手机摇一摇

2015/08/17 15:44:03 | 作者:HTML5学堂(码匠) | 分类:HTML5高级知识 | 关键词:HTML5,硬件调用,重力感应,摇一摇

HTML5 实现手机摇一摇

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

HTML5 实现手机摇一摇

欢迎沟通交流~HTML5学堂

手机摇一摇的实现思路:

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

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

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

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

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

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

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

  1. // 获取当前时间
  2. curTime = new Date().getTime();
  3. if (curTime - lastTime > 100) {
  4.     // 计算出时间断
  5.     diffTime = curTime - lastTime;
  6.     // 记录上一次的时间
  7.     lastTime = curTime;
  8.  
  9.     // 获取当前的三个方向的值
  10.     x = acceleration.x;
  11.     y = acceleration.y;
  12.     z = acceleration.z;
  13.  
  14.     // 计算速度,为了防止出现负数,进行绝对值
  15.     speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 10000);
  16.  
  17.     // 记录上一次三个方向的值
  18.     lastX = x;
  19.     lastY = y;
  20.     lastZ = z;
  21. };

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

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

HTML5 实现手机摇一摇

图片来源于网络

完整的实例

  1. var con = document.getElementById("con");
  2.  
  3. (function(){
  4.     // 监听运动传感事件,查看是否支持硬件运动
  5.     if (window.DeviceMotionEvent) {
  6.         window.addEventListener('devicemotion', deviceMotionHandler, false);
  7.     } else {
  8.         alert("您的设备不支持硬件调用");
  9.     }
  10.  
  11.     // 变量初始化
  12.     var x = 0,
  13.      y = 0,
  14.      z = 0,
  15.     lastX = 0,
  16.     lastY = 0,
  17.     lastZ = 0,
  18. curTime = 0,
  19. lastTime = 0,
  20. diffTime = 0,
  21.     speed = 0;
  22.  
  23.     // 设置一个阀值
  24.     var SHAKE_THRESHOLD = 800; // 设定摇晃的阈值为600 运行相应操作
  25.  
  26.     /*
  27.      * 功能:测算三个方向重力加速度,达到一定值进行相应操作
  28.      * 作者:HTML5学堂、刘国利、陈能堡
  29.      *
  30.      */
  31.     function deviceMotionHandler(eventData){
  32.         var acceleration = eventData.accelerationIncludingGravity;
  33.  
  34.         // 获取当前时间
  35.         curTime = new Date().getTime();
  36.         // 计算时间差,当这个差值大于一定值执行计算三个方向的速度
  37.         if ((curTime - lastTime) > 100) {
  38.             // 记录上一次的时间
  39.             diffTime = curTime - lastTime;
  40.             lastTime = curTime;
  41.  
  42.             // 获取当前三个方向的值
  43.             x = acceleration.x;
  44.             y = acceleration.y;
  45.             z = acceleration.z;
  46.  
  47.             // 计算速度,为了防止出现负数,进行绝对值
  48.             speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000);
  49.             if (speed > SHAKE_THRESHOLD) {
  50.                 alert("我实现摇一摇了");
  51.             };
  52.  
  53.             // 记录上一次三个方向的值
  54.             lastX = x;
  55.             lastY = y;
  56.             lastZ = z;                    
  57.         };
  58.     }
  59. })();

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端