RaphaelJS:如何制作一个又一个元素的动画

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

本文关键字：元素 动画 一个又一个 何制作 RaphaelJS      更新时间：2023-09-26

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

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));

在这里，我手动提供了增加的延迟值，如200400800。对于一大组元素来说，这将是一个相当令人厌烦的计算。我认为必须有另一种方法来做到这一点，通过链接一个动画到其他动画结束。请引导。

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

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

在循环中使用矩形代码。在循环中添加动画代码。此处延迟自动增加到2004008001600

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