¿Cómo aplicar los principios de la animación en entornos digitales?

Se conocen como “los 12 principios de la animación” a las pautas formuladas por los animadores de Disney Ollie Johnston y Frank Thomas. Fueron estipuladas en 1981, dentro de la obra The Illusion of Life: Disney Animation, escrita por ambos artistas.

Pero, ¿para qué se utilizan? Permiten lograr la creación de animaciones creíbles, emotivas y con movimiento realista. Y si bien nacieron para la animación tradicional, hoy en día se aplican en animación digital, gráficos en movimiento, interfaz de usuario (UI/UX) y contenido multimedia. (1)

¿Estás estudiando animación o quieres especializarte con la Maestría en Animación 3D para las Industrias del Entretenimiento? En este blog te contamos todo lo que necesitas saber de los 12 principios de la animación.

¿Qué son los principios de la animación?

Los principios de la animación fueron creados por animadores de Disney. La razón de ello fue la necesidad de apoyar en la formación de jóvenes animadores que ingresaban al estudio. Después, fueron compiladas por Thomas y Johnston y, como dicen por ahí, el resto es historia. Así fue como llegaron al resto de animadores, sin necesidad de entrar a trabajar al estudio del famoso ratón.

El libro The Illusion of Life: Disney Animation puede considerarse como una guía en la cual se recogen principios importantes para la animación. Física, dinámica, composición e interpretación: todo lo que se necesita para generar la ilusión de movimiento en una imagen animada. Ten en cuenta que cada uno de esos principios fue utilizado para orientar el lenguaje artístico del estudio Disney durante su punto máximo de expansión. (2)

Así que podemos responder a la pregunta de qué son los 12 principios de la animación, diciendo que son el alma de la animación.

¿Cuáles son los 12 principios de la animación?

Ahora es momento de saber cuáles son los 12 principios de la animación. Las doce reglas esenciales son:

1. Squash and Stretch (Compresión y estiramiento)

Este es el primero de los principios de animación 2D. Consiste en exagerar para lograr un efecto más dramático o cómico, llevando incluso a las deformaciones de los cuerpos. Mediante la exageración de volumen en el movimiento, se simula la musculatura de los seres vivos, los movimientos que tú o cualquiera realizan en su día a día. Así, es posible darle vida al objeto, dando una visualización clara al movimiento.

2. Anticipation (Anticipación)

Con la anticipación es posible preparar al espectador para una acción determinada. Esto hace que la animación se sienta más realista, pues hace que las personas presten atención a aquello que está por suceder. Vaya, que ya los tendrás preparados para lo que sigue.

Como parte de los 12 principios de la animación, la anticipación permite guiar a la persona detrás de la pantalla hacia la acción. De este modo, se nutre la historia o el mensaje que se desea transmitir.

3. Staging (Puesta en escena)

Otro de los 12 principios de la animación es la puesta en escena. Se trata de una herencia directa del cine y el teatro cuyo propósito es dirigir la atención del espectador. En otras palabras: debes indicarles a las personas qué es lo más importante dentro del campo de visión, a qué deben prestarle mayor atención.

4. Straight-ahead action and Pose-to-pose (Acción continua y poses clave)

Aquí se contraponen los dos sistemas principales de animación con los que solían trabajar los animadores clásicos de Disney. En Straight-ahead, se dibujan fotogramas, uno a uno, teniendo claro el movimiento que se desea animar. Se aprovecha la naturalidad y fluidez, lo que crea un movimiento progresivo.

En las Poses Clave (Pose-to-pose), todo movimiento se estructura en poses principales y hace uso de poses de intercalado como relleno. Con este método es posible mejorar el control de tiempo, además de simplificar el proceso de animación.

Como parte de los 12 principios de la animación digital, este principio se suele configurar desde el segundo método (Pose-to-pose).

5. Follow-through and Overlapping action (Acción tras el movimiento principal)

Este principio se trata de la continuidad en la acción del personaje. Para ello, harás uso de mecánicas de movimiento en cadena y acción superpuesta. Al trabajar juntas, logran un realismo que aplica las leyes de la física, agregando naturalidad al movimiento y cuestiones como la inercia.

6. Slow in and Slow out (Aceleración y desaceleración suaves)

Otro de los principios de la animación digital es el Slow in and Slow out. Aquí se relaciona la resistencia que se debe vencer para ponerse en marcha, así como la fuerza requerida para detenerse. En un entorno digital, esto se controla desde gráficas Bézier, las cuales interpretan la relación entre magnitud y tiempo.

7. Arcos (trayectorias curvas naturales)

Como parte de los 12 principios de la animación 3D, el principio Arcs describe cómo los elementos dentro de un sistema mecánico tienden a desplazarse de manera curva. Mantener trayectorias excesivamente rectas en los movimientos es un error común entre animadores noveles. Con este tipo de movimiento, los personajes se ven mecánicos, como pequeños robots.

8. Secondary Action (Acción secundaria)

Dentro de los 12 principios de la animación, la acción secundaria completa la información mostrada de un personaje u objeto. Al animar los elementos secundarios, se dota de cierto sentido al personaje, pero no olvides que debe tratarse de elementos que aporten a la historia o al desarrollo que se desea contar.

9. Timing (Cronometración)

El principio de timing o cronometración es fundamental para generar ritmo y permitirle al personaje expresar sus emociones. Que exista cierto flujo entre pausas y movimientos crea cierta expectación en el espectador. Dependiendo de la cantidad de fotogramas, se condiciona el proceso de animación, proporcionando peso, velocidad e intención al ambiente de la animación.

Esto, como ya dijimos, genera un ambiente envolvente, lo que facilita a tu personaje o a su entorno comunicar una idea o emoción.

10. Exaggeration (Exageración)

La exageración ayuda a reflejar esas claves de la acción. Como ocurre en el teatro: si se exagera una expresión, es para que el público la note porque, por la distancia y las luces, es difícil de verlo si se hace muy discreto.

En el mundo de la animación, incluso se pueden escuchar los parpadeos, los guiños y los arqueos de ceja. Con todo esto, se acentúa el gesto para que el espectador pueda prestar atención a ese gesto, a lo que se busca transmitir con él. (4)

11. Solid Drawing (Dibujo sólido o estructuras coherentes)

El penúltimo de los principios de la animación 3D es el dibujo sólido, también conocido como “estructuras coherentes” o por su nombre en inglés, Solid Drawing. Este principio hace referencia a un objeto o personaje que es capaz de proyectar profundidad y perspectiva en términos de animación, sin olvidar el volumen y la coherencia.

Aquí es importante que reflexiones en la configuración del espacio desde el volumen. Te ayuda a que tus historias no se vean acartonadas, sino como elementos interesantes y atractivos para los espectadores.

12. Appeal (Atractivo visual)

El último de los principios de la animación lleva a pensar en la necesidad de tu personaje de expresar su personalidad y conectar con el público. Esto lo puedes lograr con movimiento, colores, características, el atuendo y la configuración por sí misma.

Piensa en aquello que distingue al personaje u objeto del resto: colores característicos, atuendos, cabello… Lo que sea, pero, ¡hazlo real!

Ejemplos de los 12 principios de la animación

El proceso de animación es sumamente interesante, ¿verdad? No solo desde la teoría, sino también en la aplicación. A continuación, te presentamos algunos ejemplos de los 12 principios de la animación:

• Una pelota que se aplasta al rebotar y se estira antes de tocar el suelo, manteniendo su volumen, es un claro ejemplo de Squash and Stretch.
• Cuando un personaje toma mucho aire, inflando de manera exagerada el estómago, para después gritar, es un ejemplo de anticipación y exageración.
• Ahora, en las animaciones donde el pelo o la ropa del personaje permanecen en movimiento aun cuando ha dejado de correr o porque está corriendo aire, es un ejemplo de implementación de Follow-Through and Overlapping Action.
• Y si a esa escena de ropa y pelo moviéndose, agregamos un brazo que lanza una pelota, la cual se mueve en trayectoria curva, estamos hablando de Arcs.
• Pero, si este mismo personaje parpadea, mueve la cabeza o se muerde los labios después de lanzar la pelota, es una aplicación clara de Secondary Action.

Aplicación de los principios de animación en entornos digitales

Después de revisar esos ejemplos de 12 principios de la animación, es momento de que conozcas brevemente su aplicación en entornos digitales.

En diseño UI/UX, de acuerdo con la autora y diseñadora UX Zulkifli, el principio de slow in and slow out suaviza transiciones de botones o interfaces. Con esto se logra una experiencia más fluida a la vista del usuario. (4)

Cuando se implementa en marketing digital y animaciones de branding, se suelen implementar principios como anticipación y staging para generar cierta expectativa. La Coca-Cola, por ejemplo, emplea squash and stretch y appeal para conectar con las emociones de sus clientes potenciales.

¿Te gustaría conocer las herramientas y técnicas para implementar estos principios en tus animaciones? Te invitamos a especializarte con la Maestría en Animación 3D para las Industrias del Entretenimiento.

Referencias bibliográficas

1. (s.f.). Understanding the 12 principles of animation. Adobe Creative Cloud. Retrieved from https://www.adobe.com/creativecloud/animation/discover/principles-of-animation.html
2. (31 de octubre, 2023). 12 Principles of Animation Explained! [With Examples]. Animaker. Retrieved from https://www.animaker.com/hub/12-principles-of-animation/
3. Nicolene Burger. (02 de enero, 2023). 12 Principles of Animation – Learn the Fundamentals of Animation. Art in Context. Retrieved from https://artincontext.org/12-principles-of-animation/
4. Zulkifli, A. (29 de diciembre, 2023). The 12 Principles of UI/UX Animation: Elevating