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

仿ios删除抖动效果

思路分析

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

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

单个抖动

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

var createFun=function($container,name,_split_num){
    var _time=90+Math.sin(Math.random()*Math.PI)*20>>0;
    var FUNC=[
        function(next) {$container.css({transition:'transform '+_time/1000+'s linear',transform: 'translate(.4px, .4px) rotate(4deg)'});setTimeout(next,_time);},
        function(next) {$container.css({transition:'transform '+_time/1000+'s linear',transform: 'translate(-.4px, -.4px) rotate(-4deg)'});setTimeout(next,_time);},
        function(next) {$container.css({transition:'transform '+_time/2000+'s linear',transform: 'translate(0px, -.6px) rotate(0deg)'});setTimeout(next,_time/2);},
        function(next) {$container.css({transition:'transform '+_time/1000+'s linear',transform: 'translate(.4px, -.4px) rotate(4deg)'});setTimeout(next,_time);},
        function(next) {$container.css({transition:'transform '+_time/1000+'s linear',transform: 'translate(-.4px, .4px) rotate(-4deg)'});setTimeout(next,_time);},
        function(next) {$container.css({transition:'transform '+_time/2000+'s linear',transform: 'translate(0px, .6px) rotate(0deg)'});setTimeout(next,_time/2);},
    ];
    if(_split_num){
        var split_num=_split_num;
    }else{
        var split_num=Math.random()*FUNC.length>>0;
    }
    FUNC=FUNC.splice(split_num).concat(FUNC);
    FUNC.push(function(){$(document).queue(name,createFun($container,name,split_num,));$(document).dequeue(name); });
    return FUNC;
}

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

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

$('.stop').on('click', function() {
    if(!names.length){
        alert('请先点击开始抖动');
        return false;
    }
    names.forEach(function(n,i){
        $(document).clearQueue(n);
    });
    names=[];
    $('.unit').each(function(i,n){
        $(n).css({transform: 'translate(0px, 0px) rotate(0deg)'})
    })
});

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

DEMO下载

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

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

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

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字