How can I animate a vector path that is drawn using Raphael JS?

Question

How can I animate a vector path that is drawn using Raphael JS?

I have a set of coordinates that I would like to connect using Raphael JS.

The grid coordinates (x, y sets). I would like to start from one end and “connect the dots” as the user looks. The final product will look something like this:

9.png image http://img213.imageshack.us/img213/8013/picture9my.png

Ideally, I would like the paths to be curved, so that they look more similar (coordinates added for reference):

10.png image http://img534.imageshack.us/img534/1789/picture10fc.png

Coordinates:

26,-6 14,-12 5,-20 11,-28 14,-37 5,-40 

I searched google and I read this question How to draw a vector path gradually? (Raphael.js) , but I'm trying to use Raphael.js on purpose, and the example on this page for Raphael.js does not seem to work, and it does not talk about using multiple coordinate points for input.

Answer 1

Progressive paths

Drawing a path is gradually easy. I do not like the second most acceptable answer to this question , because it recreates the path at every step, cleaning the paper between them. Here is the utility function that I used over and over again:

 function drawpath( canvas, pathstr, duration, attr, callback ) { var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } ); var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr ); var total_length = guide_path.getTotalLength( guide_path ); var last_point = guide_path.getPointAtLength( 0 ); var start_time = new Date().getTime(); var interval_length = 50; var result = path; var interval_id = setInterval( function() { var elapsed_time = new Date().getTime() - start_time; var this_length = elapsed_time / duration * total_length; var subpathstr = guide_path.getSubpath( 0, this_length ); attr.path = subpathstr; path.animate( attr, interval_length ); if ( elapsed_time >= duration ) { clearInterval( interval_id ); if ( callback != undefined ) callback(); guide_path.remove(); } }, interval_length ); return result; } 

You can see it in action on my website .

This in itself will make the animation of the progressive construction of the contours of your lines in a linear way absolutely simple. You just compile your path ...

 var sequence_path = ["M26,-6", "L14,-12", "L5,-20", "L11,-28", "L14,-37", "L5,-40"]; 

And then pass it to any path animation function you configured. In my case

 drawpath( paper, sequence_path, 3500, { stroke: 'black', 'stroke-width': 2, 'stroke-opacity': 1, fill: 'none', 'fill-opacity': 0 }, function() { alert("All done"); // trigger whatever you want here } ); 

Curve interpolation

Raphael 2.0 The Catmull Rom function makes the graceful grace between your glasses extremely simple (thanks to Eric Dalstrom for pointing this out). All you have to do is build a path using the “R” command to move between points, and Raphael will do the rest.

 function generateInterpolatedPath( points ) { var path_sequence = []; path_sequence.push( "M", points[0].x, points[0].y ); path_sequence.push( "R" ); for ( var i = 1; i < points.length; i++ ) { path_sequence.push( points[i].x, points[i].y ); } return path_sequence; } 

You can see all the parts working together here .

Answer 2

You can also use Catmull Rom (see http://raphaeljs.com/reference.html#Paper.path ) to get a smooth curve through given points.

The demo is here (click to assign points, then press shift to go to the Catmull Rom curve).