Animación de transformación SVG: empareja los trazados antes de animar

Si el contorno debe permanecer igual mientras gira toda la marca, establece un pivote de rotación SVG compartido.

La animación de transformación de formas SVG cambia la geometría de una forma entre dos estados. Para la interpolación nativa de datos de trazado, prepara estructuras de comandos coincidentes y decide qué puntos deben corresponderse. Dos dibujos finales atractivos pueden producir una forma colapsada o retorcida a mitad de camino.

Las reglas de animación de datos de trazado del W3C exigen el mismo número y tipos de comandos en el mismo orden para una interpolación suave. Es un requisito estructural. No decide qué esquina de un logotipo debería convertirse en qué esquina de su siguiente estado.

Empieza con una pareja pequeña que puedas inspeccionar. Los ejemplos originales siguientes usan un cuadrado, un rombo y un cuadrado invertido deliberadamente para separar esas dos decisiones.

Crea dos trazados con esquinas correspondientes

Este cuadrado y este rombo creados manualmente usan ambos M L L L Z: mover a la primera esquina, dibujar tres líneas y cerrar la forma. Cada par de coordenadas tiene una posición correspondiente en el otro trazado.

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

El elemento SVG animate cambia un atributo con el tiempo. Aquí cambia d durante dos segundos. El fill="freeze" de la animación conserva su estado final; el fill verde del trazado es un ajuste de pintura independiente.

Mantén el ejemplo en una página HTML independiente mientras lo inspeccionas. Empieza automáticamente sin el script de inspección siguiente. Para controles de producción, decide cuándo debe reproducirse y ofrece un estado estático adecuado para la interfaz.

La correspondencia de esquinas es explícita:

Ambos contornos recorren su perímetro en la misma dirección. La primera esquina se mueve hacia la parte superior del rombo, la segunda hacia su derecha y así sucesivamente. Es una elección de diseño deliberada, no una interpretación del significado de cada forma.

Pausa la interpolación real

Inspecciona el inicio, el punto medio y el final antes de ajustar la aceleración o añadir efectos decorativos. Para el SVG anterior, esta función auxiliar pausa la línea de tiempo y salta a un instante en segundos:

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

MDN documenta pauseAnimations() y setCurrentTime() para controlar la línea de tiempo SVG. Conecta la función auxiliar a botones con valores 0, 1 y 2. Son tres posiciones en una interpolación, no tres dibujos de sustitución.

A un segundo, la interpolación lineal coloca cada coordenada a medio camino entre sus dos valores extremos. La primera esquina está, por tanto, en 55, 25. El punto medio completo de este ejemplo original es:

M55 25L135 55L105 135L25 105Z

Comprobamos esta animación SVG nativa en un navegador al inicio, en el punto medio y al final y después la reprodujimos una vez. El punto medio siguió siendo un cuadrilátero relleno y la reproducción llegó al rombo. Esa observación se aplica a estos trazados creados manualmente en el navegador probado; no es un resultado de conversión de PerfectVector ni una prueba de compatibilidad entre navegadores.

Un número igual de comandos aún puede producir una mala transformación

Conserva el cuadrado inicial, pero invierte el orden de las esquinas del cuadrado de destino:

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

Los dos extremos parecen el mismo cuadrado. Ambas cadenas siguen usando M L L L Z. Sin embargo, la segunda y la cuarta esquina ahora atraviesan la forma para intercambiar posiciones. En el punto medio, sus coordenadas coinciden:

M30 30L80 80L130 130L80 80Z

Los cuatro puntos quedan sobre una diagonal. En nuestra prueba de navegador, el cuadrado relleno colapsó hasta esa diagonal a mitad de camino y volvió a ser un cuadrado al final. Hacer coincidir la estructura de comandos permitió la interpolación; emparejar los puntos equivocados hizo indeseable el resultado.

Cuando una pareja exportada se retuerza, inspecciona el primer punto y la dirección de recorrido de cada trazado. Después comprueba si las esquinas y los elementos de las curvas ocupan posiciones correspondientes. Añadir nodos indiscriminadamente puede dificultar verlo. La guía de limpieza de nodos ayuda a simplificar ilustraciones estáticas, pero conserva la correspondencia establecida entre ambos estados.

Ten en cuenta los huecos y las piezas separadas

Un logotipo puede contener un límite exterior, una abertura y un detalle separado. Trátalos como partes que necesitan parejas deliberadas en el siguiente estado. Antes de animar, enumera qué parte se convierte en cuál. Si un estado tiene un hueco y el otro no, decide cómo debe desaparecer la abertura en lugar de suponer que un número de nodos coincidente lo resolverá.

La referencia de fill-rule explica cómo SVG decide qué regiones están dentro de un trazado. Conserva el comportamiento de relleno previsto al preparar y probar un trazado compuesto. Si la abertura ya se ve mal en un extremo estático, usa la guía para resolver huecos rellenos antes de añadir una transición.

Un orden práctico de inspección es:

1. Confirma la silueta, los huecos y los detalles separados de cada extremo.
2. Identifica los subtrazados o elementos independientes correspondientes.
3. Alinea sus puntos iniciales, dirección y elementos útiles.
4. Comprueba los estados intermedios para detectar límites cruzados o detalles que desaparecen.
5. Ajusta los tiempos solo después de aprobar esa geometría.

Los elementos separados pueden ser más fáciles de controlar cuando un detalle pequeño debe desvanecerse o moverse de manera independiente. Esa elección forma parte del diseño de la animación; no tiene que forzarse dentro de un único trazado compuesto.

Comprueba las reglas de tu mecanismo de animación

El ejemplo nativo usa expresamente comandos coincidentes. Una biblioteca puede hacer una preparación adicional, por lo que sus requisitos pueden diferir.

La documentación de MorphSVG de GSAP describe la conversión de datos de trazado a curvas cúbicas y la adición de puntos cuando sea necesario. También ofrece controles de correspondencia como shapeIndex. Usa esos controles para revisar la correspondencia en lugar de suponer que dos formas exportadas por separado ya coinciden.

KUTE.js documenta otro modelo de preparación en su guía de SVG Morph, incluido un flujo independiente para subtrazados. Comprueba la versión y el componente que realmente usas antes de aplicarles restricciones de trazados nativos o consejos de otra biblioteca.

Elige una pareja pequeña y representativa para ese mecanismo e inspecciona su geometría intermedia. Una prueba correcta de cuadrado a rombo no demuestra el comportamiento de un logotipo compuesto detallado. Conserva una copia de la ilustración original para distinguir los cambios introducidos durante la preparación de la animación del diseño original.

Prepara la ilustración rasterizada antes de emparejar los estados

Si falta el archivo maestro vectorial y solo queda una ilustración PNG o JPG, el flujo de imagen a vector de PerfectVector puede ayudar a preparar una primera versión SVG editable. Compara la silueta, los huecos y las regiones independientes con el original e inspecciona los trazados descargados. La guía de edición SVG cubre el siguiente paso de limpieza.

Vectorizar dos imágenes no establece una correspondencia semántica entre sus puntos ni crea una transformación terminada. Aprueba primero cada dibujo estático y prepara después la pareja para el animador elegido. Si ya existe un archivo maestro vectorial editable, trabaja con él en lugar de volver a vectorizar una copia rasterizada.

Prueba un punto medio después de cada cambio significativo en la pareja. Un extremo más sencillo solo es útil si la transición sigue respetando los elementos previstos. Los artículos de edición del blog ofrecen orientación relacionada con la preparación del original.

Preguntas frecuentes

¿Los trazados SVG necesitan el mismo número de puntos para transformarse entre sí? En la interpolación nativa de datos de trazado, importa que coincida la estructura de comandos, incluidos sus tipos y orden. Una biblioteca puede normalizar estructuras diferentes, así que consulta su propia documentación en lugar de basarte solo en el número de puntos.

¿Por qué mi transformación SVG se retuerce aunque los extremos se vean correctos? Los puntos pueden corresponderse en un orden no deseado. Comprueba el punto inicial, la dirección y la correspondencia de elementos e inspecciona después el punto medio. Siluetas finales idénticas pueden ocultar una forma intermedia colapsada.

¿Pueden transformarse automáticamente dos archivos SVG independientes entre sí? Un animador necesita geometría compatible o normalizada y una correspondencia útil entre estados. Dos extensiones de archivo por sí solas no aportan esa correspondencia; inspecciona trazados, huecos y piezas separadas.

¿Convertir dos PNG en SVG crea una pareja preparada para la transformación? No. La conversión prepara versiones vectoriales estáticas. Aún tienes que emparejar sus partes y puntos, elegir un mecanismo de animación e inspeccionar la transición.

Fuentes

1. W3C — trazados SVG — Define la estructura de interpolación nativa de datos de trazado y la correspondencia de parámetros.
2. MDN — animate — Documenta la animación de atributos a lo largo del tiempo.
3. MDN — pauseAnimations — Permite pausar la línea de tiempo de inspección.
4. MDN — setCurrentTime — Documenta cómo saltar a instantes en segundos de la línea de tiempo SVG.
5. MDN — fill-rule — Explica el comportamiento de regiones interiores en ilustraciones compuestas.
6. GSAP — MorphSVG — Describe la normalización y los controles de correspondencia de puntos.
7. KUTE.js — SVG Morph — Documenta su preparación específica del componente y el flujo de subtrazados.

Empareja las partes e inspecciona el punto medio antes de perfeccionar los tiempos. Si la ilustración inicial está rasterizada, prepara una primera versión SVG, verifica su geometría estática y crea después los estados de animación correspondientes.