Dibujo de líneas animadas con jQuery

Question

Quiero usar jQuery para crear un efecto de un dibujo de líneas dibujado como si tuviera un lápiz invisible.

Algo así como esto:

http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html

Hice esta maqueta con alguna otra biblioteca, pero me pregunto si hay una manera más fácil de hacer eso con jQuery. Y también quiero poder animar líneas curvas e irregulares.

me gustaría animar un dibujo de este tipo, por ejemplo:

http://commons.wikimedia.org/wiki/File:Mouse_line_drawing.jpg

¿Existe un plugin de jQuery que ayuda a crear ese efecto?

Si no, ¿podría aconsejar una forma simple y efectiva de hacer eso con jQuery?

¡Gracias por tu consejo!

Saludos,

Dimitri Vorontzov

Answer 1

Eche un vistazo a Raphael.

Raphaël: gráficos vectoriales entre navegadores de la manera más fácil.

Answer 2

He intentado reproducir esta animación. Utilicé un div, en el cual coloqué 4 "border-divs", teniendo position: absolute para colocarlos como un marco.

Todos estos "border-divs" tienen un ancho de 0px y un borde 1px solid black.

cuando el DOM está listo, el animo de la frontera-divs uno por uno, cambiando su tamaño a las dimensiones del contenedor:

$(function() { 
    $(".border, #content").hide(); 
    $("#topbar").show(); 
    $("#topbar").animate({width: "318px"}, 1000, function() { 
     $("#rightbar").show(); 
     $("#rightbar").animate({height: "238px"}, 1000, function() { 
      $("#bottombar").show(); 
      $("#bottombar").animate({width: "318px"}, 1000, function() { 
       $("#leftbar").show(); 
       $("#leftbar").animate({height: "238px"}, 1000, function() { 
        $("#content").fadeIn(1000); 
       }); 
      }); 
     }); 
    }); 
}); 

no sé si soy claro, Inglés no es mi nativa idioma, pero he hecho un jsBin example here

¡Todo lo que tienes que hacer ahora es repetir el proceso en un sitio web completo!

Answer 3

tema Bastante viejo, pero me encontré con esta solución cluld ser: http://plugins.jquery.com/lazylinepainter/