Cómo comencé Motion Design usando la física de secundaria

Comenzando con la coreografía UX

Como entusiasta del movimiento, hay una pregunta que más me han hecho:

"¿Cómo empiezo con Motion Design?"

A esto, a menudo respondo salvajemente: "Empiezas con la física"; asustando a la mayoría de los buscadores Pero aquí está la cosa: alguien que está realmente interesado nunca se detiene con una sola consulta. Siguen con preguntas después de preguntas tras preguntas. ¡Los amo!

Cada semana, tengo espacios en mi calendario bloqueados solo con el propósito de orientar a personas tan entusiastas. Los conozco en persona (si están en Bangalore, India) o les hablo por internet. Me gusta hacerlo

Bueno, mis esfuerzos fuera de línea solo se limitan a las personas que están cerca de mi círculo. Estoy seguro de que hay muchas personas en el mundo que querrían saber lo mismo. Por lo tanto, esta publicación.

La física es bae

Cuando digo: "Empiezas con la física", tampoco estoy completamente equivocado. ¡"Física" generalmente nos recuerda las ecuaciones y fórmulas aterradoras que hemos acumulado en la escuela!

En realidad, la física está muy por encima de todas estas cosas complicadas en papel. Es cómo se comporta la naturaleza, cómo se mueven los objetos, cómo caen las cosas y más allá.

p.ej. Saber cuándo levantar la mano para atrapar una pelota en movimiento y cuándo retroceder para minimizar el impacto de la pelota en su mano, es física real.

Esta comprensión del mundo real es toda la física que necesitará para comenzar con el diseño de movimiento.

¡Haciendo las cosas vivas!

Aquí está la representación de Snehal Patil de un Ejecutivo de entrega que monta su bicicleta, mientras usa un gorro de Santa Lindo, ¿no es así?

Una simple ilustración de un Delivery Executive en bicicleta

Tal vez podamos decir que está "montando" la bicicleta y no solo sentada en ella porque una de sus piernas, de lo contrario, estaría descansando en el suelo. ¡Pero eso es solo una conjetura! ¿Cómo podríamos hacer que sea más perceptible que la bicicleta no está parada sino en movimiento? - ¡La respuesta es coreografía!

Comencemos por hacer la cosa más de diseñador:

Romper el problema en pedazos, esta vez, ¡literalmente!

Una vez desglosado, cada componente más pequeño puede tratarse como una entidad separada, animarse individualmente y ensamblarse más tarde.

La coreografía

He identificado 5 adiciones simples que harán que esta ilustración estática cobre vida. ¡Empecemos!

1. Las ruedas rotarán (obviamente)

¡La rotación es simple! Hay una opción "rotar" en After Effects y simplemente agregamos 2 fotogramas clave con unos pocos segundos de diferencia, con diferentes valores de ángulos. Luego, movemos todo el ensamblaje del chasis, las ruedas y el conductor hacia adelante por una distancia de 2 (π) r, por cada rotación completa de la rueda, como lo sugieren las leyes de la naturaleza, ¡uf!

De lo contrario, simplemente podemos omitir todas estas complicaciones y probar alguna técnica sin esfuerzo pero sofisticada. ¿Qué tal esto?

Bicicleta con ruedas giratorias

Parece muy sutil, ¿no? Aquí, contamos con 2 supuestos:

  • La bicicleta se mueve rápido, por lo tanto, los radios de las ruedas son invisibles.
  • La superficie de las ruedas es naturalmente imperfecta, por lo tanto, el reflejo parpadea.

CONSEJO PROFESIONAL: El parpadeo se puede crear utilizando un simple círculo blanco y la herramienta "Recortar ruta" en After Effects.

Este parpadeo da una sensación de movimiento, pero aún está lejos de la realidad. Veamos el siguiente.

2. El chasis de la bicicleta se levantará

Incluso si suponemos que la bicicleta circula por una carretera asfaltada suave (bastante poco probable en India ), seguirá habiendo un movimiento rítmico de arriba a abajo debido a los amortiguadores. Algo como esto.

Bicicleta con ruedas giratorias y chasis agitado

Se siente mucho mejor, ¿verdad? Pero todavía le faltan algunas cosas.

3. El cuerpo del jinete experimentará movimientos naturales.

El jinete aquí no es un cuerpo de plástico instalado dentro de una camisa de fuerza. Es un ser humano y debe exhibir movimientos humanos. Piensa en lo que sucede cuando andas en moto. Las diferentes partes de su cuerpo experimentan movimiento relativo entre sí. p.ej. El ángulo de los codos puede cambiar, el cuello y la cabeza pueden moverse, la espalda puede estirarse y doblarse, etc. Solo tenemos que imitar algunos de estos movimientos.

Bicicleta con ruedas giratorias, movimiento del chasis y movimiento del cuerpo del conductor

¿Ves los movimientos adicionales aquí? Si lo hace, entonces tiene un ojo de diseñador Estos bits son muy sutiles pero le dan mucha vida a la composición. Claramente diferencian la caja de comida sin vida de la humana, llena de vida.

CONSEJO PROFESIONAL: El cuerpo del piloto se puede dividir aún más con cada parte en una capa diferente. Los movimientos humanos se pueden lograr moviendo y girando sutilmente estas partes en After Effects. En el mundo de la animación de personajes, este proceso se llama aparejo.

4. Los tids y bits adicionales

Todos sabemos que un gorro de Papá Noel tiene un extremo suelto y cuando el ciclista viaja a alta velocidad, nunca puede ser rígido; ¡Necesita revolotear! Así que aquí vamos

Bicicleta con ruedas giratorias, movimiento del chasis, movimiento del cuerpo del conductor y aleteo de la tapa

Este paso de aletear la gorra es altamente adictivo y puede sentirse muy tentado a exagerar. De hecho, ¡yo también lo exageré! Pero oye ... se permite la exageración controlada.

CONSEJO PROFESIONAL: El aleteo se realiza simplemente transformando la tapa de una forma a otra en un corto período de tiempo. ¡Es mucho más fácil de lo que parece!

5. El toque final

Hmm ... Veamos ... Las ruedas giran como deberían, el chasis se mueve como debería, incluso el conductor y su gorra se comportan como deberían. Pero, todavía no hay nada que indique que la bicicleta está avanzando. ¡Este es quizás el más fácil de todos los pasos!

Ya sea,

Avanzamos todo el conjunto (chasis + ruedas + piloto) hacia adelante.

O,

Simplemente presentamos un paisaje de la ciudad y lo movemos hacia atrás, algo que aprendimos de los juegos de computadora como Roadrash, Mario y Contra. Movimiento relativo, ves

El último ... ¡Yay!
Mira ... ¡Hemos añadido tanta vida!

CONSEJO PROFESIONAL: es muy fácil crear un fondo en bucle para siempre como este. Solo necesita tener 2 copias de la misma instancia y apilarlas de forma consecutiva. Finalmente, revele solo esa sección de la composición que forma el bucle infinito. Seguramente demostraré esto si alguna vez configuro un canal de YouTube

Espero que hayas aprendido algo nuevo hoy. Para ver más cosas que hago y descubrir, síguenos en Dribbble.

Si tiene más curiosidad sobre el diseño de movimiento, consulte:

  1. Mi podcast sobre matices de Motion Design

2. Mi charla sobre diseño de movimiento

Siéntase libre de comunicarse conmigo. Nos vemos en el próximo