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

    仿ios删除抖动效果

    思路分析

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

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

    单个抖动

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

    1. var createFun=function($container,name,_split_num){
    2.     var _time=90+Math.sin(Math.random()*Math.PI)*20>>0;
    3.     var FUNC=[
    4.         function(next) {$container.css({transition:'transform '+_time/1000+'s linear',transform: 'translate(.4px, .4px) rotate(4deg)'});setTimeout(next,_time);},
    5.         function(next) {$container.css({transition:'transform '+_time/1000+'s linear',transform: 'translate(-.4px, -.4px) rotate(-4deg)'});setTimeout(next,_time);},
    6.         function(next) {$container.css({transition:'transform '+_time/2000+'s linear',transform: 'translate(0px, -.6px) rotate(0deg)'});setTimeout(next,_time/2);},
    7.         function(next) {$container.css({transition:'transform '+_time/1000+'s linear',transform: 'translate(.4px, -.4px) rotate(4deg)'});setTimeout(next,_time);},
    8.         function(next) {$container.css({transition:'transform '+_time/1000+'s linear',transform: 'translate(-.4px, .4px) rotate(-4deg)'});setTimeout(next,_time);},
    9.         function(next) {$container.css({transition:'transform '+_time/2000+'s linear',transform: 'translate(0px, .6px) rotate(0deg)'});setTimeout(next,_time/2);},
    10.     ];
    11.     if(_split_num){
    12.         var split_num=_split_num;
    13.     }else{
    14.         var split_num=Math.random()*FUNC.length>>0;
    15.     }
    16.     FUNC=FUNC.splice(split_num).concat(FUNC);
    17.     FUNC.push(function(){$(document).queue(name,createFun($container,name,split_num,));$(document).dequeue(name); });
    18.     return FUNC;
    19. }

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

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

    1. $('.stop').on('click', function() {
    2.     if(!names.length){
    3.         alert('请先点击开始抖动');
    4.         return false;
    5.     }
    6.     names.forEach(function(n,i){
    7.         $(document).clearQueue(n);
    8.     });
    9.     names=[];
    10.     $('.unit').each(function(i,n){
    11.         $(n).css({transform: 'translate(0px, 0px) rotate(0deg)'})
    12.     })
    13. });

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

    DEMO下载

    点击下载[0积分]一共下载0
    回到顶部
    我要评论

    所有评论

      相关文章