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

时间:2019-01-21 20:00:26

标签: javascript svg svg-animate svg.js

我想使用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()将是异步的,但不是。动画接连出现。在负延迟的情况下,第一个动画正常完成而没有第二个动画,并且在完成捕捉到第二个动画的“背景进度”之后。

1 个答案:

答案 0 :(得分: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/