Question

I’m having an issue with Raphael JS. I’m going to explain it with a drawing:

Basically, I want that when the red dot moves, the path keep being connected to it, it should move along with it.
What I was trying at first was using animate on the red dot, and animateWith on the paths. Did not work out.

Can someone point me in the right direction? I want to create my own animation with a timer etc, but I want to check if this is a good idea.

Also, at some point all of the dots are going to move and the paths between them will still be connected. I don’t know how to figure that out.

Thanks

Answer 1

The trick in this case would be to a) know where all of your circles will be for a given window of time and b) animate the path attribute of your connector lines over the same timespan as the circles. So, if your center circle is going to animate to (nx,ny) and your satellite circle is going to animate to (cx,cy), you’ll need to animate the corresponding connector like this:

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

But you’ll have to be careful to keep the duration and the easing method the same, or you’ll get slop.

Obviously there are any number of possible state management strategies you could use — without code it’s difficult to guess. But I’ve mocked up one possible solution here.