Anticipación, smearing, easing y animación secundaria en pixel art

Cuatro técnicas hacen que una animación en pixel art se sienta viva: la anticipación (un pequeño movimiento antes de la acción principal), el smearing (formas como ondas de aire que muestran velocidad y dirección), el easing (fotogramas que aceleran o frenan) y la animación secundaria (partes que reaccionan al movimiento principal). Aquí el sabio abre los brazos, tal vez para lanzar un hechizo. Pruébalo abajo.

Este sprite es ancho. Es más fácil dibujarlo en una computadora o con el teléfono de lado.

Paso 1

Colores para este paso
Herramientas
Guía

Mostrar el paso terminado

Todo el movimiento de un vistazo

Sabio animado en pixel art: una pausa larga, una sentadilla rápida, luego abre los brazos y salen ondas de aire
Diapositiva de Roman: keyframe 1000 ms, anticipación 150 ms, smearing y animación secundaria a 100 ms, easing a 70 ms, keyframe 1000 ms
De las diapositivas de mi curso: cada fotograma del movimiento con su duración en milisegundos.

Anticipación

La anticipación muestra la preparación para una acción. En el fotograma 2 la parte de abajo del cuerpo del sabio se contrae un poco, como una sentadilla, justo antes de que abra los brazos. Te dice que algo está a punto de pasar. Un boxeador hace lo mismo: el brazo va un poco hacia atrás antes del golpe.

Smearing

El smearing muestra qué tan fuerte es un movimiento y hacia dónde va. Aquí el sabio abre los brazos con tanta fuerza que crea ondas de aire. Se mueven hacia afuera, y en los siguientes fotogramas se desvanecen y desaparecen. Técnicamente no hay nada nuevo: ya sabes dibujar aire desde la lección del humo.

Easing

El easing acelera o frena los fotogramas, para seguir la física. Las ondas de aire ocupan cuatro fotogramas. Los dos primeros duran 100 milisegundos cada uno, los dos últimos solo 70. Así las ondas de aire empiezan más lento y se aceleran hacia el final. Un ritmo parejo se ve mecánico, uno disparejo se ve real. Presiona Play en el entrenador interactivo y lo vas a sentir.

Animación secundaria

La animación secundaria es cómo un segundo objeto reacciona al principal. Los brazos son el objeto principal. Los puños son el segundo: golpeados por la fuerza de los brazos, se balancean a la izquierda, luego a la derecha, luego se asientan, y durante un fotograma más solo una pequeña parte de la túnica se sigue moviendo. El pelo en el viento funciona igual, o un saco de boxeo que se aplasta cuando lo golpean.

Cómo practicarlo

Después del ciclo de caminata, esto es más fácil de lo que parece. Empieza con la técnica que más te guste, tal vez el easing o los puños que se balancean, y agrega las demás una por una. Cada técnica que agregas hace que la animación se vea más profesional.