Raphael JS - 同步动画

Question

我遇到了Raphael JS的问题。我打算用图纸解释一下：

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

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

此外，在某些时候所有的点都将移动，它们之间的路径仍将连接。我不知道如何解决这个问题。

由于

Answer 1

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

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

但是你必须小心保持持续时间和缓和方法不变，否则你就会陷入困境。

显然，你可以使用任何数量的可能的状态管理策略 - 没有代码它很难猜测。但我已经嘲笑了一个可能的解决方案here。