不同时间的序列循环动画

Question

动画已经拍摄，但我需要让这个光环如下：

1) Visitor arrives - halo is completely off
2)After 1 second the halo flickers quickly (3-4 flickers) then is full bright (no flicker)
3) After 1 second we get  flicker again 2-3 flickers then returns to full bright.
4) Halo remains full bright - no cycling to 1

jQuery

var haloRob = ".halo";

    function flash(){
        var del = Math.floor((Math.random()*300)+10);
        $(haloRob).toggleClass("display-halo").delay(del);
        $(haloRob).promise().done(function(){
            flash();
        });
    }

$(haloRob).animate({'marginTop': '27px', opacity: 1}, 1000, flash());

小提琴

Answer 1

让您的闪光灯进行倒计时，并在完成指定数量的关闭/开启周期时调用回调。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/A5YqV/7/

var haloRob = ".halo";

function flash(count, callback) {
    if (count > 0) {
        var del = Math.floor((Math.random() * 300) + 10);
        $(haloRob).toggleClass("display-halo").delay(del);
        $(haloRob).promise().done(function () {
            flash(count - 1, callback);
        });
    }
    else
    {
        if (callback) {
            callback();
        }
    }
}

$(haloRob).animate({
    'marginTop': '27px',
    opacity: 1
}, 1000, function () {
    flash(~~((Math.random() * 1 + 3)) * 2, function(){
        setTimeout(function(){flash(~~((Math.random() * 1 + 2)) * 2, function(){
            alert("done");
        });}, 1000);
    })
});

注：~~只是将浮点数转换为整数的一种简单方法。

*注:随机计数必须加倍，以确保最终状态为“开启”。

代码可以进一步简化，但应该会使您朝着正确的方向前进。