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

我可以看到两个问题：

browser.executeScript("arguments[0].click();", ele.getWebElement());

此间隔不会留出足够的时间让动画再次开始播放。

此外，如果您想要重新启动动画，则必须将所有内容放回原位。这将需要动画的第三步：

setInterval(firstStep, 3000);

实际上，没有理由不能将所有动画代码放在一个函数中。 Here's an updated jsfiddle.

Snap SVG动画循环

1 个答案: