Percorsi di movimento SVG: muovi un'icona su una curva

Usa animateMotion per muovere un elemento SVG lungo un percorso e inserisci al suo interno un mpath per riferirti a un tracciato esistente. rotate="auto" ruota la grafica in movimento seguendo la direzione del percorso. L'origine locale della grafica è il punto che viaggia lungo il tracciato, quindi un'icona importata richiede un ancoraggio scelto deliberatamente.

È utile quando una freccia personalizzata, un emblema o una piccola illustrazione deve muoversi senza cambiare forma. Per una linea che sembra disegnarsi da sola, usa l'animazione del tratto. Per una sagoma che si trasforma in un'altra, usa il morphing dei tracciati. Queste tecniche risolvono compiti visivi diversi.

Tieni il percorso separato dalla grafica

Il percorso definisce dove si muove l'icona. L'icona definisce ciò che vede il lettore. Il riferimento MDN di animateMotion descrive l'elemento di movimento, mentre il riferimento di mpath mostra come riutilizzare un tracciato per riferimento.

L'esempio originale qui sotto ha una freccia verde petrolio e un punto dorato. La freccia punta lungo X positivo, rendendo facile esaminare l'effetto della rotazione automatica. La grafica è disegnata attorno a (0, 0) anziché lontano su una grande tela esportata.

Salva questo come motion.html e aprilo in un browser. L'emblema statico appare per primo. Premi Play per eseguire un singolo passaggio di quattro secondi; Show static ripristina l'illustrazione iniziale.

<!doctype html>
<meta charset="utf-8">
<title>Arrow following a curve</title>
<style>
  svg { display: block; width: min(100%, 800px); }
  .moving { display: none; }
  .playing .moving { display: inline; }
  .playing .still { display: none; }
</style>
 
<svg id="scene" viewBox="0 0 480 240"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="An arrow emblem follows a curved route">
  <defs>
    <path id="route" d="M60 180 C160 20 300 20 420 180" />
    <g id="emblem">
      <path fill="#147d78"
            d="M-18-12 H4 V-22 L30 0 L4 22 V12 H-18 Z" />
      <circle cx="-7" cy="0" r="4" fill="#e5a340" />
    </g>
  </defs>
 
  <use href="#route" fill="none" stroke="#a9bab6" stroke-width="2" />
  <use class="still" href="#emblem" transform="translate(60 180)" />
  <g class="moving">
    <use href="#emblem" />
    <animateMotion id="motion" dur="4s" begin="indefinite"
                   fill="freeze" rotate="auto">
      <mpath href="#route" />
    </animateMotion>
  </g>
</svg>
 
<button id="play" type="button">Play</button>
<button id="stop" type="button">Show static</button>
<script>
  const scene = document.querySelector("#scene");
  const motion = document.querySelector("#motion");
  const preference = matchMedia("(prefers-reduced-motion: reduce)");
 
  function showStatic() {
    scene.pauseAnimations();
    scene.classList.remove("playing");
  }
 
  document.querySelector("#play").addEventListener("click", () => {
    if (preference.matches) return;
    scene.pauseAnimations();
    scene.setCurrentTime(0);
    scene.classList.add("playing");
    motion.beginElement();
    scene.unpauseAnimations();
  });
  document.querySelector("#stop").addEventListener("click", showStatic);
  preference.addEventListener("change", showStatic);
  showStatic();
</script>

La curva grigia visibile è un use separato del percorso. Rimuovi quel use se il tracciato deve essere invisibile; mantieni la definizione in defs affinché l'animazione possa ancora riferirsi ad essa. L'elemento di movimento va all'interno del gruppo la cui freccia e il cui punto devono muoversi insieme.

fill="freeze" conserva lo stato finale dell'animazione. Non è collegato al colore verde petrolio della freccia. Questo esempio viene eseguito una volta, rendendo la posizione finale più facile da controllare rispetto a un ciclo infinito.

Correggi un'icona che si allontana dal percorso

Il movimento viene applicato al sistema di coordinate dell'elemento. Non trova automaticamente il centro visivo di un logo. Se i tracciati importati occupano coordinate attorno a (200, 120), muovere il gruppo che li contiene lungo un percorso lascia quell'offset all'interno del gruppo.

Scegli il punto della grafica che deve toccare il percorso, poi trasla quel punto a (0, 0) all'interno del gruppo in movimento. Per un ancoraggio a (200, 120), la struttura è:

<g class="moving">
  <g transform="translate(-200 -120)">
    <!-- Place the original artwork paths here. -->
  </g>
  <animateMotion dur="4s" rotate="auto">
    <mpath href="#route" />
  </animateMotion>
</g>

La traslazione interna prepara la grafica; il gruppo esterno riceve il movimento. Mantieni separati questi compiti quando aggiungi una scala o una rotazione correttiva. La specifica delle animazioni SVG definisce il movimento come una trasformazione supplementare, quindi le trasformazioni esistenti influenzano ancora il posizionamento finale.

Per un distintivo, il centro può essere un ancoraggio sensato. Per un veicolo, potresti volere il punto di contatto di una ruota; per un puntatore, la punta. Il centro del riquadro delimitatore è soltanto un'ipotesi iniziale. Esamina il punto di contatto previsto in più posizioni sul percorso.

Una rotazione da fermo ha un proprio problema di perno. La guida SVG a transform-origin spiega quel caso senza aggiungere un percorso di spostamento.

Scegli se la grafica deve ruotare

Questi valori sono documentati nel riferimento MDN della rotazione nel movimento. auto-reverse cambia l'orientamento; non inverte l'ordine in cui viene percorso il tracciato.

Se la sorgente punta verso l'alto, auto non sa che alto significa avanti. Ruota un gruppo interno della grafica finché punta lungo X positivo, poi applica il movimento al gruppo esterno. Evita di ruotare il percorso stesso soltanto per correggere l'orientamento locale dell'icona.

Gli angoli acuti del percorso possono produrre cambi di direzione bruschi. Un percorso curvo è un punto di partenza migliore quando vuoi una curva visibilmente fluida. Lascia anche spazio attorno al percorso: un'icona può estendersi oltre la linea centrale del tracciato ed essere ritagliata vicino al bordo del viewport SVG.

Controlla inizio, centro e fine

Abbiamo aperto lo stesso percorso ed emblema in Chrome e usato un piccolo sistema di test per mettere in pausa la timeline SVG a 0, 2 e 4 secondi. L'icona iniziava in basso a sinistra, passava vicino al culmine e terminava in basso a destra. Con auto, il suo orientamento cambiava lungo la curva. Con rotazione impostata su 0, la posizione intermedia era invariata mentre la freccia rimaneva orizzontale.

Quel controllo riguarda questo campione in un browser. Non è un test di importazione dell'animazione negli strumenti di design né una garanzia per ogni modalità di incorporamento del browser.

Per la tua grafica:

1. Controlla il punto di contatto all'inizio del percorso. Correggi gli offset sorgente prima di regolare i tempi.
2. Metti in pausa vicino alle curve e conferma che la parte desiderata dell'emblema segua la linea.
3. Confronta rotazione automatica e fissa. Scegli in base alla grafica, soprattutto quando include testo.
4. Controlla la posa finale per eventuali ritagli e conferma che la riproduzione riparta correttamente.
5. Prova il contesto di consegna effettivo. Questo esempio usa SVG inline in una pagina HTML con controlli JavaScript.

animateMotion usa un movimento a ritmo costante per impostazione predefinita, come documenta MDN. Metà durata rappresenta quindi circa metà della distanza percorsa, non necessariamente il parametro della curva a metà tra i suoi punti di controllo. La posa a due secondi del nostro percorso cubico asimmetrico era leggermente a destra del suo culmine geometrico.

Fornisci una versione statica utile

L'esempio parte con un use statico dell'emblema e il movimento inizia soltanto dopo l'attivazione del pulsante Play. Se JavaScript non viene eseguito, la grafica statica rimane visibile. Quando è attiva la preferenza di movimento ridotto, il gestore la lascia in quello stato.

La funzionalità media prefers-reduced-motion permette alla pagina di rispondere alla preferenza dell'utente sul movimento. Qui JavaScript legge quella preferenza prima di avviare il movimento SVG e ripristina la versione statica se la preferenza cambia.

Abbiamo anche provato il ramo statico con un interruttore esplicito di anteprima del movimento ridotto nel sistema di test: nascondeva il gruppo animato e mostrava l'emblema nella posizione iniziale. Quell'interruttore esercitava la nostra logica di ripiego; non cambiava l'impostazione di accessibilità del computer.

Mantieni il significato fuori dall'animazione quando possibile. L'utente non dovrebbe dover guardare un emblema in movimento per conoscere uno stato o leggere istruzioni essenziali. Per un'icona decorativa accanto a testo già descrittivo, adatta l'etichettatura di accessibilità per evitare di annunciare due volte lo stesso contenuto.

Prepara il tuo motivo prima di animarlo

Se il tuo motivo personalizzato esiste soltanto come PNG o JPG, PerfectVector può aiutare a recuperare grafica SVG modificabile prima di costruire il movimento. Esamina la sagoma recuperata e le piccole aperture, raggruppa le parti che devono muoversi insieme e scegli il punto di ancoraggio. PerfectVector fornisce la geometria sorgente; percorso, tempi e comportamento del movimento vengono creati separatamente.

Un SVG esistente può passare direttamente al raggruppamento e alla preparazione dell'ancoraggio. Per frecce semplici come questa dimostrazione, disegnare direttamente la geometria è anche pratico. La panoramica sulla vettorializzazione delle immagini spiega quando è utile ricalcare una sorgente raster.

Per un simbolo personalizzato soltanto raster, prova la tua immagine in PerfectVector, controllane contorni e piccoli dettagli, poi prova quell'SVG all'inizio, al centro e alla fine del percorso. Mantieni una versione statica accanto a quella animata.

FAQ

Perché la mia icona si muove accanto al tracciato anziché sopra? La grafica potrebbe essere spostata rispetto alla sua origine locale. Scegli il punto che deve seguire il percorso e traslalo a zero all'interno del gruppo in movimento. Controlla il risultato all'inizio e in una curva.

La rotazione automatica cambia la forma dell'icona? No. Il movimento cambia posizione e orientamento della grafica. Non trasforma la geometria dei suoi tracciati. La direzione frontale della sorgente dovrebbe puntare lungo X positivo per la rotazione automatica usata in questo esempio.

Posso rimuovere la linea guida visibile? Sì. Mantieni la definizione del percorso e il suo ID, ma rimuovi l'elemento separato che disegna la linea guida. Il movimento può ancora riferirsi al tracciato tramite mpath.

Fonti

1. MDN animateMotion — Descrive percorsi di movimento, valori di rotazione e movimento predefinito a ritmo costante.
2. MDN mpath — Spiega come riferirsi a un percorso esistente all'interno dell'elemento di movimento.
3. Specifica delle animazioni SVG — Definisce le trasformazioni di movimento e il loro rapporto con le coordinate della grafica.
4. MDN attributo rotate — Documenta l'orientamento di movimento fisso, automatico e rivolto al contrario.
5. MDN preferenza di movimento ridotto — Spiega come rilevare la preferenza dell'utente sul movimento.