Raphael js链接动画

时间:2013-03-28 09:05:47

标签: raphael

我试图强制一个动画在另一个结束后开始,根据文档,我应该包含一个回调函数,应该在动画结束时调用。

然而,两个动画同时进行......我做错了什么?

http://jsfiddle.net/yBehH/

$(document).ready(function () {
    function drawBonuses() { 
        bonus = [3, 9, 10, 17];
        $.each(bonus,function(i,v) {
            gameboard.circle( v*20+20, 20, 0).animate( { fill: "#f00", r: 5 } , 100);
        });
    };

    gameboard = Raphael("gameboard", 440, 440);
    gameboard.clear();
    gameboard.rect(200, 200, 0, 0, 5).animate({fill: "#fff", height: 400, width: 400, x:20, y:20, stroke: "#000", "stroke-width": 20}, 2000, drawBonuses());
});

当电路板完全动画时,点应该开始制作动画......

1 个答案:

答案 0 :(得分:2)

目前你有

obj.animate(..., drawBonuses());

即。 drawBonuses被立即调用,返回值传递给animate() 您想要传递函数本身:

    obj.animate(..., drawBonuses);

http://jsfiddle.net/yBehH/2/