What is the best way to draw a moving line / curve?

Question

I would like to draw “moving” lines using JavaScript and Canvas. Basically, I have a Bezier curve that I would like to draw, but instead of drawing the curve right away, I would like to draw fragments of the curve over time, so it looks like it is growing. A better explanation might be: I would like the line to start happening, and then move to the destination over time. What is the best way to achieve this?

Answer 1

I was looking for a way to do the same and found jQuery Tween and jQuery Curve described and demo here: http://heygrady.com/blog/2011/07/20/animating-with-curves-in-jquery/

Answer 2

I created a jQuery plugin called jCurvy that allows you to place elements along a bezier curve. You can use jCurvy along with the fadeIn method and callback to do what you are talking about. Take a look at the example here:

http://jsfiddle.net/pFZss/2/

If you finish this route and have any problems, please let me know. I am sure that you would be one of the first people to use the plugin, so I would like to receive feedback.

Answer 3

Use setTimeout or setInterval. You can also use the animation function.