raphael - Raphael JS - 同步动画

Question

我遇到了 Raphael JS 的问题。我用一张图来解释：

基本上，我希望当红点移动时，路径保持连接到它，它应该随之移动。我最初尝试的是在红点上使用animate ，在路径上使用animateWith。没有成功。

有人可以指出我正确的方向吗？我想用计时器等创建自己的动画，但我想检查这是否是个好主意。

此外，在某些时候，所有点都会移动，并且它们之间的路径仍将连接。我不知道怎么弄明白。

谢谢

score 2 · Accepted Answer

在这种情况下，诀窍是 a) 知道在给定的时间窗口内所有圆圈的位置，以及 b)path在与圆圈相同的时间跨度内为连接线的属性设置动画。因此，如果您的中心圆将动画到 (nx,ny) 并且您的卫星圆将动画到 (cx,cy)，您需要像这样为相应的连接器制作动画：

cl.animate( { path: [ "M", nx, ny, "L", cx, cy } }, duration, easing_method );

但是你必须小心保持持续时间和缓动方法相同，否则你会得到马虎。

显然，您可以使用许多可能的状态管理策略——没有代码很难猜到。但我在这里模拟了一种可能的解决方案。

1 回答 1