HTML5新增了一些JavaScript API接口，比如地理定位、重力感应等。今天主要介绍devicemotion事件（设备事件），它提供设备的加速信息，表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。
手机摇一摇的实现思路：
1、检测设备是否支持重力传感；
1 // 监听运动传感事件，查看是否支持硬件运动 2 3 if (window.DeviceMotionEvent) { 4 5 alert("您的设备支持硬件调用"); 6 7 } else { 8 9 alert("您的设备不支持硬件调用"); 10 11 }
2、绑定运动传感（devimotion）事件；
1 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
3、根据devimotion事件对象，获取三个方向的重力加速度；
1 /* 2 3 * [deviceMotionHandler 摇一摇处理函数] 4 5 * @param {[type]} eventData [事件对象] 6 7 * @return {[type]} [无返回值] 8 9 * @author 刘国利、陈能堡、HTML5学堂 10 11 */ 12 13 function deviceMotionHandler(eventData){ 14 15 // acceleration加速度 16 17 var acceleration = eventData.accelerationIncludingGravity; 18 19 $(".wrap")[0].innerHTML = acceleration.x + " " + acceleration.y + " " + acceleration.z; 20 21 }
4、为了防止系统认为简单的变化也是在摇动手机，所以在每隔一段时间进行三个方向值的计算；
1 // 获取当前时间 2 3 curTime = new Date().getTime(); 4 5 if (curTime - lastTime > 100) { 6 7 // 计算出时间断 8 9 diffTime = curTime - lastTime; 10 11 // 记录上一次的时间 12 13 lastTime = curTime; 14 15 // 获取当前的三个方向的值 16 17 x = acceleration.x; 18 19 y = acceleration.y; 20 21 z = acceleration.z; 22 23 // 计算速度，为了防止出现负数，进行绝对值 24 25 speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 10000); 26 27 // 记录上一次三个方向的值 28 29 lastX = x; 30 31 lastY = y; 32 33 lastZ = z; 34 35 };
5、当计算的该值大于预定的值（阀值），执行相应的操作。
1 if (speed > SHAKE_THRESHOLD) { 2 3 alert("实现了摇一摇"); 4 5 };
完整的实例
1 var con = document.getElementById("con"); 2 3 (function(){ 4 5 // 监听运动传感事件，查看是否支持硬件运动 6 7 if (window.DeviceMotionEvent) { 8 9 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false); 10 11 } else { 12 13 alert("您的设备不支持硬件调用"); 14 15 } 16 17 // 变量初始化 18 19 var x = 0, 20 21 y = 0, 22 23 z = 0, 24 25 lastX = 0, 26 27 lastY = 0, 28 29 lastZ = 0, 30 31 curTime = 0, 32 33 lastTime = 0, 34 35 diffTime = 0, 36 37 speed = 0; 38 39 // 设置一个阀值 40 41 var SHAKE_THRESHOLD = 800; // 设定摇晃的阈值为600 运行相应操作 42 43 /* 44 45 * 功能：测算三个方向重力加速度，达到一定值进行相应操作 46 47 * 作者：HTML5学堂、刘国利、陈能堡 48 49 * 50 51 */ 52 53 function deviceMotionHandler(eventData){ 54 55 var acceleration = eventData.accelerationIncludingGravity; 56 57 // 获取当前时间 58 59 curTime = new Date().getTime(); 60 61 // 计算时间差，当这个差值大于一定值执行计算三个方向的速度 62 63 if ((curTime - lastTime) > 100) { 64 65 // 记录上一次的时间 66 67 diffTime = curTime - lastTime; 68 69 lastTime = curTime; 70 71 // 获取当前三个方向的值 72 73 x = acceleration.x; 74 75 y = acceleration.y; 76 77 z = acceleration.z; 78 79 // 计算速度，为了防止出现负数，进行绝对值 80 81 speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000); 82 83 if (speed > SHAKE_THRESHOLD) { 84 85 alert("我实现摇一摇了"); 86 87 }; 88 89 // 记录上一次三个方向的值 90 91 lastX = x; 92 93 lastY = y; 94 95 lastZ = z; 96 97 }; 98 99 } 100 101 })();
