javascript - 拉斐尔无延迟地重复动画

Question

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

这样的循环，其实就是：延迟，动画，延迟，动画，延迟动画……等等。

如何制作：延迟、动画、动画、动画……等等——延迟只在第一个周期。

我不想使用setTimeout，因为我正在为很多元素设置动画，并且每个 setTimeout 都有不同的 javascript 浏览器计时器实例，并且动画 od 不同的元素可能是异步的。

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 毫秒动画，然后在回调时调用实际的动画。