Los 12 principios de la Animación

/img/codebackdoor/design/15.jpg
.

Principio nº1: Estirar y encoger

El primer principio es el de estirar y encoger (squasch y stretch). Sin duda, un clásico dentro de la animación, y que seguro que reconoces en cuanto te lo cuente. Imagina un cubo que rebota contra el suelo constantemente. Cuando el cubo toca el suelo se encoje (stretch) y al subir, cuando de nuevo coge velocidad, se desforma estirándose (squasch). Este principio se puede emplear para cualquier objeto o personaje que queramos animar.

Nota
El principio de estirar y encoger agrega a una animación la idea de peso y flexibilidad. Puede ser aplicado a objetos simples, como un círculo rebotando o algo más complejo como tarjeta o una pantalla completa.​ Lo más importante de este principio es que el volumen del objeto no cambia cuando se estira o se encoge.
/img/codebackdoor/design/03.gif
.

Principio nº2: Anticipación

Este principio, como su nombre bien indica, anticipa que algo va a ocurrir en la escena, y el animador quiere que el espectador esté atento a la pantalla. Puede ser cualquier tipo de movimiento del personaje o de cualquier objeto que estemos animando, pero la principal función de este principio es atraer la atención absoluta del espectador.

Nota
La anticipación se usa para preparar al observador para una acción y que la animación se sienta más realista. Esta técnica también se utiliza en momentos en que va a ocurrir un evento importante para preparar al observador y que éste preste atención a lo que está a punto de suceder.
/img/codebackdoor/design/04.gif
.

Principio nº3: Puesta en escena

La puesta en escena o «stating» se basa en dar la atención a lo que es importante dentro de la escena, para que el espectador sea consciente de lo verdaderamente relevante. Este principio puede llevarse a cabo de muchas maneras utilizando la perspectiva, la luz o la sombra, por ejemplo.

Nota
Lo importante es mantener la atención del observador en lo que es relevante, evitando los detalles innecesarios. En diseño interactivo, la definición de affordances es parte de la puesta en escena.
/img/codebackdoor/design/05.gif
.

Principio nº4: Animación directa y pose a pose

Se suelen utilizar de manera conjunta para un mejor resultado de la animación. La animación directa (straight ahead) es la mejor para realizar animaciones realistas, ya que se llevan a cabo todos los dibujos para una transición mucho más realista. En la animación pose a pose solo se llevan a cabo los dibujos clave y posteriormente se van rellenando todos los demás.

Nota
La animación pose a pose implica empezar el proceso de animación dibujando los cuadros clave y posteriormente llenando los espacios (algo que los diseñadores familiarizados con Adobe Flash conocen como tweetning). ​Por lo general, se usa una combinación de ambas técnicas para mejores resultados.
/img/codebackdoor/design/06.gif
.

Principio nº5: Acciones complementarias y superpuestas

La acción complementaria (follow through) es el movimiento que sigue a una acción, es decir, es como un movimiento de amortiguación del objeto. La acción superpuesta (overlapping) representa todos esos movimientos de las diferentes partes de un personaje o un objeto, es decir, cuando un personaje camina hacia delante, el pelo de ese personaje también tiene que moverse, pero de manera diferente. Estas dos acciones se utilizan muchísimo para dar más realismo a la animación.

Nota
Las acciones complementarias y las superpuestas son técnicas de animación que se relacionan estrechamente, ya que ambas ayudan a que el movimiento sea más realista y dé la ilusión de que un objeto se mueve respetando el principio físico de la inercia
/img/codebackdoor/design/07.gif
.

Principio nº6: Acelerar y desacelerar

Uno de los principios más sencillos y utilizados. Cuando se inicia un movimiento al principio ese objeto alcanza más velocidad para simular que está acelerando (slow in). Cuando un objeto va a frenar, no puede hacerlo en seco, ya que no sería nada natural, por eso, se realiza un «slow out», es decir, ese objeto va bajando su velocidad hasta quedar totalmente quieto.

Nota
En el mundo real ningún objeto pasa del reposo absoluto al movimiento continuo en un paso: todos los objetos necesitan tiempo para acelerar o disminuir su velocidad. En animación, los objetos se mueven más despacio al principio y se ralentizan al final de una acción, para crea un efecto de arranque y frenado que haga la animación más realista.
/img/codebackdoor/design/08.gif
.

Principio nº7: Arcos

En el mundo de la animación (y en la vida real) nada se mueve de manera recta, sino que el movimiento crea ciertas curvas que dan esa sensación de movimiento tan realista. En la animación es muy importante seguir el principio de arcos (arcs) para dar fluidez a los movimientos de cualquier personaje.

Nota
Los arcos operan a lo largo de una trayectoria curva que agrega la ilusión de vida a un objeto animado en acción. Sin arcos, las animaciones se sienten rígidas y mecánicas.
/img/codebackdoor/design/09.gif
.

Principio nº8: Acción secundaria

Son imprescindibles para triunfar con nuestra animación. Como su propio nombre indica son las acciones que ayudan a la principal a destacar y a que se centre la atención en ella. No le quitan protagonismo a la acción principal, sino que le dan mayor importancia.

Nota
Las acciones secundarias funcionan mejor si se agregan al principio y al final del movimiento principal.
/img/codebackdoor/design/10.gif
.

Principio nº9: Sincronización

Podríamos decir que es la velocidad de una acción dentro de una animación, es decir, es hacer que una acción esté sincronizada con el tiempo que dura esa acción. Es de vital importancia para dar emoción a nuestra animación.

Nota
El éxito de una animación depende de cómo se represente el paso del tiempo. En ocasiones es bueno agregar un sonido incidental temprano, ya que el oído está más en sintonía con las sutilezas de la sincronización que el ojo.
/img/codebackdoor/design/11.gif
.

Principio nº10: Exageración

Imagina a un personaje que ve algo que le sorprende muchísimo. ¿Cómo podríamos realizar una animación en la que se exagere mucho esa emoción? Seguro que has pensado en que se le abra la boca hasta el suelo o se le salgan los ojos de sus órbitas. Así es precisamente cómo funciona el principio de exageración (exaggeration).

Nota
La exageración presenta las características y acciones de un objeto de una manera extrema para obtener un efecto cómico o dramático
/img/codebackdoor/design/12.gif
.

Principio nº11: Dibujo sólido

Este principio hace referencia a que en una animación debemos trabajar con las formas dentro de un espacio con tres dimensiones. Nuestros personajes u objetos deben tener su propio peso y volumen.

Nota
Para lograrlo es necesario comprender y aplicar correctamente conceptos básicos de perspectiva, volumen, peso, equilibrio, iluminación, etc. en referencia de la experiencia del observador en el mundo real.
/img/codebackdoor/design/13.gif
.

Principio nº12: Atractivo

El último de los principios, pero no por ello menos importante. Es clave que los espectadores conecten con el personaje, y para ello se utiliza este principio, el atractivo o appeal. Este es uno de los puntos fuertes que tenemos que usar para que el espectador no olvide nunca nuestra animación.

Nota
El atractivo en la animación puede ser difícil de cuantificar porque cada persona tiene una idea y expectativas diferentes sobre lo que consideran atractivo, y esta percepción también cambia entre culturas y con el paso del tiempo.
/img/codebackdoor/design/14.gif
.

¡Ánimo!, en la próxima entrada ya empezaremos a ver conceptos y usar papel y lápiz.

Siguiente - Papel & Lápiz(Dev)
/img/ref.png
.