javascript - 拉斐尔JS : How to animate element after another elements animation is done?

Question

我想在前一个元素完成其动画后为该元素设置动画。现在我的代码是这样的:

var canvas = Raphael(0, 0, 1000, 1000 );
    var boxWidth = 80;
    var boxHeight = 30;
    var rectangles = canvas.set();
    rectangles.push(canvas.rect(460, 30, 0, 0),
                    canvas.rect(460, 90, 0, 0),
                    canvas.rect(460, 150, 0, 0),
                    canvas.rect(460, 210, 0, 0),
                    canvas.rect(460, 270, 0, 0));
    rectangles.attr({fill: "#e00", stroke: "#fff"});

    rectangles[0].animate(anim.delay(200));
    rectangles[1].animate(anim.delay(400));
    rectangles[2].animate(anim.delay(800));
    rectangles[3].animate(anim.delay(1200));
    rectangles[4].animate(anim.delay(1600));

这里我手动提供了递增的延迟值，例如 200,400,800。对于一大组元素，这将是相当烦人的计算。我认为必须有另一种方法可以通过将一个动画链接到其他动画结束来实现此目的。请指导。

Answer 1

上面发布的代码中缺少一些内容。缺少的部分正是动画完成后运行另一个动画的方式。

缺少的部分是您创建 anim 对象的方式。

创建anim时，Raphael.animation允许您提供动画完成后将调用的回调:

var anim = Raphael.animation(params, duration, easing, next_callback);

function next_calback () {/* ... */}

现在您可以像这样处理矩形:

var i=0;
function next_callback () {
    if (rectangles[i]) {
        rectangles[i].animate(anim);
        i++;
    }
}

next_callback(); // kickstart the animation

当然，您可以将回调命名为比 next_callback 更具描述性的名称，并且可以将整个事情包装在闭包中，这样 i 就不会暴露为全局变量变量，但这是基本结构。