Shape Tween: Transforma Cualquier Forma en Otra

¿Qué pasaría si un cuadrado pudiera derretirse en un círculo? ¿Qué si una estrella pudiera disolverse en un blob? Eso es exactamente lo que hace Shape Tween — y ya está disponible en Brinimate.

A diferencia del Motion Tween (que mueve, escala y rota objetos), Shape Tween cambia la geometría real de tus formas, creando transiciones de morpheo suaves entre formas completamente diferentes.

🆕 Qué Hay de Nuevo

Shape Tween trae el morpheo a Brinimate con estas capacidades:

Morpho entre tipos — Un rectángulo puede transformarse en una elipse. Una línea puede transformarse en un path libre. Cualquier forma geométrica puede convertirse en cualquier otra.
Interpolación suave de color — Los colores de trazo y relleno se mezclan gradualmente por todo el espectro RGB. Sin más saltos abruptos de color.
Soporte completo de easing — Lineal, Aceleración, Desaceleración, Rebote, Elástico — todos funcionan con el morpheo de formas.
Funciona con formas existentes — Rectángulos, elipses, líneas y paths participan todos.

🎬 Cómo Usar Shape Tween

Ejemplo: Un rectángulo transformándose en una elipse.

Dibuja un rectángulo en el lienzo en el Fotograma 1. Presiona F6 para establecer el keyframe.
Ve al Fotograma 20. Presiona F6 para crear un segundo keyframe.
En el Fotograma 20, elimina el rectángulo y dibuja una elipse en su lugar.
Regresa a cualquier fotograma entre 1 y 20.
Clic derecho en la barra del tween en el timeline → selecciona Shape Tween (Morph) 🔮.
Presiona Play — observa cómo el rectángulo se transforma suavemente en la elipse.

🔮 Motion Tween vs Shape Tween

	Motion Tween	Shape Tween
Qué interpola	Posición, rotación, escala	Geometría real + color
¿Cambia el tipo de objeto?	No — el mismo objeto se mueve	Sí — la forma se transforma en otra
Interpolación de color	No	Sí — mezcla RGB suave
Ideal para	Mover objetos, girar, crecer	Efectos de morpheo, transiciones líquidas, animaciones de logos

Puedes combinar ambos: usa Motion Tween para volar un objeto por la pantalla, luego cambia a Shape Tween en un momento clave para transformarlo.

🎨 Interpolación de Color

Uno de los aspectos más visualmente impactantes de Shape Tween es la mezcla automática de colores:

Color de trazo se interpola suavemente entre keyframes.
Color de relleno (para rectángulos y elipses) también se mezcla.
Los colores viajan por todo el espacio RGB — un tween de rojo a azul pasa por tonos violetas.

Prueba esto: transforma un círculo rojo en un cuadrado azul. La forma cambia Y el color se desplaza gradualmente por tonos violáceos.

💡 Ideas Creativas

Efecto de texto líquido: Crea texto en el Fotograma 1, conviértelo a path (Ctrl+Shift+P), luego transforma a una forma de blob en el Fotograma 30 con easing Ease-In-Out.

Animación de logo: Comienza con la forma final de tu logo, luego haz morph inverso desde una forma geométrica simple.

Morpheo de personajes: Transforma el cuerpo de un personaje de pose de pie a pose de salto usando shape tween entre dos keyframes.

Animación de carga: Un círculo transformándose en un cuadrado que se transforma en un triángulo en un bucle perfecto.

⚙️ Detalles Técnicos

Bajo el capó, Shape Tween:

Convierte todas las formas a paths normalizados de 16 puntos usando Paper.js.
Remuestrea puntos uniformemente por longitud de arco para transiciones suaves.
Interpola cada par de puntos independientemente con la curva de easing seleccionada.
Mezcla colores por canal RGB usando interpolación lineal.
Renderiza el resultado como un elemento path en el canvas de Konva.

Esto significa que el morpheo se calcula en tiempo real a 60fps — sin pre-renderizado, sin horneado de frames.

🚧 Limitaciones Actuales

Este es el MVP (Producto Mínimo Viable) de Shape Tween. Lo que viene después:

Shape Hints — mapear manualmente puntos específicos entre formas para control preciso (como Adobe Animate).
Remuestreo con bezier — curvas más suaves para formas complejas.
Morpheo de texto — convertir texto a outlines y transformar entre palabras.
Indicador visual en timeline — color de barra distinto para tweens de forma vs movimiento.

💡 Consejo de Pro — Combinando Tweens para Máximo Impacto: Usa Shape Tween para el momento de transformación (ej: rectángulo convirtiéndose en círculo), luego cambia a Motion Tween para el movimiento (círculo volando fuera de la pantalla). Este enfoque híbrido te da lo mejor de ambos mundos: morpheo fluido + movimiento suave.

Shape Tween abre una nueva dimensión de posibilidades de animación. Pruébalo hoy y descubre qué formas puedes hacer bailar.

Siguiente: Aprende sobre Rigging de Huesos para dar vida a personajes con animación esquelética.