捕捉SVG動畫循環

Question

我正在嘗試弄清楚如何使用快照SVG制作整個動畫循環。 我有矩形的兩步動畫。 現在，我最終得到了這樣的結果。 這里發生了有趣的事情。 首先，動畫返回而不是重新開始，然后停止。

function firstStep() {
   setTimeout(function () {
     bigRectangle.animate({width:250}, 3000);
     mainFooter.animate({width:250}, 3000);
     leftSidebar.animate({width:40, fill:"#22313F"}, 3000);
     rightSidebar.animate({x:460, width:40, fill:"#22313F"}, 3000);
     mainContent.animate({x:300, width:150}, 3000);
   }, 2000);
   secondStep();
}

function secondStep() {
   setTimeout(function () {
   bigRectangle.animate({width:180}, 2500);
   mainFooter.animate({width:180, y:640}, 2500);
   leftSidebar.animate({width:180, height:50}, 2500);
   rightSidebar.animate({ width:180, height:50, y:580, x:250}, 2500);
   mainContent.animate({x:250, y:170, width:180}, 2500);
   }, 6000);
}

function loopRect(){
   setInterval(firstStep, 8000);
}

loopRect();

Answer 1

我可以看到兩個問題：

setInterval(firstStep, 3000);

此間隔沒有足夠的時間讓動畫在再次開始之前完成。

另外，如果要重新啟動動畫，則必須將所有內容放回原處。 這將需要動畫的第三步：

setTimeout(function () {
bigRectangle.animate({width: 400}, 2500);
mainFooter.animate({width: 400,y: 520}, 2500);
leftSidebar.animate({width: 70,height: 400,fill: "#19B5FE"}, 2500);
rightSidebar.animate({width: 70,height: 400,y: 110,x: 580,fill: "#19B5FE"}, 2500);
mainContent.animate({x: 330,y: 110,width: 240}, 2500);
}, 10000);

實際上，沒有理由不能將所有動畫代碼都放在一個函數中。 這是更新的jsfiddle。