0
打開此JS小提琴Link。有兩條路徑是動畫。深藍色的酒吧動畫根據分鐘&較小的綠色條動畫按秒。我想在完成動畫時循環播放這些動畫。我怎樣才能做到這一點？Raphaeljs在特定時間間隔後恢復動畫
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);
};