我想使用 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()
将是异步的,但事实并非如此。动画一个接一个地出现。在负延迟的情况下,第一个动画正常完成而没有第二个动画,并且完成后捕捉到第二个动画的“背景进度”。
最佳答案
您应该调用同一个动画实例上的所有方法,而不是调用 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);
关于javascript - 如何在 SVG.js 中同时为多个属性设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54297004/