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

En el momento exacto que escribo esto, mi oficina tiene 17 cosas u otras Disney en las paredes y estantes. De diecisiete. Incluso estoy sorprendido. No importa cuánto me guste todo, Disney, la magia creada a través de los 12 principios de animación me escapa incluso cuando veo una de sus películas. Y este es el punto. Los 12 principios de animación son sutiles. Hacen impresiones en los espectadores sin que se dan cuenta. Nos hacen reír, llorar, simpatizar y soñar, a veces en la misma escena. Y crea personajes y objetos que se ven y se mueven de manera tan realista que quieres estirarlos y tocarlos. (¿Alguna vez has visto a Coco? Descanso mi caso).

Estos 12 principios de animación ahora ofrecen la base para todos los movimientos, Disney y otros. También son relevantes para los campos fuera de la animación, como el diseño web. Ollie Johnston y Frank Thomas introdujeron una breve historia de los 12 Principios de animación de los 12 Principios de animación. Life: Disney Animation en 1981 y siguió siendo la “Biblia” de la animación. El libro analiza de cerca los enfoques de los mejores animadores de Disney para extraer los 12 principios. Si bien estos principios fueron inicialmente destinados a la animación animada, han sobrevivido a través de cambios tecnológicos y ahora son utilizados por artistas de computadoras (como Pixar) y diseñadores web.
Los 12 principios de animación y cómo informan el diseño web Hay una razón por la cual estos principios han resistido la prueba del tiempo. A veces los conceptos básicos siguen siendo los mejores. 1. Squash y estiramientos A: Chris Gannon a través de Giphy

“Squash and Stretch” es el más importante de los principios de la animación. Ofrece flexibilidad de animaciones, gravedad, peso y masa. Cuando un objeto se mueve, no permanece de la misma forma. Sin embargo, el volumen debe permanecer consistente. El estiramiento requiere que el objeto sea más delgado y más largo; El triturador lo hace más corto y ancho. Si lo hizo más delgado o más corto, no mantendría el mismo volumen.
En el diseño web, se usa “squash y estiramiento” cuando los objetos deben ser atractivos. Si hay un objeto que tiene que parecer tener una masa física, este principio puede hacer el truco.
2. Anticipación

Fuente: Centolodiani a través de Giphy

La anticipación prepara al espectador para lo que tendrá lugar y puede hacer la acción resultante más realista. No te sentaste sin doblar las rodillas primero o no atraparías nada sin quitarte el brazo, ¿verdad? La anticipación pone el carácter u objeto a través de uno o dos movimientos realistas para indicar al espectador sobre lo que va a suceder.
En el diseño web, la anticipación se usa en transiciones. Por ejemplo, si un visitante completa un cuadro de información y deja la información solicitada, la caja podría saltarse un poco para atraer su atención y comunicarse “Hola, algo no está bien”. Otra forma de usar la anticipación es reducir fácilmente los artículos y luego hacerlos crecer en una caminata. 3. La puesta en escena de la puesta en escena lidera la mirada del espectador para que mires a dónde quieres mirar (“líneas principales” en la foto). Mínimo el resto de la escena para que el espectador se centre exactamente en lo que desea. Otro componente del montaje es que cada acción que hace un personaje tiene una intención detrás de él. Si ha aislado cada cuadro de la animación, podría decir la intención detrás de la postura. La puesta en escena es una de las más fáciles de aplicar para el diseño web y las vistas utilizadas 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 te hace concentrarte en ella, y el resto de la página no está claro, borroso o cubierto. Ilumine en sentido figurado la parte más importante de la “escena” y mantenga el resto en el fondo. La luz y la sombra también se pueden usar para esto o los diseñadores web pueden aplicar este principio simplemente escapar de detalles innecesarios. 4. Se estrangule en frente y posee “justo antes” y “pose para posar” son dos formas diferentes de crear animaciones. Con “justo antes”, los cuadros se crean en orden desde el principio hasta el final. Esto da la animación de fluido y movimiento dinámico. Con “imagen para la imagen”, se crea el primer y último cuadro, luego se agregan las posiciones intermedias necesarias.

Fuente: Vincenzo Lodiani, artista musical, animación de computadora utiliza “imagen de imagen”, porque la computadora puede completar automáticamente los marcos faltantes. Vea las animaciones en Chekhov: puede decir que no son de manera realista fluida (y no deberían serlo). Si desea crear una animación “directamente antes” en su sitio web, puede usar la función de sincronización Step (), que le permite definir más marcos y mostrarlos en una sucesión. 5. Siga la acción y la acción que se superpone al principio “Seguimiento y superposición de la acción” dice que cuando un carácter u objeto está en movimiento y luego se detiene, las partes del sujeto se moverán y se detendrán con diferentes ritmos. Esto imita las leyes de la física de la vida real.

Acción superpuesta: diferentes partes del sujeto se mueven a diferentes ritmos.

Siga: las partes mal conectadas del objeto continúan moviéndose durante unos segundos después de que el objeto principal haya dejado de moverse. Estas partes se moverán más allá del punto de parada y luego se retirarán al objeto.
En el ejemplo a continuación, los brazos y los pies de Rapunzel se mueven a una velocidad diferente de su cabeza: esta es una acción superpuesta. Cuando deja de girar, su cabello continúa balanceándose por un segundo, ese es el resultado.
“Pull” es una técnica similar en la que sucede lo contrario: las partes del objeto se mueven y luego el resto atrapa. Todas estas técnicas tienen un movimiento realista o pueden exagerar el movimiento para un efecto cómico.
“Mantenerse en movimiento” también está relacionado con esto. Los personajes que permanecen aún tienen un movimiento fácil para que la animación no se estance.
En el diseño móvil y web, “seguir” y “acción superpuesta” muestra al espectador que una acción detiene intencionalmente. De lo contrario, puedes pensar que ya no funciona. Por ejemplo, mira cómo se ve la aplicación Wundirlist en mi iPhone que estoy fuera de la lista. El elemento se convierte en un color diferente y se hace más grande a medida que lo muevo, luego regresa al color y el tamaño originales después de que termine. Así que sé que la acción está completa. También puedes ver este principio en acción en el iPhone. A medida que realiza la transición entre vistas o mueve los iconos en la pantalla de inicio, los elementos se mueven a ritmos ligeramente diferentes. Así es como su iPhone comunica “las cosas cambian”.

6. Reduzca la velocidad y disminuya la velocidad del principio “ralentiza y disminuye la velocidad” establece que un objeto comienza a moverse lentamente, se impulsa y se acelera, luego se ralentiza a medida que se detiene. Básicamente, los movimientos deben acelerar y reducir la velocidad para ser naturales. Para lograr este efecto, hay marcos adicionales al principio y al final de una acción para subrayar el aumento y disminución gradual.

Fuente: Ilusión de la vida en Tumblr

Para el diseño web, CSS tiene dos funciones de sincronización relacionadas con este principio: facilidad y facilidad. Puede ver un ejemplo si está en su sitio su plan, su planeta (haga clic primero en “Inicio”). 7. Arc como muchos otros 12 principios de animación, “ARC” se basa en la física. Los objetos generalmente siguen un cierto tipo de arco a medida que se mueven debido a la gravedad. Si permanecieran rectos, el movimiento sería mecánico, no realista.

Esto también es cierto para todo tipo de movimiento, no solo para resortes bajos a grandes: en el diseño web, el principio de “arco” se puede utilizar creando animaciones que surgen, por supuesto, sino también rotando un elemento, 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 le da a los personajes y objetos más tamaño e inspira la vida en una escena. El principio de la puesta en escena juega un papel porque la acción principal debe seguir siendo el énfasis.

Una acción secundaria no debe caer fuera del objeto principal. Puede ser un personaje que silbue mientras camina o expresa emoción al levantar las cejas.

En el diseño móvil y web, el principio de “acción secundaria” se ve cuando se eliminan los elementos para dejar espacio para un nuevo elemento, como cuando reorganiza las aplicaciones en el iPhone. Esto puede ir de la mano con la “acción de búsqueda y superposición”, que enfatiza esas acciones. 9. La sincronización del tiempo es bastante simple y está relacionada con la “desaceleración y desaceleración”. El principio dice que los elementos deberían moverse constantemente de manera natural, como sucedería en el mundo real. Por énfasis, pueden acelerarse o ralentizarse intencionalmente. El número de marcos utilizados establecerá el tiempo: varios marcos crean una acción más lenta, menos marcos crean más rápido. En este ejemplo, las primeras acciones de Daffy Duck tienen una sincronización natural, y la última acción, cuando se acerca al espectador, es intencionalmente rápida para la acentuación.
La sincronización también ayuda al espectador a comprender el peso de los objetos en relación entre sí. En este ejemplo, el personaje levanta los pesos lentamente y los deja rápidamente, lo que demuestra que son pesados ​​para él: Fuente: @cottthigpen en Giphy

En el diseño web, la sincronización se usa para hacer que los elementos sean un poco más tiempo o desaparezcan rápidamente, especialmente cuando responde a la interacción del usuario. Por ejemplo, si un usuario quiere renunciar a un menú, puede establecer el momento para que permanezca alrededor de 300 ms. Si llego a un elemento en la barra de navegación, querrá que la acción ocurra rápidamente (100 ms). 10. Exageración Incluso si muchos de los 12 principios de animación se centran en la realidad, la belleza de la animación es que no es real. El principio de “exageración” dice que demasiado realismo puede afectar lo que es mejor en la animación: la diversión. La exageración se usa para hacer que los personajes y los objetos sean más interesantes. Se toma la realidad y la convierte en una muesca, lo suficiente como para que la escena sea aún creíble. La exageración requiere moderación para que la escena no se vuelva abstracta o surrealista.

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

Fuente: Ilusión de la vida en Tumblr

Incluso si la animación es técnica 2D, debe estar de manera realista en 3D. El principio del “dibujo sólido” también podría llamarse “perspectiva”, porque es la capacidad de dibujar y comprender los elementos básicos, como: anatomía

Balance

Coherencia
Luz y sombra

Volumen

Peso
Para los diseñadores web, agregar la profundidad de 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 “Únete a descargar” se vuelve rosa mientras se desplaza:
12. Apela quizás los más complicados de los 12 principios de animación del maestro, el “llamado” dice que sus personajes, objetos y el mundo deben llamar al público. Deben ser atractivos y encantadores de alguna manera, físicos o de otro tipo. No hay una receta para obtener esto correcto, pero el desarrollo sólido de los personajes y la historia son ingredientes clave.
En la animación, cada personaje no será atractivo: el bastardo es la base de las películas de la base de Disney. Sin embargo, la forma en que se presentan aún debe tener carisma e interesar al público.
En el diseño web, “atractivo” significa que el sitio en su conjunto es cautivador, agradable y fácil de usar.