Columpia.me, experimentando con SVG y jQuery Rotate

Hacía tiempo que tenía ganas de programar algo sin sentido, sólo para divertirme.
Todo empezó en una de esas tardes tan normales. Ya sabéis, de las que te tiras 4 horas buscando dominios para una aplicación web que se te acaba de ocurrir.

Bueno, el dominio que buscaba no lo encontré. De hecho aún sigo dándole vueltas (maldita especulación de dominios!). Sin embargo, compré columpia.me. No sé, supongo que me hizo gracia y en ese momento estaba seguro que algo se me ocurriría con él.

Lo que estaba claro es que tendría que aparecer algún tipo de columpio, así que abrí Photoshop y le di a la pluma like a pro.

Después, con Ilustrator acabé el personaje y el escenario y me puse a buscar una librería de jQuery de rotaciones para animar el personaje. La idea que tenía en mente era que se pudiera arrastrar al monigote y al soltarlo se columpiara hasta pararse.

Di con jQuery Transit. Es una librería interesante. Permite crear animaciones de transformaciones sobre un selector jQuery utilizando CSS. Estuve probando, y a pesar que las transiciones eran muy suaves al final desistí, ya que no incorporaba un método para controlar la parada de éstas.

Buscando alternativas encontré jQuery Rotate, que pese a que a simple vista pueda parecer mucho menos elaborado, funciona perfectamente y además permite controlar la parada de la transición.

El uso también es sencillo, por ejemplo, para mover el columpio, basta con utilizar esta porción de código:

$(foo).rotate({
        angle: $(this).getRotateAngle(),
	animateTo: angleDest,
	easing: transition,
	duration: time
});

Donde angle es el ángulo actual, animateTo el ángulo de destino, easing la función de movimiento / aceleración y duration el tiempo que dura la transición.

Y lo más importante, para parar esa transición (útil cuando se interactúa con el personaje), se llama al método stopRotate.

Al final quedó esto:

Etiquedado como ,

Deja un comentario

Tu dirección de correo electrónico no será publicada.