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不会作为全局变量公开，但这是基本结构

Answer 2

在循环中使用矩形代码。在循环中添加动画代码。这里延迟自动增加到200,400,800,1600

var delay = 200;
for(i = 0;i<rectangles.length;i++){
  rectangles[i].animate(anim.delay(delay));
  delay = delay+delay;
}

RaphaelJS：如何在完成另一个元素动画后动画元素？

2 个答案: