DrawSVG para jQuery: SVG animado da vida a su sitio web

Afortunadamente, el formato SVG puede hacer mucho más que proporcionar gráficos basados ​​en vectores. Las animaciones también son posibles. Con JavaScript, puede controlar e influir en estas animaciones de muchas maneras diferentes. El complemento jQuery DrawSVG le permite dibujar las rutas de un gráfico SVG en una animación. Esto abre formas interesantes de dibujar los caminos.

Requisitos para DrawSVG

Como complemento de jQuery, este conocido todoterreno de JavaScript debe integrarse en el encabezado HTML junto con el complemento. Después de eso, es posible animar las rutas de un gráfico SVG. Estas son las formas SVG creadas a través del elemento „“. El ancho de línea y el color se pueden definir como de costumbre, usando atributos o CSS. No se debe asignar un color de relleno a las rutas, ya que no estaría animado y, por lo tanto, siempre estaría visible.

DibujarSVG usa „stroke-dasharray“ y „stroke-dashoffset“ para dibujar los caminos. Por eso, estos dos atributos no deben usarse en ningún otro lugar.

Dos estados de la animación

Dado que el complemento requiere acceso al árbol DOM del gráfico SVG, la fuente SVG debe vincularse al elemento HTML. Se puede crear una animación simple con una sola línea de JavaScript.

$("svg").drawsvg("animate");

El ejemplo accede a todos los elementos SVG que están etiquetados en el documento HTML y los cambia a la función de animación „drawsvg()“. Para hacerlo, todo el gráfico se desvanece al principio. Después de eso, el complemento dibuja las rutas individuales del gráfico por sí mismo. Para crear un efecto de dibujo realista, las rutas individuales se animan con breves pausas en el medio.

Cuantas más rutas contiene el gráfico, más animaciones se crean.

Ajuste de animaciones a través de la configuración

La duración de la pausa entre los puntos de inicio de las rutas separadas se puede configurar individualmente usando la opción „escalonar“.

var $svg = $("svg").drawsvg({
  stagger: 5000
 }).drawsvg("animate");

Los ajustes se transfieren como un objeto literal a través de la selección de «drawsvg()». En el ejemplo, el descanso se establece en cinco segundos. La duración de la animación, que está configurada en un segundo de forma predeterminada, también se puede modificar en la configuración.

var $svg = $("svg").drawsvg({
  stagger: 5000,
  duration: 10000
 }).drawsvg("animate");

Además, existe la opción de usar una función de devolución de llamada que aparece cuando finaliza la animación y el gráfico completo se vuelve visible.

var $svg = $("svg").drawsvg({
  callback: function() {
    alert("Animation is finished.");
  }
 }).drawsvg("animate");

En el ejemplo, configuramos una alerta simple cuando se completa la animación.

Dibujo de gráficos en desplazamiento

Con unas pocas líneas adicionales de JavaScript, puede hacer que el gráfico SVG se dibuje cuando su visitante se desplace por su sitio web. Para hacerlo, el elemento SVG tiene que ser arreglado („posición: fija“) usando CSS para que esté siempre visible. La página debe ser desplazable, por supuesto, lo que puede lograr definiendo una altura suficiente con CSS. Las siguientes líneas aseguran que el gráfico se dibuje desplazándose hacia abajo.

var $svg = $("svg").drawsvg();

$(window).on("scroll", function() {
  $svg.drawsvg("progress", $(window).scrollTop() / ($(document).height() - $(window).height()));
});

Por supuesto, definir la duración total de la animación es superfluo porque la animación depende de la velocidad de desplazamiento. Cuanto más rápido te desplazas, más rápido se dibuja. El dibujo desaparece al desplazarse de nuevo en sentido contrario.

Uso de DrawSVG con rutas y máscaras

Otra forma de usar el complemento es la combinación de rutas y máscaras. Por ejemplo, un elemento „“ también puede contener una ruta cuando se utiliza este enfoque. Cuando la ruta se dibuja de modo que cubra toda el área de la máscara debido a la fuerza de línea masiva, puede desvanecerse fácilmente en imágenes agradables u otros elementos.

Dos estados de una animación enmascarada

Conclusión

Las opciones de uso de DrawSVG son variadas. Aplicar el complemento es fácil. Se logran hermosos efectos a pesar de que solo hay unas pocas opciones. La documentación es muy clara. Un par de demostraciones muestran ejemplos de lo que es posible.

DrawSVG está siendo desarrollado por Leonardo Santos de Porto Alegre y se proporciona en Github para su uso y participación. El complemento es gratuito para fines comerciales, ya que Santos lo distribuye bajo la licencia liberal MIT.

(dpe)