H5实现摇一摇技术总结

摇一摇遇到的问题

一、如何对摇晃效果进行反馈

刚开始的处理方式是，摇晃过程中不做任何处理，但后来反馈说这种效果不好，好像就没有摇动一样，如果声音也不响的话，就真的和什么都没发生一样。

后来想了想，加入摇晃过程动画，就像微信的摇一摇一样，摇晃过程中，会有上下移动的动画，这里加入了周围金币做跳跃运动的动画。

二、摇晃不灵敏，需要用力摇晃手机才行

摇晃灵敏度是个不太好控制的量，即要求不是很灵敏，比如，不能稍微碰一下就摇晃了，也不能使劲摇才能摇中，这就需要对X、Y、Z轴上的加速度进行合理利用，这里是几种网上常见的处理方式：

1、计算一段时间中的X、Y、Z轴的平均值：

Math.abs( x + y + z - lastX - lastY - lastZ ) / diffTime * 10000

这种方式在网上最为常见，大多数的示例都采用的该方法。后来看到有人评论此方法可能导致摇一摇并不特别灵敏，比如x为正、y为负，就可能出现抵消的情况。

2、单个方向的加速度差值满足要求即可：

Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed

该方法也是shake库采用的计算方式，不过，该库的计算方式覆盖的更全面一些，也包括了斜向摇晃的判断，该库有近1000个start，使用人数也较多：

this.options.threshold = 15;
deltaX = Math.abs(this.lastX - current.x);
deltaY = Math.abs(this.lastY - current.y);
deltaZ = Math.abs(this.lastZ - current.z);
if ((
    (deltaX > this.options.threshold) && 
    (deltaY > this.options.threshold)) || 
    (
        (deltaX > this.options.threshold) && 
        (deltaZ > this.options.threshold)
    ) || 
    (
        (deltaY > this.options.threshold) && 
        (deltaZ > this.options.threshold))
    ) {}

3、不太普遍的计算方式：

Math.sqrt( 
    ( x - lastX ) * ( x - lastX ) + 
    ( y - lastY ) * ( y - lastY ) + 
    ( z - lastZ ) * ( z - lastZ ) 
) / diffTime * 10000

这种方式类似于求三维空间中任意两点的距离，然后通过距离除以时间，得到速度的变化率，在摇晃过程中摇晃的速度满足条件就表示中奖了。目前来看，这种方式更加科学一点，因为它更能体现出摇一摇的实际情景：摇的快一点，就能摇一摇。

刚开始的时候采用的是第一种计算方式，计算在这一段时间内的平均值，但是在使用的过程中发现并不是很好用，设置的值太小就会比较灵敏，太大又不太灵敏，总是找不到一个合适的值满足条件。后来改用第三种方式，可以得到良好的摇一摇体验。

三、摇晃的同时让手机振动

这个功能在业务中并没有加入，考虑后期优化的时候添加进去，在用户摇晃的过程中也能震动，可以很大的提升用户体验，让手机震动，通过如下API：

navigator.vibrate

特征检测：

var supportsVibrate = "vibrate" in navigator;

使用方法：