Databases
StackOverflow2013
Postsdbo
POHow to draw a vector path progressively? (Raphael.js)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to draw a vector path progressively? (Raphael.js)
    text
    copied!<p><strong>How to animate a vector path like it's being drawn, progressively?</strong> In other words, slowly show the path pixel by pixel.</p> <p>I'm using <code>Raphaël.js</code>, <em>but</em> 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!</p> <hr> <p>It's easy to do with straight paths, as easy as an example on <a href="http://irunmywebsite.com/raphael/additionalhelp.php?q=animate" rel="nofollow noreferrer">that page</a>::</p> <pre><code>path("M114 253").animate({path: "M114 253 L 234 253"}); </code></pre> <p>But try to change code on that page, say, this way::</p> <pre><code>path("M114 26").animate({path: "M114 26 C 24 23 234 253 234 253"}); </code></pre> <p>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.</p> <p>I don't see how <code>animateAlong</code> 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?</p> <hr> <h2>The solution?</h2> <p>(Via <a href="https://stackoverflow.com/questions/4631019/how-to-draw-a-vector-path-progressively-raphael-js/5073832#5073832">peteorpeter's answer</a>.)</p> <p>Seems like currently the best way to do it is via 'fake' dashes using raw SVG. For the explanation see <a href="http://www.carto.net/svg/samples/animated_bustrack.shtml" rel="nofollow noreferrer">this demo</a> or <a href="http://pilat.free.fr/svgopen/pdf/open_workshop.pdf" rel="nofollow noreferrer">this document</a>, page 4.</p> <blockquote> <h3>How produce progressive drawing?</h3> <p>We have to use <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> and know length of curve to draw. This code draw nothing on screen for circle, ellipse, polyline, polygone or path:</p> <pre><code>&lt;[element] style="stroke-dasharray:[curve_length],[curve_length]; stroke-dashoffset:[curve_length]"/&gt; </code></pre> <p>If in animate element stroke-dashoffset decrease to 0, we get progressive drawing of curve.</p> <pre><code>&lt;circle cx="200" cy="200" r="115" style="fill:none; stroke:blue; stroke-dasharray:723,723; stroke-dashoffset:723"&gt; &lt;animate begin="0" attributeName="stroke-dashoffset" from="723" to="0" dur="5s" fill="freeze"/&gt; &lt;/circle&gt; </code></pre> </blockquote> <p>If you know a better way, please leave an answer.</p> <hr> <p><strong>Update</strong> (26 Apr. 2012): Found an example that illustrates the idea well, see <a href="http://www.jasondavies.com/animated-bezier/" rel="nofollow noreferrer">Animated Bézier Curves</a>.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload