Morphing SVG: abbina i tracciati prima di animarli

Se il contorno deve restare uguale mentre ruota l'intero simbolo, imposta invece un perno di rotazione SVG condiviso.

Il morphing SVG cambia la geometria di una forma tra due stati. Per l'interpolazione nativa dei dati di tracciato, prepara strutture di comandi corrispondenti e decidi quali punti devono corrispondere. Due disegni finali attraenti possono comunque produrre una forma collassata o attorcigliata a metà.

Le regole W3C per l'animazione dei dati di tracciato richiedono lo stesso numero e tipo di comandi nello stesso ordine per un'interpolazione fluida. È un requisito strutturale. Non decide quale angolo di un logo debba diventare quale angolo dello stato successivo.

Parti da una piccola coppia che puoi esaminare. Gli esempi originali qui sotto usano un quadrato, un rombo e un quadrato volutamente invertito per separare quelle due decisioni.

Costruisci due tracciati con angoli corrispondenti

Questo quadrato e rombo scritti a mano usano entrambi M L L L Z: spostati sul primo angolo, disegna tre linee e chiudi la forma. Ogni coppia di coordinate ha una posizione corrispondente nell'altro tracciato.

<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>

L'elemento SVG animate cambia un attributo nel tempo. Qui cambia d in due secondi. Il fill="freeze" dell'animazione conserva lo stato finale; il fill verde del tracciato è un'impostazione di colore separata.

Mantieni l'esempio in una pagina HTML autonoma durante l'ispezione. Parte automaticamente senza lo script di ispezione qui sotto. Per i controlli di produzione, decidi quando deve riprodursi e fornisci uno stato statico adatto all'interfaccia.

La mappatura degli angoli è esplicita:

Entrambi i contorni percorrono il perimetro nella stessa direzione. Il primo angolo si sposta verso la cima del rombo, il secondo verso la sua destra e così via. È una scelta di disegno esplicita, non un'interpretazione del significato delle forme.

Metti in pausa l'interpolazione effettiva

Esamina inizio, punto medio e fine prima di regolare l'andamento temporale o aggiungere effetti decorativi. Per l'SVG sopra, questa funzione mette in pausa la sua sequenza temporale e si sposta a un tempo in secondi:

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

MDN documenta pauseAnimations() e setCurrentTime() per controllare la sequenza temporale SVG. Collega la funzione a pulsanti con valori 0, 1 e 2. Sono tre posizioni di una sola interpolazione, non tre disegni sostitutivi.

A un secondo, l'interpolazione lineare mette ogni coordinata a metà tra i suoi due valori agli estremi. Il primo angolo è quindi a 55, 25. La forma completa a metà animazione di questo esempio originale è:

M55 25L135 55L105 135L25 105Z

Abbiamo controllato questa animazione SVG nativa in un browser all'inizio, a metà e alla fine, poi l'abbiamo riprodotta una volta. La forma a metà animazione restava un quadrilatero riempito e la riproduzione raggiungeva il rombo. Quell'osservazione riguarda questi tracciati scritti a mano nel browser testato; non è un risultato di conversione PerfectVector o un test di compatibilità tra browser.

Un numero uguale di comandi può comunque dare un morphing errato

Mantieni il quadrato iniziale, ma inverti l'ordine degli angoli del quadrato di destinazione:

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

I due stati agli estremi sembrano lo stesso quadrato. Entrambe le stringhe usano ancora M L L L Z. Eppure il secondo e quarto angolo attraversano ora la forma per scambiarsi di posto. A metà, le loro coordinate coincidono:

M30 30L80 80L130 130L80 80Z

Tutti e quattro i punti giacciono su una diagonale. Nel nostro test nel browser, il quadrato riempito collassava su quella diagonale a metà e tornava quadrato alla fine. La struttura di comandi corrispondente rendeva possibile l'interpolazione; l'abbinamento dei punti sbagliati rendeva indesiderato il risultato.

Quando una coppia esportata si attorciglia, esamina il primo punto e la direzione di percorrenza in ciascun tracciato. Poi controlla se angoli e caratteristiche delle curve occupano posizioni corrispondenti. Aggiungere nodi indiscriminatamente può rendere più difficile vederlo. La guida alla pulizia dei nodi aiuta a semplificare la grafica statica, ma conserva la corrispondenza stabilita tra entrambi gli stati.

Tieni conto di fori e parti separate

Un logo può contenere un limite esterno, un'apertura e un accento staccato. Trattali come parti che richiedono abbinamenti deliberati nello stato successivo. Prima di animare, elenca quale parte diventa quale. Se uno stato ha un foro e l'altro no, decidi come deve scomparire l'apertura invece di supporre che un numero di nodi corrispondente risolva la questione.

La documentazione di fill-rule spiega come SVG decide quali regioni sono interne a un tracciato. Conserva il comportamento di riempimento previsto mentre prepari e testi un tracciato composto. Se l'apertura appare già sbagliata in uno stato statico agli estremi, usa la guida alla diagnosi dei fori riempiti prima di aggiungere una transizione.

Un ordine pratico di ispezione è:

1. Conferma sagoma, fori e dettagli staccati di ogni stato agli estremi.
2. Identifica i sottotracciati o elementi separati corrispondenti.
3. Allinea i loro punti iniziali, direzione e caratteristiche utili.
4. Controlla gli stati intermedi per limiti incrociati o dettagli che scompaiono.
5. Regola i tempi soltanto dopo aver accettato quella geometria.

Gli elementi separati possono essere più facili da controllare quando un piccolo accento deve cambiare opacità o muoversi indipendentemente. Quella scelta fa parte del disegno dell'animazione; non deve essere forzata in un singolo tracciato composto.

Controlla le regole del tuo meccanismo di animazione

L'esempio nativo usa volutamente comandi corrispondenti. Una libreria può eseguire una preparazione aggiuntiva, quindi i suoi requisiti possono differire.

La documentazione MorphSVG di GSAP descrive la conversione dei dati di tracciato in curve cubiche e l'aggiunta di punti quando necessario. Espone anche controlli di mappatura come shapeIndex. Usa quei controlli per esaminare la corrispondenza anziché supporre che due forme esportate indipendentemente corrispondano già.

KUTE.js documenta un modello di preparazione diverso nella sua guida SVG Morph, incluso un procedimento separato per sottotracciati. Controlla versione e componente realmente usati prima di applicare restrizioni dei tracciati nativi o consigli di un'altra libreria.

Scegli una piccola coppia rappresentativa per quel meccanismo ed esamina la geometria intermedia. Un test riuscito da quadrato a rombo non dimostra il comportamento di un logo composto dettagliato. Conserva una copia della grafica sorgente per distinguere i cambiamenti introdotti durante la preparazione dell'animazione dal disegno originale.

Prepara la grafica raster prima di abbinare gli stati

Se manca l'originale vettoriale e resta soltanto grafica PNG o JPG, il procedimento da immagine a vettore di PerfectVector può aiutare a preparare un candidato SVG modificabile. Confronta sagoma, fori e regioni separate con la sorgente, poi esamina i tracciati scaricati. La guida alla modifica degli SVG descrive il passaggio successivo di pulizia.

Vettorializzare due immagini non stabilisce una corrispondenza semantica tra i loro punti e non crea un morphing finito. Accetta prima ogni disegno statico, poi prepara la coppia per l'animatore scelto. Se esiste già un originale vettoriale modificabile, lavora da quello anziché ricalcare una copia raster.

Testa un punto medio dopo ogni cambiamento significativo della coppia. Uno stato finale più semplice è utile soltanto se la transizione segue ancora le caratteristiche previste. Gli articoli di modifica del blog offrono indicazioni correlate sulla preparazione della sorgente.

FAQ

I tracciati SVG devono avere lo stesso numero di punti per il morphing? Per l'interpolazione nativa dei dati di tracciato, conta la struttura corrispondente dei comandi, inclusi tipi e ordine. Una libreria può normalizzare strutture diverse, quindi controlla la sua documentazione anziché basarti soltanto sul numero di punti.

Perché il morphing SVG si attorciglia anche se gli stati finali sembrano corretti? I punti possono corrispondere in un ordine indesiderato. Controlla punto iniziale, direzione e abbinamento delle caratteristiche, poi esamina il punto medio. Sagome identiche agli estremi possono nascondere una forma intermedia collassata.

Due file SVG separati possono essere trasformati automaticamente con il morphing? Un animatore richiede geometria compatibile o normalizzata e una mappatura utile tra stati. Due sole estensioni di file non forniscono quella mappatura; esamina tracciati, fori e parti separate.

Convertire due PNG in SVG crea una coppia abbinata per il morphing? No. La conversione prepara candidati vettoriali statici. Devi ancora abbinare parti e punti, scegliere un meccanismo di animazione ed esaminare la transizione.

Fonti

1. W3C — Tracciati SVG — Definisce struttura dell'interpolazione nativa dei dati di tracciato e abbinamento dei parametri.
2. MDN — animate — Documenta l'animazione degli attributi nel tempo.
3. MDN — pauseAnimations — Consente di mettere in pausa la sequenza temporale per l'ispezione.
4. MDN — setCurrentTime — Documenta lo spostamento nella sequenza temporale SVG in secondi.
5. MDN — fill-rule — Spiega il comportamento delle regioni interne per grafica composta.
6. GSAP — MorphSVG — Descrive normalizzazione e controlli di mappatura dei punti.
7. KUTE.js — SVG Morph — Documenta preparazione specifica del componente e procedimento per sottotracciati.

Abbina le parti ed esamina il punto medio prima di perfezionare i tempi. Se la grafica iniziale è raster, prepara un candidato SVG, verifica la geometria statica e poi costruisci gli stati di animazione corrispondenti.