Raphaeljs 在特定间隔后恢复动画答案

【问题标题】：Raphaeljs resume animation after specific intervalRaphaeljs 在特定间隔后恢复动画
【发布时间】：2012-09-30 17:45:42
【问题描述】：

打开这个 JS Fiddle Link。有两条动画路径。深蓝色条根据经过的分钟进行动画处理，而较小的绿色条根据秒进行动画处理。我想在他们完成动画时循环这些动画。我该怎么做？

JS 小提琴Link

window.onload= function aa () {

    var paper = Raphael(0, 0, 1900, 1900);
    var date = new Date;
    var hour = date.getHours();

    var mins = date.getMinutes();
    var secs = date.getSeconds();
    var secl = (60*60*1000)-(secs*1000);
    var minl = 60 - mins;
    var crx = 318*(mins/60);//sets width according to minutes passed when window is loaded

    var cry = 318*(secs/60);//sets width according to seconds passed when window is loaded
    var sec1 = (60-secs)*1000;

    var x=1;
    var y=1;

    var pathhh = "M"+x+","+y+" "+"h"+320+" "+"v"+270+" "+"h"+(-320)+"z";//bg
    var curbox = paper.path(pathhh).attr({fill:'315-#0299fa-#0473ba'});

    var pathh3 = "M"+(x+1)+","+(242+y)+" "+"h"+318+" "+"v"+27+" "+"h"+(-318)+"z";//black bar
    var cur1box = paper.path(pathh3).attr({fill:'black'});    

    var pathfm = "M"+(x+1)+","+(243+y)+" "+"h"+crx+" "+"v"+20+" "+"h"+"-"+crx+"z";//minutes bar
    var pathto = "M"+(x+1)+","+(243+y)+" "+"h"+318+" "+"v"+20+" "+"h"+(-318)+"z";
    var cu2box = paper.path(pathfm).attr({fill:'#03558b',stroke:'none'});
    cu2box.animate({path: pathto},secl);

    var patgfm = "M"+(x+1)+","+(265+y)+" "+"h"+cry+" "+"v"+4+" "+"h"+"-"+cry+"z"; //seconds bar
    var patgto = "M"+(x+1)+","+(265+y)+" "+"h"+318+" "+"v"+4+" "+"h"+(-318)+"z";
    var cu3box = paper.path(patgfm).attr({fill:'#0db1af',stroke:'none'});
    cu3box.animate({path: patgto},sec1);
};

【问题讨论】：

标签： path jquery-animate raphael intervals repeat

【解决方案1】：

我认为this question 是相关的，但与您的不太一样。问题和答案一起包含您的情况的解决方案：在动画结束时使用回调，将路径重置为原始路径并设置新动画。

或者，使用setInterval 每分钟/每小时重置一次动画。

【讨论】：