如何在 SVG.js 中同时为多个属性设置动画？

Question

我想使用 SVG.js.

同时为 SVG 元素的两个属性（或组合属性，如 X 和 Y 的位置）设置动画

我尝试调用 animate 方法两次，然后为两者调用属性更改方法。我还使用 setTimeout 在异步函数中尝试运行它们，但队列似乎阻止了我正在寻找的行为。

// create the middle block and make it centered on the bar's origin
var block = topbar.rect(0, barheight)

block.animate().size(barinnerwidth, barheight)
block.animate().move(-barinnerwidth / 2, -barheight / 2)

我假设除非特别说明，否则 animate() 将是异步的，但事实并非如此。动画一个接一个地出现。在负延迟的情况下，第一个动画在没有第二个动画的情况下正常完成，并且在完成捕捉到第二个动画的 "background progress" 时。

Answer 1

不要调用 animate() 两次，您应该调用同一个动画实例上的所有方法：

//Option 1, one-liner:
block.animate().move(10, 10).size(10, 10);

//Option 2, more verbose;
var animator = block.animate();
animator.move(200, 10);
animator.size(50, 50);

https://jsfiddle.net/6epv2bjx/

如何在 SVG.js 中同时为多个属性设置动画？

How do you animate multiple properties at the same time in SVG.js?

javascript

svg

svg-animate

svg.js