HTML5 实现手机摇一摇

HTML5新增了一些JavaScript API接口，比如地理定位、重力感应等。今天主要介绍devicemotion事件（设备事件），它提供设备的加速信息，表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。本文给大家讲解了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. };

图片来源于网络

完整的实例

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学堂