Motion Tween: Anima de Forma Más Inteligente, no Más Difícil

¿Qué pasaría si solo tuvieras que definir dos poses — el inicio y el final — y la computadora dibujara todo lo que va en medio? Eso es exactamente lo que hace el Motion Tween. Es la función que separa el dibujo casual de la producción de animación real.

En Brinimate, el Motion Tween funciona en formas geométricas, texto y trazos de pincel a mano alzada — lo que lo convierte en uno de los motores de interpolación más flexibles disponibles en un editor basado en navegador.

🧠 Cómo Funciona el Tween (La Idea Central)

Colocas el Keyframe A (Pose 1) en el Fotograma 1.
Colocas el Keyframe B (Pose 2) en el Fotograma 20.
Le dices a Brinimate: “Conecta estos dos con un tween.”
Brinimate calcula automáticamente los 18 fotogramas intermedios, haciendo una transición suave entre los dos estados.

Lo que Brinimate puede interpolar:

Posición (X, Y) — los objetos se deslizan por la pantalla.
Tamaño (Escala) — los objetos crecen o se reducen suavemente.
Rotación — los objetos giran.
Grosor de trazo — los trazos de pincel pueden engrosarse o adelgazarse.

🎬 Paso a Paso: Tu Primer Motion Tween

Ejemplo: Una pelota volando por la pantalla.

Dibuja un círculo en el lado izquierdo del lienzo en el Fotograma 1. Presiona F6 para establecer el keyframe.
Ve al Fotograma 20 en el timeline (haz clic en el número de fotograma).
Presiona F6 de nuevo para insertar un segundo keyframe.
Con el Fotograma 20 aún seleccionado, mueve tu círculo al lado derecho de la pantalla (y opcionalmente hazlo más pequeño para simular perspectiva).
Haz clic en cualquier fotograma entre 1 y 20 (ej. Fotograma 10) en el timeline.
Clic derecho en el fotograma → selecciona Crear Interpolación de Movimiento → elige tu tipo de easing (empieza con Lineal).
Presiona Play. La pelota vuela suavemente de izquierda a derecha.

📈 Tipos de Easing Explicados

El easing define cómo un objeto acelera y desacelera durante su tween. La misma distancia con diferentes easing se siente completamente diferente.

Easing	Sensación	Mejor Para
Lineal	Velocidad constante, robótica	Objetos mecánicos, engranajes, relojes
Rebote	Llega al final y rebota	Pelotas aterrizando, elementos de UI cayendo, personajes juguetones
Elástico	Sobrepasa y vuelve	Resortes, ligas, exageraciones de caricatura

Usar el easing correctamente es lo que hace que la animación se sienta viva versus plana y digital.

Ejemplo — Pelota Rebotando con Aplastamiento y Estiramiento:

Fotograma 1: Círculo en la parte superior, forma redonda normal.
Fotograma 12: Círculo en la parte inferior — aplástalo con las asas de escala (más ancho, más corto).
Fotograma 20: Círculo de vuelta en la parte superior, redondo de nuevo.
Aplica un tween de Rebote a la primera sección (fotogramas 1–12) para la caída.
Aplica un tween Lineal o Elástico del 12 al 20 para el rebote.
Resultado: Un rebote físicamente creíble y expresivo de caricatura.

✏️ Tweening de Trazos de Pincel

Esta es una función única de Brinimate. Los trazos a mano alzada dibujados con la herramienta Pincel pueden hacer tween como cualquier otro objeto:

Dibuja una forma de ola con el Pincel en el Fotograma 1 (F6).
Ve al Fotograma 30 (F6).
Mueve el trazo a una nueva posición o ajusta su tamaño.
Aplica un Motion Tween.
El trazo se desliza entre las dos posiciones.

Esto permite efectos como:

Un trazo pictórico “barriendo” por la pantalla como transición.
Una cinta de fuego moviéndose a través de una escena.
Un efecto de escritura a mano combinado con la posición del tween.

🔁 Tweens en Bucle

Para crear un bucle perfecto (como una nube flotando o un brillo pulsante):

Crea tu pose inicial en el Fotograma 1.
En el Fotograma 30, copia exactamente la misma pose del Fotograma 1 (misma posición, tamaño, rotación).
Aplica un tween entre 1 y 30.
Establece el rango de bucle del timeline de 1 a 29 (no 30, para evitar un fotograma duplicado).
Presiona Play — un bucle infinito perfecto.

💡 Consejo de Pro — Los 12 Principios de Animación + Tween: Los animadores profesionales siguen los 12 principios de Disney. El Tween maneja el principio de “Aceleración y Desaceleración” automáticamente con curvas de easing. Pero TÚ controlas el “Aplastamiento y Estiramiento” ajustando manualmente la forma ligeramente en el keyframe de impacto. Combina ambos para una animación que se sienta genuinamente viva.

Ahora que el movimiento fluye, aprende a reutilizar objetos complejos a través de escenas con Símbolos e Instancias — la clave para una animación de personajes eficiente.