Uso de los 12 principios de animación de Disney en su próximo proyecto de diseño web


En el momento exacto en que estoy escribiendo esto, mi oficina tiene 17 algo-u-otros de Disney en las paredes y estantes. De diecisiete. Incluso yo estoy sorprendido. Por mucho que me encanta Disney, la magia creada a través de los 12 principios de la animación se me escapa incluso a mí cuando veo una de sus películas.

Y ese es el punto. Los 12 principios de la animación son sutiles. Hacen impresiones en los espectadores sin que los espectadores se den cuenta. Nos hacen reír, llorar, simpatizar y soñar, a veces dentro de la misma escena. Y crean personajes y objetos que se ven y se mueven de manera tan realista que quieres extender la mano y tocarlos. (Alguna vez has visto Coco? Yo descanso mi caso.)

principios de animación

Esos 12 principios de la animación ahora proporcionan la base para todo el trabajo en movimiento, Disney y otros. También son relevantes para campos fuera de la animación, como el diseño web.

Una breve historia de los 12 principios de la animación

Los 12 principios de la animación fueron presentados por Ollie Johnston y Frank Thomas, dos de los Nueve Viejos de Disney, el grupo principal de animadores que se unieron en las décadas de 1920 y 1930. Johnston y Thomas escribieron La ilusión de la vida: animación de Disney en 1981, y sigue siendo la "biblia" de la animación. El libro analiza de cerca los enfoques de los principales animadores de Disney para extraer los 12 principios. Si bien estos principios se diseñaron originalmente para la animación dibujada a mano, han sobrevivido a los cambios tecnológicos y ahora los utilizan los animadores por computadora (como Pixar) y diseñadores web.

Los 12 principios de la animación y cómo informan el diseño web

Hay una razón por la que estos principios han resistido la prueba del tiempo. A veces, lo básico sigue siendo lo mejor.

1. Aplastar y estirar

principios de animación

Fuente: Chris Gannon a través de Giphy

“Squash and Stretch” es el más importante de los principios de animación. Da a las animaciones flexibilidad, gravedad, peso y masa. Cuando un objeto está en movimiento, no tiene la misma forma.

los volumen sin embargo, tiene que ser consistente. Estirar requiere adelgazar el objeto y más; aplastar lo hace más corto y más amplio. Si lo hiciera más delgado o más corto, no retendría el mismo volumen.

En el diseño web, "Squash and Stretch" se utiliza cuando los objetos necesitan ser llamativos. Si hay un objeto que debe parecer que tiene masa física, este principio puede funcionar.

principios de animación

2. Anticipación

principios de animación

Fuente: CentoLodigiani a través de Giphy

La anticipación prepara al espectador para lo que está a punto de suceder y puede hacer que la acción resultante sea más realista. No se sentaría sin primero doblar las rodillas o agarrar algo sin estirar el brazo, ¿verdad? La anticipación pone al personaje u objeto a través de uno o dos movimientos realistas para indicar al espectador lo que está a punto de suceder.

principios de animación

En el diseño web, la anticipación se usa en las transiciones. Por ejemplo, si un visitante está completando un cuadro de información y omite la información requerida, el cuadro podría rebotar un poco para llamar su atención y comunicar: "Oye, algo anda mal". Otra forma de usar la anticipación es encoger un poco los elementos y luego agrandarlos al pasar el mouse.

3. Puesta en escena

La puesta en escena dirige la mirada del espectador para que mire donde usted quiere que mire ("líneas principales" en la fotografía). Minimice el resto de la escena para que el espectador se concentre en lo que usted quiere. Otro componente de la puesta en escena es que cada acción que realiza un personaje tiene una intención detrás. Si aislaras cada fotograma de la animación, podrías saber la intención detrás de la pose.

principios de animación

La puesta en escena es uno de los principios más fáciles de aplicar al diseño web y los elementos visuales utilizados en los sitios web. Esto es lo que sucede cuando aparece una ventana emergente en una página web: el movimiento de la ventana emergente hace que se concentre en ella y el resto de la página se ve borrosa, atenuada o cubierta. En sentido figurado, estás iluminando la parte más importante del "escenario" y manteniendo todo lo demás en segundo plano. La luz y la sombra también se pueden usar para esto, o los diseñadores web pueden aplicar este principio simplemente deshacerse de detalles innecesarios.

4. De frente y posar para posar

"De frente" y "posar para posar" son dos formas diferentes de crear animaciones. Con "recto", los marcos se crean en orden de principio a fin. Esto le da a la animación un movimiento dinámico y fluido. Con "pose to pose", se crean el primer y último fotograma, luego se agregan las poses intermedias necesarias.

principios de animación

Fuente: Vincenzo Lodigiani, Artista de movimiento

Hoy en día, la animación por computadora usa "pose para posar" porque la computadora puede completar los cuadros faltantes automáticamente. Mira las animaciones en Chéjov – puede decir que no son realistamente fluidos (y se supone que no lo son). Si desea crear una animación "directa" en su sitio web, puede utilizar la función de sincronización de pasos (), que le permite definir varios fotogramas y mostrarlos en una secuencia.

5. Acción de seguimiento y superposición

El principio de "acción de seguimiento y superposición" dice que cuando un personaje u objeto está en movimiento y luego se detiene, partes del sujeto se moverán y se detendrán a diferentes velocidades. Esto imita las leyes de la física de la vida real.

  • Acción superpuesta: Las diferentes partes del tema se mueven a diferentes ritmos.
  • Seguir adelante: Las partes sueltas del objeto continúan moviéndose durante unos segundos después de que el objeto principal ha dejado de moverse. Esas partes se moverán más allá del punto de parada y luego retrocederán hacia el objeto.

En el siguiente ejemplo, los brazos y las piernas de Rapunzel se mueven a un ritmo diferente al de su cabeza; eso es una acción superpuesta. Cuando deja de girar, su cabello continúa moviéndose por un segundo, eso es seguir.

principios de animación

“Arrastrar” es una técnica relacionada en la que ocurre lo contrario: partes del objeto se mueven y luego el resto se pone al día. Todas estas técnicas muestran un movimiento realista o pueden exagerar el movimiento para lograr un efecto cómico.

principios de animación

El “movimiento de espera” también está relacionado con esto. Los personajes que quedan todavía tienen un ligero movimiento para que la animación no se estanque.

principios de animación

En el diseño web y móvil, el "seguimiento" y la "acción superpuesta" muestran al espectador que una acción es a propósito parada. De lo contrario, puede pensar que simplemente dejó de funcionar. Por ejemplo, mire cómo la aplicación Wunderlist en mi iPhone muestra que estoy moviendo un elemento de la lista. El artículo se vuelve de un color diferente y se agranda a medida que lo muevo, luego vuelve al color y tamaño originales una vez que termino. Así es como sé que la acción está completa.

principios de animación

También puede ver este principio en acción en su iPhone. A medida que pasa de una vista a otra o mueve los iconos en la pantalla de inicio, los elementos se mueven a ritmos ligeramente diferentes. Así es como se comunica su iPhone: "Las cosas están cambiando".

6. Reducir y reducir la velocidad

El principio de “entrada y salida lenta” establece que un objeto comienza a moverse lentamente, gana impulso y acelera, luego vuelve a desacelerarse cuando se detiene. Básicamente, los movimientos deben acelerarse y desacelerarse para que sean naturales. Para lograr este efecto, hay cuadros adicionales al inicio y al final de una acción para enfatizar el aumento y la disminución gradual del movimiento.

principios de animación

Fuente: La ilusión de la vida en Tumblr

Para el diseño web, CSS tiene dos funciones de sincronización relacionadas con este principio: entrada y salida fáciles. Puede ver un ejemplo si en el Tu plan, tu planeta sitio web (primero haga clic en "Empecemos").

7. Arco

Como muchos de los otros 12 principios de la animación, "arco" se basa en la física. Los objetos suelen seguir algún tipo de arco cuando se mueven debido a la gravedad. Si se mantuvieran rectos, el movimiento sería mecánico, no realista.

principios de animación

Esto también se aplica a todos los tipos de movimiento, no solo a los arcos de menor a mayor a menor:

principios de animación

En el diseño web, el principio del “arco” se puede usar creando animaciones que forman un arco, por supuesto, pero también haciendo que un elemento gire, como durante los tiempos de carga.

8. Acción secundaria

Una acción secundaria enfatiza la acción principal sin distraerse de ella. También da más dimensión a personajes y objetos y da vida a una escena. El principio de la puesta en escena juega un papel importante porque la acción principal todavía tiene que ser el foco.

principios de animación

Una acción secundaria no tiene por qué quedar fuera del objeto principal. Puede ser un personaje que silba mientras camina o que expresa emoción levantando las cejas.

principios de animación

En el diseño web y móvil, el principio de "acción secundaria" se ve cuando los elementos se apartan para dejar espacio para un nuevo elemento, como cuando reorganiza las aplicaciones en su iPhone. Esto puede ir de la mano con "acciones de seguimiento y superposición", que enfatiza esas acciones.

9. Calendario

El tiempo es bastante sencillo y está relacionado con "entrar y salir más despacio". El principio dice que los elementos deben moverse consistentemente de manera natural, como lo harían en el mundo real. Para enfatizar, se pueden acelerar o ralentizar a propósito. La cantidad de fotogramas utilizados establecerá el tiempo: más fotogramas crean una acción más lenta, menos fotogramas crean una más rápida.

En este ejemplo, las primeras acciones de Daffy Duck tienen una sincronización natural, y luego la última acción, cuando se acerca al espectador, es deliberadamente rápida para enfatizar.

principios de animación

La sincronización también ayuda al espectador a comprender el peso de los objetos entre sí. En este ejemplo, el personaje levanta las pesas lentamente y las deja caer rápidamente, lo que demuestra que son pesadas para él:

principios de animación

Fuente: @scottthigpen en Giphy

En el diseño web, el tiempo se utiliza para hacer que los elementos se queden un poco más tiempo o desaparezcan rápidamente, especialmente cuando se responde a la interacción del usuario. Por ejemplo, si un usuario desea descartar un menú, puede configurar el tiempo para que se mantenga durante 300 ms. Si tocan un elemento en la barra de navegación, querrá que la acción ocurra rápidamente (100 ms).

10. Exageración

Aunque muchos de los 12 principios de la animación se centran en la realidad, la belleza de la animación es que es no real. El principio de "exageración" dice que un exceso de realismo puede restar valor a lo que mejor hace la animación: el entretenimiento. La exageración se utiliza para hacer que los personajes y los objetos sean más interesantes. Toma la realidad y la sube un poco, lo suficiente para que la escena siga siendo creíble. La exageración requiere moderación para que la escena no se vuelva abstracta o surrealista.

principios de animación

En el diseño web, los objetos se escalan hacia arriba o hacia abajo para llamar o desviar la atención. Cuando un usuario está activo en una determinada parte del sitio web, como un formulario, puede crecer mientras otros elementos se reducen. Esto es similar al principio de "puesta en escena", especialmente cuando piensa en formularios emergentes.

11. Dibujo sólido

principios de animación

Fuente: La ilusión de la vida en Tumblr

Aunque la animación es técnicamente 2D, tiene que presentarse de manera realista en 3D. El principio de "dibujo sólido" también podría llamarse "perspectiva" porque se trata de tener la capacidad de dibujar y comprender conceptos básicos como:

  • Anatomía
  • Equilibrar
  • Consistencia
  • Luz y sombra
  • Volumen
  • Peso

Para los diseñadores web, agregar profundidad a un elemento muestra a los usuarios que pueden interactuar con él. Puede ver esto en acción en nuestro sitio web. Mira cómo el botón "Unirse para descargar" se vuelve rosa a medida que me desplazo hacia abajo:

principios de animación

12. Apelación

Posiblemente el más difícil de dominar de los 12 principios de la animación, "atractivo" dice que tus personajes, objetos y su mundo tienen que atraer a la audiencia. Deben ser atractivos y encantadores de alguna manera, física o no. No existe una receta para hacerlo bien, pero el desarrollo sólido del personaje y la narración son ingredientes clave.

principios de animación

En la animación, todos los personajes no serán atractivos: el villano es la piedra angular de las películas de Disney. Sin embargo, la forma en que se presentan debe tener carisma e interesar a la audiencia.

principios de animación

En diseño web, "atractivo" significa que el sitio web en su conjunto es atractivo, agradable y fácil de usar.

principios de animación

Terminando

Los 12 principios de Disney pueden ayudar con animaciones sencillas, como si estuviera creando un juego interactivo en su sitio web, pero también pueden ayudar con el diseño de todo tipo de páginas web. La mayoría de los consumidores son como yo cuando se trata de películas de Disney: sé que algo me gusta y mi cerebro procesa las señales, pero no puedo identificar por qué Tengo esas reacciones. El trabajo del diseñador web es anticipar lo que pensará y hará un visitante, y luego guiarlo sutilmente para que tome las acciones correctas.

¿Busca aún más formas de conectarse con su audiencia? Lea nuestra publicación de blog sobre usando emoción de color.