Animación utilizando Inkscape y Snap

Recientemente el equipo de la plataforma web de Adobe anuncia la versión 0.4 de Snap.svg, una nueva librería de JavaScript para la creación de SVG. Snap.svg provee una poderosa e intuitiva API para la manipulación de animaciones con imágenes vectoriales SVG.

En este momento, la librería más popular para trabajar con SVG es Raphaël. Una de las razones principales del porqué Raphaël se convierte en el estándar, es por su soporte incluso de Internet Explorer 6. El que Snap se utilice en navegadores modernos otorga poderosas herramientas como el uso de máscaras, recortes, patrones, gradientes, agrupaciones y más.

Otra característica única de Snap es la habilidad de trabajar con contenido SVG existente. Esto significa poder crear este tipo de contenido en herramientas como Inkscape, para así, manipularlas desde Snap y crear interacciones dinámicas, interfaces gráficas responsivas y más.

Finalmente Snap soporta animación. Otorgando una simple e intuitiva API para la animación, Snap puede ayudar a hacer tu contenido SVG más interactivo.

Snap es 100% libre y 100% de código abierto.

Snap-Feature-Image

Para comenzar a utilizar Snap, es necesario entender el cómo hacerlo llamar desde un documento html, mostraremos una animación hecha en Snap, explicando un poco la forma en que se hizo, y la forma en que se utilizan las funciones.

Primero necesitaremos utilizar la herramienta de Inkscape, una vez dentro, crearemos una especie de cuarto con piso y paredes con vista ortogonal para dar sensación de profundidad.

pr3

Añadiremos a nuestra protagonista Chell, que será la que nos ayude con esta animación.

pr4

Otorgarle las siguientes propiedades a la imagen de Chell, una vez seleccionada a Chell oprimir LSfhit + LCtrl + O para abrir el panel de propiedades de objeto y asignarle un ID y una etiqueta con la cual se trabajará más adelante.

pr5

Agregar dos puntos, los cuales serán interactivos al usuario, para estar  de esta manera comenzar la animación. También asignarle en sus respectivas propiedades un ID y una etiqueta. Además agregaremos interactividad a estos puntos, asignando a “onclick” y “onmouseover”.

pr6

Crear los portales y añadirlos, intentar centrarlos en esos puntos, también añadirle un ID y una etiqueta a cada uno de los portales.

pr7

Y por último añadir una Shell en sentido contrario saliendo del portal naranja. También asignándole un ID y una etiqueta. El archivo SVG quedaría como sigue.

finale

Teniendo la imagen lista, ahora comenzaremos a codificar la animación:

Dentro del head del documento html agregar lo siguiente

<script src=”RUTA/snap.svg-min.js”></script>

<script src=”RUTA/main.js”></script>

 

Dentro del body:

 

<svg id=”svg” width=”800px” height=”600px” ></svg>

Esto creará un espacio de trabajo de 800×600 pixeles.

 

El contenido del html quedaría así:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Simple Portal Animation</title>

<script src=”js/snap.svg-min.js”></script>

<script src=”js/main.js”></script>

</head>

<body>

<svg id=”svg” width=”800px” height=”600px” ></svg>

</body>

</html>

 

Todo lo referente a la animación será hecho en el archivo main.js. Creamos una función que cargará los elementos que deseemos, dando atributos de ocultamiento.

window.onload = function(){

s = Snap (‘#svg’);

Snap.load(“js/svg/pr3.svg”,function(f){

g=f.select(“g”),

f.select(“#uno”).attr({visibility:’visible’})

f.select(“#dos”).attr({visibility:’hidden’})

f.select(“#blueportal”).attr({visibility:’hidden’})

f.select(“#redportal”).attr({visibility:’hidden’})

f.select(“#aim2”).attr({visibility:’hidden’})

aim=Snap.select(“#aim”)

chell = Snap.select(“#uno”)

s.append(g);

});

var testing = s.text(50, 100, “Click en los Puntos para Crear Portales”).attr({

fill: “#900”,

“font-size”: “30px”

});

}

 

Este función hacer visible el portal azul una vez se haya realizado el evento de click, se hace no visible el punto y el segundo punto donde se creará el siguiente portal se hace visible. El nombre de la función debe ser igual al nombre que se le dio en la propiedad de interactividad del objeto.
function aimclick(){

c=s.select(“#blueportal”).attr({visibility:’visible’});

d=s.select(“#aim”).attr({visibility:’hidden’});

e=s.select(“#aim2”).attr({visibility:’visible’});

}

 

Esta función rellena el círculo de color rojo cuando se hace el envento de mouseover

function onaim(){

c = s.select(“#aim”).attr({fill:’red’});

}

Una vez que se hace el evento de click del segundo círculo, comienza a ejecutarse la animación, para este caso la función animation(). Esta función selecciona a #uno, que en este caso es la Chell visible y la translada hacia el portal azul.

La función animate tiene varios argumentos de entrada, que són, para el primero que es una función que maneja varios parámetros se pone entre {}, el 2200 indica la duración en ms, mina.fadeOut indica una animación preestablecido en Snap, y animation2 indica que una vez terminada la animación sobre la Chell #uno, comenzará la animación de la Chell #dos.

function animation(){

e=s.select(“#uno”).attr({visibility:’visible’})

e.animate({ transform:’translate(900,0)’}, 2200, mina.fadeOut,animation2)

}

Esta función hará invisible a la Chell #uno, hará visible a la Chell #2 y hará su respectiva animación.

function animation2(){

h=s.select(“#uno”).attr({visibility:’hidden’})

i=s.select(“#dos”).attr({visibility:’visible’})

i.animate({transform: ‘translate(500,0)’}, 1000, mina.bounce)

}

 

Video demostrativo de la animación.

Deja un comentario