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

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

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

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

Answer 2

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

缺少的部分是您创建 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 就不会作为全局变量公开，但这就是基本结构。

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

RaphaelJS: How to animate element after another elements animation is done?

javascript

jquery

animation

raphael