0

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

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

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

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

谢谢

4

1 回答 1

2

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

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

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

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

于 2012-09-19T21:29:36.170 回答