文章目录

我们可以使用js来实现类似微信的摇一摇功能,实际上远离和微信的摇一摇一样,都是使用accelerometer加速度计 来试试判断某个时间段的加速度轨迹。

首先我简单做了个摇一摇的界面摇一摇界面

附摇一摇代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
(function shakeListener(){
var SHAKE_THRESHOLD = 3000;
var last_update = 0;
var x= 0,y= 0,z= 0,last_x= 0,last_y= 0,last_z=0;
var watchId;

window.listenShake = function(shake_threshold){
if(!isNaN(shake_threshold))SHAKE_THRESHOLD = parseInt(shake_threshold);
if (window.DeviceMotionEvent) {// 判断设备标准javascript是否支持加速度API
window.addEventListener('devicemotion',deviceMotionHandler, false);
return true;
} else if(device.isAccelerometerAvailable){ // 如果不支持则判断是否扩展该功能(这个是cordova的扩展方法,其他扩展可以自己再加判断)
watchId = navigator.accelerometer.watchAcceleration(deviceMotionHandler,null,{frequency: 100});
return true;
}
return false;// 不如果不支持会返回false。
};

window.unListenShake = function(){
window.removeEventListener('devicemotion',deviceMotionHandler, false);
if(watchId)navigator.accelerometer.clearWatch(watchId);
watchId = null;
};

function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity || eventData;
var curTime = new Date().getTime();
if ((curTime - last_update)> 100) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {// 抛出shake事件到window
var event = document.createEvent('HTMLEvents');
event('shake',false);
window.dispatchEvent(event);
}
last_x = x;
last_y = y;
last_z = z;
}
}
})();

上面这段代码在window,上扩展了开始/停止 摇一摇监听的方法 (listenShake/unListenShake)。
SHAKE_THRESHOLD 默认为3000,这个属性决定摇一摇事件触发的灵敏度,listenShake开始监听后只要发生满足条件的摇动就会触发在window上触发一个 shake 事件!

使用案列
1
2
3
4
5
function onShake(){
alert('啊,我在摇摆!');
window.removeEventListener("shake",onShake);// 摇一次后停止监听,如果要一直监听则无需移除事件
}
window.addEventListener("shake",onShake);

当然我们还可以加写好玩的东西,比如我项目中我就加入了类似微信的摇一摇声音 duang duang ! 特带感(声音播放使用Audio标签来播放,如果是phonegap或cordova可以使用多媒体API来播放)。
或者通过改变灵敏度来实现一些特别好玩的功能,如摇一摇强度控制

这个API比较耗电,还有一直的监听对资源消耗也有点高,所以当我们离开摇一摇页面的时候最好把监听关掉。

此文是本站原创,转载请标注作者和链接出处!