Skip to content

Es bueno diversificar (Animación dinámica)

18 marzo 2010

Antes de empezar con el Software Libre, antes de entrar en la Universidad y antes siquiera de tener GNU/Linux instalado, dedicaba mi tiempo a desarrollar con Adobe (formerly Macromedia) Flash, principalmente orientado a webs. Ahora que lo pienso, el aspecto de “comunidad” que tanto se promueve en el Software Libre lo desarrollaba mucho más en aquel entonces que ahora, más que nada porque todo lo que hacía era en torno a Flash. Fui un usuario muy activo en foros de flash como after-hours, el difunto nomaster, flashla, cristalab, etc.

Como todos sabréis, Flash es una tecnología propietaria que inicialmente se ideó para trabajos esencialmente de animación multimedia, pero con el tiempo y el desarrollo de ActionScript ha llegado a convertirse en la herramienta número uno a la hora de desarrollar RIA’s y webs dinámicas… y poco accesibles, todo hay que decirlo. Después de C++ probablemente ActionScript 2 es el lenguaje en el que más he programado, y aprendí algunas cosas que luego he podido aplicar en otros lenguajes en general, y en mi proyecto en particular.

Animación dinámica

En flash, por regla general las animaciones se hacían utilizando interpolaciones de movimiento en la línea de tiempo, esto es, en un fotograma ponías el objeto a animar en la posición inicial, y en el último fotograma colocas el objeto en la posición final, y Flash automáticamente creaba los fotogramas intermedios. Esto estaba muy limitado, al menos antiguamente, ya que ahora Flash implementa un gestor de animaciones al estilo After Effects bastante complejo de usar pero muy potente.

Para sacarnos las castañas del fuego cuando queríamos hacer una animación en tiempo de ejecución había dos vertientes. La vertiente sencilla era utilizar la técnica del “Standard Exponential Slide”, que ahora mismo (Rev. 31) podéis ver en mi proyecto en estadoMenu.cpp, y que consiste en, conociendo el punto inicial y final, en cada iteración (en cada frame) se le suma a la posición actual del objeto una fracción del camino por recorrer. En código sería algo así:

x += (posiciónFinal - posiciónActual) / velocidad;

Esto tiene un inconveniente, y es que si te fijas, es como una especie de método de bisección tomando siempre el lado derecho, lo que implica que x nunca llegará a valer posiciónFinal teóricamente, y en la práctica aunque en la mayoría de los casos el redondeo hace bien su trabajo, hay veces en los que la animación no acaba. ¿No te lo crees? Bájate mi proyecto ahora mismo y ve al Estado Menú, y mientras ves la animación ten la consola al lado. Verás que, aunque los botones terminen de moverse, la animación internamente sigue porque no se ha llegado a la posición final, y hasta al menos un segundo después no sale en consola el mensaje de que la animación ha acabado.

Por otro lado, los pro’s como yo utilizaban librerías de tweening que facilitaban la cosa y añadían bastante más control y variedad. El recurso por excelencia eran las Easing Equations de Robert Penner, tanto que se hicieron oficiales a partir de Flash MX y venían integradas en el lenguaje.

Penner aportó una serie de ecuaciones para hacer animaciones en las que la velocidad variaba de forma cúbica, senoidal, lineal, etcétera, y aportaba opciones para hacer ease in, ease out y ease inout — esto es, hacer animaciones de aceleración, de frenado, y de aceleración y frenado, todo esto de forma suave (eeeease🙂 ). Podéis ver un ejemplo en una web que hice hace mucho: http://www.distrigaditana.com/

En fin, que pensando en mi proyecto, y teniendo en cuenta que las ecuaciones de Penner tienen una licencia BSD, he decidido intentar implementarlas y usarlas en C++ a ver si lo logro. Lo mejor de todo es que el capítulo del libro en el que Penner explicaba por primera y extensa vez el origen de sus ecuaciones ha sido liberado, y se puede encontrar aquí.

More to come.

No comments yet

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: