How to draw a vector path progressively? (Raphael.js)

Question

How to animate a vector path like it's being drawn, progressively? In other words, slowly show the path pixel by pixel.

I'm using Raphaël.js, but if your answer is not library specific—like maybe there's some general programming pattern for doing that kind of thing (I'm fairly new to vector animation)—it's welcome!

---

It's easy to do with straight paths, as easy as an example on that page::

path("M114 253").animate({path: "M114 253 L 234 253"});

But try to change code on that page, say, this way::

path("M114 26").animate({path: "M114 26 C 24 23 234 253 234 253"});

And you'll see what I mean. Path is certainly animated from it initial state (point "M114 26") to the end state (curve "C 24 23 234 253 234 253" starting on point "M114 26"), but not in a way specified in question, not like it's being drawn.

I don't see how animateAlong can do that. It can animate an object along a path, but how can I make this path to gradually show itself while object is being animated along it?

---

The solution?

(Via peteorpeter's answer.)

Seems like currently the best way to do it is via 'fake' dashes using raw SVG. For the explanation see this demo or this document, page 4.

How produce progressive drawing?

We have to use stroke-dasharray and stroke-dashoffset and know length of curve to draw. This code draw nothing on screen for circle, ellipse, polyline, polygone or path:

<[element] style="stroke-dasharray:[curve_length],[curve_length]; stroke-dashoffset:[curve_length]"/>

If in animate element stroke-dashoffset decrease to 0, we get progressive drawing of curve.

<circle cx="200" cy="200" r="115"
    style="fill:none; stroke:blue; stroke-dasharray:723,723; stroke-dashoffset:723">
    <animate begin="0" attributeName="stroke-dashoffset"
        from="723" to="0" dur="5s" fill="freeze"/>
</circle>

If you know a better way, please leave an answer.

---

Update (26 Apr. 2012): Found an example that illustrates the idea well, see Animated Bézier Curves.

Answer 1

Maybe someone is searching for an answer, like me for two days now:

// Draw a path and hide it:
var root = paper.path('M0 50L30 50Q100 100 50 50').hide();
var length = root.getTotalLength();

// Setup your animation (in my case jQuery):
element.animate({ 'to': 1 }, {
    duration: 500,
    step: function(pos, fx) {
        var offset = length * fx.pos;
        var subpath = root.getSubpath(0, offset);
        paper.clear();
        paper.path(subpath);
    }
});

That did the trick for me, only by using RaphaelJS methods.

Here is a jsFiddle example as requested in the comments, http://jsfiddle.net/eA8bj/

Answer 2

Eureka! (Maybe - assuming you're comfortable stepping outside the friendly realm of Raphael into pure SVG land...)

You can use SVG keyTimes and keySplines.

Here's a working example:

http://www.carto.net/svg/samples/animated_bustrack.shtml

...and here's some potentially useful explanation:

http://msdn.microsoft.com/en-us/library/ms533119(v=vs.85).aspx

Answer 3

I'd like to offer an alternative, Raphael+JS-only solution that I have made substantial use of in my own work. It has several advantages over davidenke's solution:

1. Doesn't clear the paper with each cycle, allowing the animated path to coexist nicely with other elements;
2. Reuses a single path with Raphael's own progressive animation, making for smoother animations;
3. Substantially less resource intensive.

Here's the method (which could quite easily be retooled into an extension):

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;
}

And here are two samples of its usage on my site: one for Path Transformation, and the other for Progressive Lettering.

Answer 4

I've created a script for this: Scribble.js, based on this great dasharray/dashoffset technique.

Just instantiate it overs a bunch of SVG <path>s:

var scribble = new Scribble(paths, {duration: 3000});
scribble.erase();
scribble.draw(function () {
    // done
});

--

NB: Full USAGE code here: https://gist.github.com/abernier/e082a201b0865de1a41f#file-index-html-L31

Enjoy ;)

Answer 5

Using "pathLength" attribute we can set virtual length to the path. From then we can use this virtual length in "stroke-dasharray". So if we set "pathLength" to 100 units we then can set "stroke-dasharray" to "50,50" wich wuld be exactly 50%, 50% of the path!

There is one problem with this approach: the only browser that supports this attribute is Opera 11.

Here is example of smooth curve drawind animation without javascript or hardcoded length.(Works properly only in Opera 11)

Answer 6

Anton & Peteorpeter's solution sadly breaks down in Chrome when paths get complicated. It's fine for the bus map in that linked demo. Check out this animated "flower petals" jsfiddle I created, which draws correctly in FF10 and Safari5, but flickers uncontrollably in Chrome:

http://jsfiddle.net/VjMvz/

(This is all HTML and inline SVG, no javascript.)

I'm still looking for a non-Flash solution for this. AnimateAlong obviously won't cut it for what I'm doing. Raphael.js could work, though it threatens to turn into callback spaghetti really fast.

Davidenke, can you post a working jsfiddle with your solution? I just can't get it to work. I'm getting an error in Chrome 18 that nodes that are set to "display: none" with your ".hide" have no method 'getTotalLength'.

Answer 7

Unfortunately, as you seem to agree, you probably can't do this elegantly in Raphael.

However, if, by some stroke of %deity% you don't need to support IE for this particular feature, you could forgo the Raphael API and manipulate the SVG directly. Then, perhaps, you could rig a mask to ride along the path and reveal the line at a natural pace.

You could degrade gracefully in IE to simply show the path using Raphael, without animation.

Answer 8

Just an update to this, you could try Lazy Line Painter

Answer 9

i was just doing exactly this. The first thing i tried was Anton's solution but the performance sucks.

In the end the easiest way to get the result i wanted was to use the alternative "keyframe" syntax for the animate function.

draw the final path invisibly, then generate a whole bunch of key frames by using getSubpath in a loop.

create a new path that is visible and equals the first keyframe.

then do something like:

path.anmimate({ keyFrameObject, timeframe });

you shouldn't need a keyframe for every pixel that you want to draw. After playing around with the parameters, i found that a value of 100px per keyframe worked for the complexity/size of what i was trying to "draw"

Answer 10

Have you tried Raphael's animateAlong? You can see it in action on a demo page.

Answer 11

Alright, here's my thoughts on this… The solution's too far from ideal.

To gradually show the path mean we should show it, like, dot by dot. And vector paths consist not of dots, but of curves, so it appears to me there's no ‘natural’ way to gradually ‘draw’ the path in vector graphics. (Though I'm fairly new to this and may be mistaken.)

The only way would be to somehow convert a path to a number of dots and show them one by one.

Currently my workaround is to draw a path, make it invisible, break it into a number of subpaths, and show that subpaths one by one.

This isn't hard to do with Raphael, but it's not elegant either, and quite slow on a large paths. Not accepting my answer, hoping there's a better way…