Comunidad de diseño web y desarrollo en internet online

Bases de animación para programadores

Hoy en día hacer algo original o totalmente innovador es una tarea muy difícil, pero siempre hay algo que hacer o mejorar. Nuestro objetivo en este pequeño tutorial es mejorar la creación de animaciones, estableciendo
algunos patrones simples y básicos, esto sin alejarnos de lo “correcto”.

Tipos de movimientos en las animaciones



Estableceré 2 palabras para definir los movimientos buenos y los malos:

Humano = Bueno.
Mecánico = Malo.


Un movimiento Mecánico es dejar que el software haga todo solo y esperar que tus animaciones sean iguales a las de Pixar, ya imaginaran el resultado.

Una animación entra a ser Humana cuando 2 factores permanecen en armonía:

Tiempo.
Espacio.


En otras palabras, nosotros podemos percibir que un objeto esta en movimiento si nuestro cerebro es capaz de interpretar que ese objeto cambio de posición (Espacio) en un lapso (Tiempo) suficiente para que nuestros ojos manden esa señal al cerebro.

Ahora lo que tenemos que hacer es cumplir esos 2 factores para que nuestras animaciones sean lo mas cool posible.

Curvas de Velocidad



Aquí hay 2 objetos animados, uno de manera Mecánica y otro de la manera Humana. Ambos con los 2 factores por iguales, Tiempo = 20 Frames, Espacio = 1415 Px. Cierto los 2 cumplen los mismo factores, pero sin embargo uno se ve mejor que el otro:

Mecánico:

Humano:


En la figura roja el objeto se desplaza sin tener ninguna alteración al inicio o al final de su trayectoria de movimiento, comienza con una velocidad inicial que se altera muy poco durante su recorrido, es muy lineal.

En cambio la figura violeta, el objeto comienza con una velocidad inicial mínima, en medio de su trayectoria acelera, pero al final disminuye aun más, cercano a las leyes de la física que percibimos a nuestro alrededor, es por eso que es mas natural para la mente humana asimilarlo. Esto genera que el mejor movimiento sea el más “común” por la simple razón que nuestro cerebro lo traduce como “real”. No es que el movimiento lineal este mal si no que ese movimiento constante no se ve bien aplicado en objetos que tienen un inicio y un fin dentro de una escena.

Una de las cosas que tenemos que aprender antes que nada, para hacer buenas animaciones, es manejar el lenguaje de curvas, no existe software de animación que no posea un editor de curvas (excepto con los que animas cuadro a cuadro) y si usan uno que no las tenga, dejen de usarlo.

Alterar la curva de velocidad nos dará unos movimientos más ricos visualmente, y según donde como la orientemos va a cambiar nuestra animación, Voy a dar algunos ejemplos con After Effects, el software mas usado para animación.

Cambiando la orientación a Vertical :



Escalando el objeto y Rotando:



Pero me imagino que ya deben estar un poco aburridos de las esferas animadas, así que, con un simple ajuste de velocidad, les dejo un hermoso logo diseñado por el Team Mejorándola, aplicando el lenguaje de curvas:



Tips al momento de Animar:



La cantidad de frames por segundo es SUPER IMPORTANTE al momento de comenzar cualquier animación, lo ideal es usar 30 frames por segundo, esto asegura que nuestras animaciones serán mas suaves, aunque hay casos muy específicos donde 24 frames es mejor, como cuando animamos citador a cuadro, pero ese no es nuestro caso de los ejemplos.

Antes de animar cualquier elemento, es importante dividir los tiempos en los que los objetos van a entrar, permanecer y salir de nuestra escena, esto es de mucha ayuda, ya que nos puede establecer algunos posibles movimientos que podemos hacer con esa cantidad de tiempo. (Tiempo < Espacio).

Siempre piensen como un objeto se podría comportar en el mundo real y llevarlo a eso en nuestra animación (No tiene que ser tal cual como en el mundo real, podemos exagerar las cosas siempre y cuando se vean bien).

Prueba tus movimientos, al igual que en programación, hay que hacer test y al exceso, si tus animaciones no las sientes bien, busca alguna referencia que reflejen el movimiento que quieres hacer.

Ve siempre por lo simple, dedica menos tiempo en movimientos generales, transformaciones, transiciones, etc y usa algo simple pero poderoso, con detalles bien trabajados.

Bueno, espero les guste este pequeño tutorial de iniciación, envíen sus comentarios a ver que les parece, pronto les traeré uno, donde animaremos paso a paso, los increíbles iconos de los cursos de Mejorándola.

Saludos
@juandjgl

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate