Los 12 principios de la animación

Los 12 Principios de la Animación

Last Updated on July 5, 2024
by Ilka Perea Hernández

No importa si dibujamos a mano, con programas 2D, o con un complejo software de modelado 3D, todos los proyectos de animación siguen unos fundamentos conocidos como los 12 Principios de la Animación. La correcta aplicación de estos principios garantizará el nivel de expresión y el movimiento adecuado que se espera en una animación.

Contexto Histórico

Ollie Johnston at the easel in about 1957 with, from left, Milt Kahl, Marc Davis, Frank Thomas and Walt Disney. Credit:Walt Disney Studios
Ollie Johnston en el caballete hacia 1957 con, de izquierda a derecha, Milt Kahl, Marc Davis, Frank Thomas y Walt Disney. Crédito: Walt Disney Studios. Fuente: The New York Times.

Érase una vez…

Al principio, las animaciones se hicieron con poca o ninguna referencia a la naturaleza. Todo comenzó cuando Walt Disney notó que el nivel de animación era insatisfactorio. De esta preocupación surgió una nueva forma de dibujar figuras humanas y animales en movimiento, donde el análisis de la acción real se volvió importante para el desarrollo de la animación.

Cuando consideramos un proyecto, realmente lo estudiamos, no solo la idea superficialmente; sino todo sobre ella.” — Walt Disney

De todos estos ejercicios y estudios emergieron nuevos conceptos y varias técnicas, pero eran tan novedosas que no tenían un nombre que las definieran, por lo que era difícil explicarlas entre animadores. Con el fin de mejorar la comunicación entre ellos, estas nuevas prácticas adoptaron nombres propios, lo que hoy conocemos como Principios de Animación.

Los Principios de la Animación

Los Doce Principios básicos de la animación de Walt Disney son un conjunto de principios dados a conocer por los animadores de Disney — Ollie Johnston y Frank Thomas — en su libro The illusion of life: Disney Animation. Representan el punto de partida para cualquier persona que desea incursionar en el creativo campo de la animación. Conocerlas y practicarlas no sólo te ayudará a crear animación, sino que también hará que tu animación tenga alma y viva.

Frank Thomas and Ollie Johnston
Frank Thomas y Ollie Johnston. Fuente: My Dreams of Disney.

Estirar y Encoger

The 12 Principles of Animation: Squash and Stretch - Bouncing Ball
Comparación de dos círculos. El círculo de la derecha sigue el principio de estirar y encoger, por lo que parece una pelota que rebota.

Principio de Flexibilidad

La exageración y deformación de los cuerpos, como si fueran flexibles, sirve para lograr un efecto más divertido, o más dramático. Para este principio, la velocidad y la inercia, el momento, el peso y la masa deben ser considerados.

Happy Box by Felippe Silveira
Fuente: Happy Box by Felippe Silveira

Este principio es útil para las expresiones faciales y corporales de los personajes cuando se quiere enfatizar ciertas emociones y movimientos.

Anticipación

The 12 Principles of Animation: Anticipation - Rolling Balls
El círculo se mueve sobre una línea como una bola que rueda sobre una superficie. La bola se prepara para avanzar rodando ligeramente hacia atrás. Este movimiento anuncia lo que va a ocurrir para guiar la vista del espectador.

Prepara tus ojos

Este principio prepara al espectador para la acción principal, que es lo que el personaje pretende hacer. Los movimientos deben ser anticipados para guiar la mirada del espectador y anunciar lo que va a suceder.

The rabbit moves downward (anticipation) to gain impulse when jumping (the main action).  Source: Wattpad.com.
El conejo se mueve hacia abajo (anticipación) para tomar impulso al saltar (la acción principal). Fuente: Wattpad.com.
2017 – Spine Animation Project: Kingdom X (part 2) by So Amy
Este personaje lanza un hacha de doble filo. Necesita moverse ligeramente hacia atrás para impulsar el hacha. Este movimiento nos permite saber hacia dónde la lanzará el personaje. Fuente: 2017 – Spine Animation Project: Kingdom X (part 2) por So Amy

Esa técnica se divide en tres pasos:

  1. anticipación (nos prepara para la acción)
  2. la acción en sí misma
  3. la reacción (recuperación, término de la acción).

Escenificación

The 12 Principles of Animation: Staging - Bouncing Balls
Primero, el espacio está vacío. El espectador no sabe dónde se colocará la acción. Más tarde, una elipse blanca, como un efecto de luz, enfoca la atención del espectador en un punto, donde la bola, el personaje, aparece.

Enfócate en el Escena

Con este principio traducimos las intenciones y el ambiente de la escena a posiciones y acciones específicas de los personajes. Poniendo en escena las posiciones claves de los personajes definiremos la naturaleza de la acción. Hay varias técnicas de puesta en escena para contar una historia visualmente. Esconder o revelar el punto de interés, o crear acciones en cadena (acción – reacción) son dos ejemplos. El uso efectivo de los planos y ángulos de cámara ayudan a enfocar al espectador en la escena. Poniendo en escena las posiciones claves de los personajes definiremos la naturaleza de la acción.

Los reflectores indican los puntos de interés. Hero Section – 3D animation por Nikita Melnikov
California Dream by Maxim Goncharov.
El movimiento de la cámara contribuye a la atención de la escena. El trucking es como la dollying, pero implica un movimiento a la izquierda o a la derecha. Este movimiento de la cámara nos ayuda a centrarnos en el vehículo. Fuente: California Dream por Maxim Goncharov.
: Travel_2.0 Nikita Melnikov.
El movimiento de la cámara atrae la atención de los espectadores. Fuente: Travel_2.0
Nikita Melnikov.

El objetivo principal de la escenificación es decir a los espectadores exactamente donde ocurrirá la acción para que no se pierdan nada. Esto significa que sólo se produce una idea a la vez, o de lo contrario los espectadores pueden estar mirando la situación equivocada. Un buen ejemplo de puesta en escena en movimiento es el ojo, que se dibuja en un movimiento en una escena fija.

Acción Directa y Pose a Pose

The 12 Principles of Animation: Straight Ahead Action and Pose to Pose
Above: Pose to Pose. Below: Straight Ahead Action.

Acción Fluida vs Acción Controlada

En la acción directa creamos una acción continua, paso a paso, hasta concluir en una acción impredecible. En pose a pose desglosamos los movimientos en series estructuradas de poses clave. Pose a pose desglosa los movimientos en series estructuradas de poses clave.

Loading Concept by Loho Shee.
El gif animado, los banners web y los preloaders suelen ser animados Pose a Pose. Fuente: Loading Concept by Loho Shee.
Scene of Cinderella (1950).   MTV.com.
La acción directa se utiliza a menudo en la animación tradicional. Fuente: Escena de La Cenicienta (1950). MTV.com.

La acción directa da fluidez al movimiento, y proporciona un aspecto fresco, suelto y desenfadado. En la acción pose a pose se desarrolla un planteamiento inicial. Es una animación más controlada que viene determinada por el número de poses, y las poses intermedias. Se pueden mezclar estas dos técnicas.

Google celebrates the existence of water on the planet Mars. This animation is a mix of both techniques. Source: eluniversal.com.mx.
Google celebra la existencia de agua en el planeta Marte. Esta animación es una mezcla de ambas técnicas. Fuente: eluniversal.com.mx.

Acción Continuada y Superposición

The 12 Principles of Animation: Follow Through and Overlapping Action
El círculo aumenta y disminuye de tamaño. Parece una pelota que se mueve hacia fuera, se detiene de repente y se mueve hacia dentro. El ligero rebote responde al principio de acción continuada y superposición.

Nada se Detiene a la Vez

Estas dos técnicas ayudan a enriquecer y dar detalle a la acción. En la acción continuada, el personaje aún sigue moviéndose después de la acción principal. En la acción superpuesta, se mezclan movimientos múltiples que influyen en la posición del personaje. Prácticamente nada se detiene al mismo tiempo.

Debido a la torsión, el helado no se detiene por completo. Fuente: Ice cream 2.0 por Nikita Melnikov.
Scene of Howl no Ugoku Shiro (Howl's Moving Castle) taken from Ghiblish.
Presta atención al movimiento continuo de los pendientes de Howl. Fuente: Escena de Howl no Ugoku Shiro ( El increíble castillo vagabundo) tomado de Ghiblish.

Prácticamente nada se detiene al mismo tiempo. En la Acción Continuada, el personaje sigue moviéndose después de la acción principal. En la Superposición, se superponen múltiples movimientos que influyen en la posición del personaje.

Entradas Lentas y Salidas Lentas

The 12 Principles of Animation: Slow In and Slow Out -ouncing Balls
Comparación entre dos círculos. Ambos círculos siguen el principio del Squash y el Stretch. Ambos parecen bolas que rebotan. Sin embargo, el de la derecha baja rápidamente, golpea una superficie y sube muy rápido hasta que no puede superar la fuerza de gravedad. En ese momento, la pelota está suspendida en el aire durante un breve período de tiempo. Este principio se basa en la aceleración y la inercia.

¡Desacelera!

Se trata de acelerar el centro de la acción, y ralentizar el principio y el final de la misma. En el mundo físico, los objetos y los humanos aplican el impulso antes de que puedan alcanzar la máxima velocidad. Del mismo modo, lleva tiempo ralentizarlo antes de que algo pueda detenerse por completo.

This principle is about acceleration and deceleration. Kick Push by Markus Magnusson.
Este principio tiene que ver con la aceleración y la desaceleración. Kick Push por Markus Magnusson.
Este principio se utiliza bastante en la interfaz de usuario para simular transiciones suaves y elegantes. Fuente: Freelance Platform por Shakuro
Fuente: Cinema Tickets App Animation por Shakuro Graphics 

En el mundo físico, los objetos y los seres humanos aplican un impulso antes de alcanzar la máxima velocidad. Del mismo modo, se necesita tiempo para reducir la velocidad antes de que algo pueda detenerse por completo.

Arcos

The 12 Principles of Animation: Arc - Bouncing Ball
Una pelota que rebota se mueve en arcos.

Un Principio Curvo

Al utilizar trayectorias en arco para animar los movimientos del personaje le estaremos dando una apariencia más natural, ya que la mayoría de las criaturas vivientes se mueven en trayectorias curvas, nunca en líneas perfectamente rectas.

The lollipop moves with the breeze following a curved line.  Source:  Lollipop Loop by Ben Chwirka.
La paleta se mueve con la brisa siguiendo una línea curva. Fuente: Lollipop Loop por Ben Chwirka.

Cuando una persona está disparando una flecha, apenas vuela en línea recta. La gravedad hace que los objetos en movimiento se arqueen entre los puntos inicial y final. Incluso muchos de los movimientos naturales en el cuerpo humano se mueven en arcos, como brazos, manos y dedos, etc.

Source: FINGER RIG by Peter Arumugam.
Fuente: FINGER RIG por Peter Arumugam.

Acción Secundaria

The 12 Principles of Animation: Secondary Action - Bouncing Balls
La pelota que rebota es la acción primaria, la sombra debajo es la acción secundaria. La forma y la posición de la sombra dependen de la pelota.

Según el Principal

Consiste en pequeños movimientos que complementan la acción principal y, de hecho, son consecuencia de ella. La acción secundaria nunca debe ser más marcada que la acción principal.

The stars (representing the sound) are the consequence of the main action, the drumming.  Source: Presto Sticker by DeeKay.
Las estrellas (que representan el sonido) son la consecuencia de la acción principal, el tamborileo. Fuente: Presto Sticker por DeeKay.
The shadow change size — secondary action — according to the bouncing of the Game Boy — main action.  Source: GameChap by Mads Frantzen.
La sombra cambia de tamaño — acción secundaria – según el rebote de la Game Boy — acción principal. Fuente: GameChap por Mads Frantzen.

En el mundo físico, podemos observar el movimiento primario solo en el movimiento si una persona está caminando. Las acciones secundarias, como una persona que balancea los brazos mientras camina o los pájaros que ondulan sus plumas, ayudan a apoyar los movimientos primarios. Incluso las acciones más pequeñas, como el parpadeo de los ojos, también se consideran en acciones secundarias. En la animación secundaria, es importante que no disminuya la animación principal.

La caída de la pluma es la acción secundaria — y posterior — del movimiento de las manos. Fuente: Escenario de Howl no Ugoku Shiro (El Increíble Castillo Vagabundo) de
La caída de la pluma es la acción secundaria — y posterior — del movimiento de las manos. Fuente: Escenario de Howl no Ugoku Shiro (El Increíble Castillo Vagabundo) de wattpad.com.

Ritmo

The 12 Principles of Animation: Timing - Bouncing Ball
Las líneas guías muestran el ritmo de rebote de la pelota.

Todo es Cuestión de Tiempo

El ritmo da sentido al movimiento. El tiempo que tarda un personaje en realizar una acción, o las interrupciones y dudas en los movimientos definen la acción. También contribuye a dar idea del peso del modelo, y las escalas o tamaños.

Timing - Mishu
Fuente: animationdesk.tumblr.com

Este principio también ayuda a establecer la personalidad de los personajes y las emociones que quieren expresar. Utilizaron el ritmo como la principal herramienta para comunicar la personalidad a través de formas planas que son representativas de las partes del cuerpo.

Exageración

The 12 Principles of Animation: Exaggeration - Bouncing Balls
El círculo se mueve como una pelota que rebota. Cada vez que la bola golpea la superficie, causa una reacción. El movimiento del suelo ha sido exagerado para enfatizar el rebote.

¡Llama la atención!

Acentuar una acción, generalmente ayuda a hacerla más creíble. Básicamente implica alterar las características físicas de un personaje para que pueda captar la atención del público.

Principles of Animation: Exaggeration
Fuente: Yann de Preval
Source: Bike Cycle by Levon
Fuente: Bike Cycle por Levon

Con este principio se enfatiza los rasgos físicos de un personaje así como también su comportamiento, su condición, sus movimientos, etc. Básicamente implica alterar las características físicas de un personaje para que pueda captar la atención del público.

Source: Dribbler by Teodor Hristov for Lobster.
Fuente: Dribbler por Teodor Hristov para Lobster.

Dibujo Sólido

The 12 Principles of Animation: Solid Drawing - Bouncing Balls
La forma, la luz y la sombra de este círculo hacen que parezca una pelota. Aún más, el espectador podría adivinar el material y el peso de la bola.

Formas reconocibles y tridimensionales

Un buen modelado y un sistema de esqueleto sólido (o un dibujo sólido como se decía en los años 30) ayudarán a hacer que el personaje cobre vida. Significa que el animador debe tener habilidades para comprender las formas tridimensionales en términos de peso, equilibrio, luz y sombra.

Un dibujo 2D se percibe fácilmente como un entorno 3D. Fuente: Pokeblocks (WIP) por Victoria Joh.
Un dibujo 2D se percibe fácilmente como un entorno 3D. Fuente: Pokeblocks (WIP) por Victoria Joh.
The volume and weight must be perceptible even if the animation is 2D.  Source: #BOOTYMOVIN' by Joris van Raaij
El volumen y el peso deben ser perceptibles aunque la animación sea 2D. Fuente: #BOOTYMOVIN’ por Joris van Raaij

Las poses de los personajes deben ser claras y expresivas con siluetas fácil de reconocer. Significa dibujar su imagen de tal manera que parezca viva, considerando su centro de equilibrio y distribución del peso.

Each type of TV is recognizable by its own shapes.  Source: Televolution by ThisIsNetsu from  imgur.com
Cada tipo de televisor es reconocible por sus propias formas. Fuente: Televolution por ThisIsNetsu from imgur.com

Personalidad o Apariencia

The 12 Principles of Animation - Appeal-Park-Ball-and-Balloon-1
Appearance creates emotional connections with the character. By the way… What are the two of them talking about?

Conecta con tu Público

Se trata de proporcionar conexión emocional con el espectador. La forma de ser del personaje debe ser coherente con su forma de moverse.

It is easy to identify the mood and personality of this character. Source: Presto walk cycles by Markus Magnusson.
Es fácil identificar el estado de ánimo y la personalidad de este personaje. Fuente: Presto walk cycles por Markus Magnusson.

Un personaje atractivo no siempre es bonito. Incluso un personaje feo o malvado con cierto nivel de carisma puede ganarse la empatía del espectador si su apariencia se ajusta a su personalidad. La forma de ser del personaje debe ser coherente con su forma de moverse.

Halloween Gif #1 - Dracula  -Kyle Jones
Source: Halloween Gif #1 – Dracula – Kyle Jones

Resumiendo

  • Los Doce Principios de la Animación de Walt Disney son una serie de directrices de los animadores de Disney – Ollie Johnston y Frank Thomas – en su libro “The Illusion of Life: Disney Animation”.
  • Los principios son encoger y estirar, la anticipación, la escenificación, la acción directa y de pose a pose, la acción continuada y superposición, la entrada y salida lentas, los arcos, la acción secundaria, el ritmo, la exageración, el dibujo sólido y la personalidad o apariencia.

Algunas Consideraciones

Los 12 principios de la animación son los cimientos sobre los que descansan los proyectos de animación bien ejecutados. Estos principios no son reglas rígidas que deben seguirse, pero sí herramientas teóricas de comprobada eficacia.

Junto a los conceptos básicos de la animación, práctica constante y una actitud creativa, se pude lograr alcanzar un estilo artístico y propio del animador. Estas características aunadas a la aplicación de estos principios, sin lugar a duda, dará como resultado un producto único, innovador y distintivo que será apreciado por los espectadores. Estas características, combinadas con la aplicación de estos principios, darán lugar sin duda a un producto único, innovador y distintivo que será apreciado por los espectadores.

Algo de Literatura

Para aquellos diseñadores deseosos de profundizar en este dinámico campo, me gustaría recomendarles dos libros esenciales que destacan como guías imprescindibles:

  • The Illusion of Life: Disney Animation por Ollie Johnston y Frank Thomas
  • Timing for Animation por Harold Whitaker y John Halas.
Books of Animation for Graphic Designers.

“The Illusion of Life: Disney Animation” por Ollie Johnston y Frank Thomas

Publicado por primera vez en 1981, “The Illusion of Life” sigue siendo una obra maestra atemporal en el ámbito de la literatura de animación. Escrito por dos de los legendarios Nueve Ancianos de Disney, Ollie Johnston y Frank Thomas, este libro ofrece una profunda exploración de los principios y técnicas que han definido el legado de animación de Disney.

“Timing for Animation” por Harold Whitaker y John Halas

En el ámbito de la animación, el tiempo lo es todo. Para los diseñadores que deseen perfeccionar este aspecto esencial del proceso de animación, “Timing for Animation”, de Harold Whitaker y John Halas, es un recurso indispensable.

Publicada originalmente en 1981 y ahora en su cuarta edición, esta guía definitiva ofrece un examen detallado de los principios del timing y el movimiento en animación. Basándose en su amplia experiencia en el sector, Whitaker y Halas ofrecen consejos prácticos y técnicas para conseguir una sincronización eficaz en las secuencias animadas.

¿Qué piensas?

En la sección de comentarios, dime si ya conocías estos principios. Como diseñador, ¿has realizado algún proyecto de animación y cómo ha sido tu experiencia? ¿Qué libro recomiendas para aprender sobre animación?

Cita este post

Comparte

Difunde el amor… ¡y este post!

Si te ha gustado, comparte este post en tus redes sociales. Los mejores diseñadores comparten lo bueno con los demás.

Graphic design, branding, animation and semiotics books - ilkaperea.com

Bibliografía

  • Gyncild, B.; Fridsma, L. (2018). Adobe After Effects CC Classroom in a Book.  Adobe Press.  
  • Jackson, C. (2017). After Effects for Designers: Graphic and Interactive Design in Motion. Routledge.
  • Johnston, O.; Thomas, F. (1995).  The Illusion of Life: Disney Animation. Disney Editions.
  • Shaw, A. (2016).  Design for Motion. Fundamentals and Techniques of Motion Design. Focal Press.
  • Whitaker, H.; Halas, J.; Sito, T. (2009). Timing for Animation. Focal Press

Share your thoughts