Custom Animation in Raphael.js

5
votes

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:
Start and end position

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?

1
javascriptanimationsvgraphael
I would also like an answer to this question... I'm making a clock for teaching, and I need an arc to animate smoothly along the arc line. As in your case, though, it jumps straight to the new point: jsfiddle.net/zFXCb/10 If I find a solution I'll post an answer. - David John Welsh

1 Answers