Как вы анимируете несколько свойств одновременно в SVG.js?

Question

Я хотел бы анимировать одновременно два свойства (или комбинированные свойства, такие как положение с X и Y) элемента SVG, используя SVG.js.

Я дважды пытался вызвать метод 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() будет асинхронным, но это не так,Анимации приходят одна за другой.С отрицательной задержкой первая анимация обычно завершается без второй и после завершения привязывается к «фоновому прогрессу» второй анимации.

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/