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

【问题标题】：How do you animate multiple properties at the same time in SVG.js?如何在 SVG.js 中同时为多个属性设置动画？
【发布时间】：2019-06-15 06:12:08
【问题描述】：

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

【问题讨论】：

你试过block.animate().size(barinnerwidth, barheight).move(-barinnerwidth / 2, -barheight / 2) 吗？或者可能使用attr 方法？ svgjs.com/docs/2.7/animating -- 无论如何，每次调用animate 时，它都会向队列中添加一个新动画，而不是并行运行它们。 "您可以通过再次调用 animate 将多个动画链接在一起"

标签： javascript svg svg-animate svg.js

【解决方案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/

【讨论】：

我现在觉得自己非常愚蠢，但文档中没有，我也看不出动画是这样工作的。非常感谢。
再次调用动画会一个接一个地链接动画。所以el.animate().move(...).animate().scale()会先移动，再缩放