仿ios删除抖动效果

    iphone手机上长按图标会出现一个所有图标抖动的效果，今天就来用网页做一个简单的图标抖动效果，先看看效果

仿ios删除抖动效果

思路分析

    其实这里重要的是要作出一个摇摆的动画，当然，这里做了一个简单的摇摆动画，大致如下:

        这个其实走的是一个类似画八字的一个形状，右下->左上->右上->左下（上图的3,6分别在中线位置停留了一段），同时四个角都有一些倾斜度，单个的效果大致如下:

单个抖动

        不过单个抖动是可以做，不过如果有很多都要抖动，并且抖动的都不一样就比较麻烦了，这里用到jquery的quene，将animation中的每一步都写成一个步骤，将所有的动画组合成队列，如果需要搞不同的摇摆，我们只需要从动画队列中的某一个（随即）开始摇摆就好了。

        上面代码中的split_num就是获取每次开始的位置，这个位置是随机的；同时每个摇摆的时间也是随机的，通过_time控制，注意最后的FUNC.push里面的内容，这个是为了做无限循环队列的，当一个队列执行完了，我们又将新的数组内容放入其中。

如果是暂停动画，我们只需要利用clearQuene清除所有的队列内容就好了

        如果你想做的更好，可以优化这里的摆动动画，摆动动画做的越好，效果也就越好。

        原文地址:http://qiutianaimeili.com/html/page/2018/07/33oa5gwacnp.html