我遇到了 Raphael JS 的问题。我用一张图来解释:
基本上,我希望当红点移动时,路径保持连接到它,它应该随之移动。我最初尝试的是在红点上使用animate ,在路径上使用animateWith。没有成功。
有人可以指出我正确的方向吗?我想用计时器等创建自己的动画,但我想检查这是否是个好主意。
此外,在某些时候,所有点都会移动,并且它们之间的路径仍将连接。我不知道怎么弄明白。
谢谢
我遇到了 Raphael JS 的问题。我用一张图来解释:
基本上,我希望当红点移动时,路径保持连接到它,它应该随之移动。我最初尝试的是在红点上使用animate ,在路径上使用animateWith。没有成功。
有人可以指出我正确的方向吗?我想用计时器等创建自己的动画,但我想检查这是否是个好主意。
此外,在某些时候,所有点都会移动,并且它们之间的路径仍将连接。我不知道怎么弄明白。
谢谢
在这种情况下,诀窍是 a) 知道在给定的时间窗口内所有圆圈的位置,以及 b)path
在与圆圈相同的时间跨度内为连接线的属性设置动画。因此,如果您的中心圆将动画到 (nx,ny) 并且您的卫星圆将动画到 (cx,cy),您需要像这样为相应的连接器制作动画:
cl.animate( { path: [ "M", nx, ny, "L", cx, cy } }, duration, easing_method );
但是你必须小心保持持续时间和缓动方法相同,否则你会得到马虎。
显然,您可以使用许多可能的状态管理策略——没有代码很难猜到。但我在这里模拟了一种可能的解决方案。