How to animate a Raphael object along a path?

Question

The object could be simple, a rect or circle. But the path should be a bezier curve. Please provide javascript/Raphael code if not too much trouble.

It will be nice if there is trailing effect of the moving object during annimation.

Thanks,

Answer 1

http://raphaeljs.com/animation.html

Answer 2

It seems that you cant do that using Raphaёl animate() method (since it changes object attributes linearly).

I would offer you to implement a function that changes object position each millisecond or so according to Bézier curve formula. Use Raphaёl translate() method and JavaScript timers.

Answer 3

You could go to my additional Raphael resources page where I have implemented a bezier curve toy you can play with.

The code is viewable and exwecutable and you can take it away and play with it.

Go to the main resources page at:

http://www.irunmywebsite.com/raphael/raphaelsource.html

and scroll down a bit to the cubic bezier "spin-off" example.

Answer 4

Just use the .animateAlong() method.

It takes 4 arguments:

1. path - object or string path element or path string along which the element will be animated
2. ms - number - The duration of the animation, given in milliseconds.
3. rotate - boolean - [optional] if true, element will be rotated along the path
4. callback - function - [optional]

Essentially from the documentation:

window.onload = function() {
    var r = Raphael("canvas", 200, 200), 
        p = r.path("M10,50C10,100,90,0,90,50C90,100,10,0,10,50Z")
             .attr({stroke: "#ddd"}),
        e = r.ellipse(10, 50, 4, 4).attr({stroke: "none", fill: "#f00"});
    r.rect(0, 0, 200, 200).attr({stroke: "none", fill: "#000", opacity: 0})
     .click(function () {
         e.attr({rx: 5, ry: 3})
          .animateAlong(p, 4000, true, function () {        // Animate along path
              e.attr({rx: 4, ry: 4});
          });
     });
}​;

Try it out with this jsFiddle (click to activate)