How to animate a path like it's being drawn, dot by dot? (Raphael.js)

Posted by Anton on Stack Overflow See other posts from Stack Overflow or by Anton
Published on 2011-01-07T22:52:53Z Indexed on 2011/01/10 1:54 UTC
Read the original article Hit count: 207

Filed under:
|
|
|
|

How to animate a vector path like it's being drawn by hand?

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!


Update

I know 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.

(Sorry for not making clear from the start that I don't mean animating straight lines.)


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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about animation