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

上面的代碼中缺少一些東西。而這個缺失的部分就是動畫完成後你如何運行另一個動畫。

缺失的位是你如何創建你的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就不會暴露爲全局變量，但這是basi c結構。

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