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

仿ios删除抖动效果 gif 仿ios删除抖动效果

思路分析

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

background Layer 1 1 2 3 4 5 6

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

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

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

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

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

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字