拉斐爾無延遲重複動畫

Question

obj.animate(anim.repeat('Infinity').delay(500)); 

重複這個循環實際上是：延遲，動畫，延遲，動畫，延遲動畫...等等。

如何製作：延遲，動畫，動畫，動畫......等等 - 延遲只在第一個週期。

我不想使用setTimeout，因爲我爲很多元素設置了動畫，每個setTimeout都有不同的javascript瀏覽器定時器和動畫實例，不同的元素可能是異步的。

Answer 1

這很好奇。我想你可以巧妙地更新這種方式，使用可選的回調參數，但是，這並不工作：

anim = Raphael.animation({transform: "r45"}, 500, function(e) { anim.del = 0; }).delay(1000); 

從源頭一眼，它看起來像沒有被更新在每次迭代動畫的參數（我認爲）。

這工作，雖然我不知道它是多麼的不同功能從setTimeout的方法：

var paper = Raphael(0,0,500,500), 
    square = paper.rect(50,50,50,50).attr("fill", "#009900"), 
    //anim = Raphael.animation({transform: "r45"}, 500, function(e) { console.log(anim); anim.del = 0; }).delay(1000); 
    anim = Raphael.animation({opacity: 0}, 1000, function() { this.attr("opacity", 1); /* this callback is just to reset the effect for my dummy animation */ }), 
    wait = Raphael.animation({opacity: 1}, 500, function() { this.animate(anim.repeat("Infinity")); /* this callback triggers the actual animation after a 500ms placebo animation */ }); 

square.animate(wait); 

jsFiddle

正如你所看到的，這只是運行500毫秒的動畫沒有視覺效果一次，然後在回調中調用實際的動畫。