Custom Animation in Raphael.js

Question

Hyphotesis

I have some circles on a path (see start shape in figure) and they need to animate to another path (end shape in figure).

There are several actions the animation must do:
- move the entire shape to the new position
- change the path
- decrease all circle radii

The figure:

Problem

Raphael.js knows how to animate the circles from the original coordinates to the final ones also changing the radius. Because the animation doesn't run on a similar path like the original and final ones, the animation doesn't look very good. The circles go from x1,y1 to x2,y2 in a straight line.

What I tried

1. Doing the straight-forward animation, moving the circles from start to end, changing the radius. Like I said, this isn't ok.

2. Moving every circle in intervals, calculating the new path on every iteration and calculating the position of the circles. This runs very slow.

3. Calculating a temporary circle position on each iteration with Element.getPointAtLength(). This is also very slow.

4. Having a few intermediary paths hardcoded in arrays and running the animation through each one. This is better in terms of speed but looks kind of jerky

So, any ideas?

Answer 1

http://irunmywebsite.com/raphael/additionalhelp.php?v=2&q=element.getpointatlength

I'm on iPod so not saying much, but this might help