在svgjs中的每个元素属性上使用不同的动画属性对单个元素的多个属性进行动画处理

Question

我正在尝试使用svgjs创建效果。在我的示例中，这种效果需要使一个项目从左到右从左到左来回压缩。我还希望它略微上下浮动，并且上下动画的持续时间不同于左右，因此用户看不到有循环（即，我不想在两个轴上都存在一个循环。

我尝试过的一件事（r是rect）：

// horizontal
r.animate({
  duration: Math.random() * 4000 + 1000,
  swing: true,
  times: Number.MAX_SAFE_INTEGER
})
.attr({
  x: width - 10
})
// vertical
r.animate({
  duration: Math.random() * 4000 + 1000,
  swing: true,
  times: Number.MAX_SAFE_INTEGER
})
.attr({
  y: r.y() + (Math.random() * 250) - 125
})

使用此代码，垂直动画永远不会发生，因为它正在等待水平循环完成（实际上永远不会发生）。

我也尝试过：

// horizontal
r.animate({
  duration: Math.random() * 4000 + 1000,
  swing: true,
  times: Number.MAX_SAFE_INTEGER
})
.attr({
  x: width - 10,
  y: r.y() + (Math.random() * 250) - 125
})

它可以工作，但看起来很无聊/笨拙，因为循环对观看者是透明的。

（顺便说一句，除了设置times: Number.MAX_SAFE_INTEGER以外，如果您可以提出一种使这些循环永久持续的方法，我将不得不这样做，因为这太草率了。）

Answer 1

您需要安排动画同时开始。您可以通过将关键字when: 'absolute'传递到animate()来做到这一点，它告诉跑步者在时间轴上的绝对时间进行安排。由于两个跑步者（又称动画人）来自同一个元素，因此他们在同一时间轴上进行安排。您也可以使用now作为替代，它基本上代表：立即开始。但是在那种情况下，两个动画可能会相隔几毫秒。

您还可以使用times: true或times: Infinity或直接致电loop(true, true)

r.animate({when: 'absolute', delay: 0, ...}) // 0 is time on the timeline, can be dropped
r.animate({when: 'absolute', delay: 0, ...})

您还可以将其作为多个参数传递，正如我提到的那样，使用loop：

r.animate(Math.random() * 4000 + 1000, 0, 'absolute').loop(true, true) // loop(times, swing)