SnapSvg: Javascript y vectores

Desde que flash dejo de ser una opción viable para poder integrar las ideas de diseño y los requerimientos del cliente la búsqueda de plataformas y librerías ha sido constante, en especial énfasis por los dispositivos móviles, Snapsvg es una librería que te permite programar vía JavaScript los elementos svg.

Con Snapsvg tienes vectores de resolución independiente directamente en el DOM y con la posibilidad de combinarlos con tu diseño web, esto en particular es una gran ventaja ya que puedes integrarlo como parte del flujo normal del sitio y lo mejor puedes verlo en dispositivos móviles.

//variable principal de espacio de trabajo SVG
var s = Snap("#svg");
bigCircle = s.circle(0,0,1);
bigCircle.attr({
stroke:"#FFF",
strokeWidth: "1px",
});

Claro con sus debidas consideraciones, sabemos que para móviles hay que ser cautos y pensar en economía y rendimiento, estos elementos svg son buena opción dentro de tu diseño pues siempre te da buenas posibilidades, Una de las principales es que puedes programar su creación, sus atributos, sus parámetros y combinarlos con los elementos que el usuario interactúa.

Una vez que tienes el funcionamiento la pregunta es ¿y cómo lo puedo animar? ¿Cómo puedo hacerlo más interesante?, aquí esta lo divertido, al ser una librería JavaScript puedes integrarlo con algunas otras más, como TweenMax de Green Sock que es una de las mejores y con mejor rendimiento (aunque hay competidores que plantean muy buenas consideraciones: ágile por ejemplo) luego platicamos de ágile.

//Animacion con TweenMax para  atributos de Snapsvg
//El uso de snap:{ } es necesario para acceder a las propiedades del objeto svg
TweenLite.to(
particle,
wholeDuration,
{snap:{cy:posY}, ease:Back.easeOut}
);

TweenMax permite animar los elementos SVG y sus características principales así como los atributos de los elementos del DOM, es muy bueno pues desde flash ya tenía muy buenas referencias de esta librería, en este caso la integración con snap svg es excelente y te permite grandes posibilidades de animación.

Snapsvg cuenta con su propios métodos de animación , que son eficientes y para algunos casos son ideales pero con TweenMax tienes algunas otras posibilidades adicionales.

Estuvimos haciendo unas pruebas para poder implementar Snapsvg en los proyectos y decidimos ponerlo en la página principal. Checa también este demo y su código fuente sí consideras que se puede mejorar cuéntanos para hacerlo más eficiente.

[button link=”http://www.hatica.com/snap/svg1.html”  size=”large” color=”silver”]DEMO SNAP SVG[/button]

¿Qué opinas? dale una oportunidad y verás que se pueden hacer cosas muy interesantes con Snapsvg y TweenMax.