SVG-Morph-Animation: Pfade vor dem Animieren abstimmen

Wenn der Umriss gleich bleiben soll, während sich die gesamte Bildmarke dreht, lege stattdessen einen gemeinsamen SVG-Drehpunkt fest.

SVG-Morph-Animation verändert die Geometrie einer Form zwischen zwei Zuständen. Bereite für native Pfaddateninterpolation übereinstimmende Befehlsstrukturen vor und entscheide, welche Punkte einander entsprechen sollen. Zwei ansprechende Endzeichnungen können auf halbem Weg trotzdem eine zusammengefallene oder verdrehte Form erzeugen.

Die W3C-Regeln zur Pfaddatenanimation verlangen für glatte Interpolation dieselbe Anzahl und dieselben Arten von Befehlen in derselben Reihenfolge. Das ist eine strukturelle Anforderung. Sie entscheidet nicht, welche Logoecke zu welcher Ecke des nächsten Zustands werden sollte.

Beginne mit einem kleinen Paar, das du prüfen kannst. Die eigenen Beispiele unten verwenden ein Quadrat, eine Raute und ein bewusst umgekehrtes Quadrat, um diese beiden Entscheidungen zu trennen.

Erstelle zwei Pfade mit einander entsprechenden Ecken

Dieses von Hand erstellte Quadrat und diese Raute verwenden beide M L L L Z: zum ersten Eckpunkt bewegen, drei Linien zeichnen und die Form schließen. Jedes Koordinatenpaar hat eine entsprechende Position im anderen Pfad.

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

Das SVG-animate-Element ändert ein Attribut im Zeitverlauf. Hier ändert es d über zwei Sekunden. Das fill="freeze" der Animation erhält ihren Endzustand; das grüne fill des Pfads ist eine separate Farbgebungseinstellung.

Halte das Beispiel während der Prüfung auf einer eigenständigen HTML-Seite. Es beginnt automatisch ohne das folgende Prüfskript. Entscheide bei Bedienelementen im produktiven Einsatz, wann es abgespielt werden soll, und biete einen zur Oberfläche passenden statischen Zustand an.

Die Eckzuordnung ist explizit:

Beide Umrisse laufen in derselben Richtung um ihren Umfang. Die erste Ecke bewegt sich zur Oberseite der Raute, die zweite zu ihrer rechten Seite und so weiter. Das ist eine bewusst gestaltete Entscheidung, keine Interpretation der Bedeutung einer der Formen.

Halte die tatsächliche Interpolation an

Prüfe Start, Mitte und Ende, bevor du die Beschleunigungskurve anpasst oder dekorative Effekte hinzufügst. Für das SVG oben hält diese Hilfsfunktion die Zeitleiste an und springt zu einer Zeit in Sekunden:

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

MDN dokumentiert pauseAnimations() und setCurrentTime() zur Steuerung der SVG-Zeitleiste. Verbinde die Hilfsfunktion mit Buttons für die Werte 0, 1 und 2. Das sind drei Positionen innerhalb einer Interpolation, keine drei Ersatzzeichnungen.

Nach einer Sekunde setzt die lineare Interpolation jede Koordinate auf die Mitte zwischen ihren beiden Endwerten. Die erste Ecke liegt daher bei 55, 25. Der vollständige Zwischenzustand dieses eigenen Beispiels ist:

M55 25L135 55L105 135L25 105Z

Wir prüften diese native SVG-Animation im Browser am Start, in der Mitte und am Ende und spielten sie anschließend einmal ab. Der Zwischenzustand blieb ein gefülltes Viereck, und die Wiedergabe erreichte die Raute. Diese Beobachtung gilt für diese von Hand erstellten Pfade im getesteten Browser; sie ist kein PerfectVector-Konvertierungsergebnis und kein browserübergreifender Kompatibilitätstest.

Gleiche Befehlsanzahl kann trotzdem schlechtes Morphing erzeugen

Behalte das Startquadrat, aber kehre die Eckreihenfolge des Zielquadrats um:

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

Die beiden Endzustände sehen wie dasselbe Quadrat aus. Beide Zeichenfolgen verwenden weiterhin M L L L Z. Doch die zweite und vierte Ecke laufen jetzt quer durch die Form, um ihre Plätze zu tauschen. In der Mitte fallen ihre Koordinaten zusammen:

M30 30L80 80L130 130L80 80Z

Alle vier Punkte liegen auf einer Diagonalen. In unserem Browser-Test fiel das gefüllte Quadrat auf halbem Weg zu dieser Diagonalen zusammen und wurde am Ende wieder zum Quadrat. Übereinstimmende Befehlsstruktur machte Interpolation möglich; die Zuordnung der falschen Punkte machte das Ergebnis unerwünscht.

Wenn sich ein exportiertes Paar verdreht, prüfe den ersten Punkt und die Laufrichtung jedes Pfads. Prüfe dann, ob Ecken und Kurvenmerkmale entsprechende Positionen belegen. Wahlloses Hinzufügen von Knoten kann das schwerer erkennbar machen. Der Leitfaden zur Knotenbereinigung hilft beim Vereinfachen statischer Grafik, doch erhalte die Zuordnung, die du zwischen beiden Zuständen hergestellt hast.

Berücksichtige Löcher und separate Teile

Ein Logo kann eine äußere Grenze, eine Öffnung und einen abgetrennten Akzent enthalten. Behandle sie als Teile, die im nächsten Zustand bewusst gewählte Partner brauchen. Liste vor der Animation auf, welcher Teil zu welchem wird. Wenn ein Zustand ein Loch hat und der andere nicht, entscheide, wie die Öffnung verschwinden soll, statt anzunehmen, eine passende Knotenanzahl löse das.

Die fill-rule-Referenz erklärt, wie SVG bestimmt, welche Bereiche innerhalb eines Pfads liegen. Erhalte beim Vorbereiten und Testen eines zusammengesetzten Pfads das gewünschte Füllverhalten. Wenn die Öffnung bereits in einem statischen Endzustand falsch aussieht, verwende den Leitfaden zur Fehlersuche bei ausgefüllten Löchern, bevor du einen Übergang hinzufügst.

Eine praktische Prüfreihenfolge ist:

1. Bestätige Silhouette, Löcher und abgetrennte Details jedes Endzustands.
2. Identifiziere entsprechende Teilpfade oder separate Elemente.
3. Stimme ihre Startpunkte, Richtung und nützlichen Merkmale aufeinander ab.
4. Prüfe Zwischenzustände auf gekreuzte Grenzen oder verschwindende Details.
5. Passe die zeitliche Gestaltung erst nach dem Akzeptieren dieser Geometrie an.

Separate Elemente können leichter zu steuern sein, wenn ein kleiner Akzent unabhängig ausgeblendet werden oder sich bewegen soll. Diese Entscheidung gehört zum Animationsdesign; sie muss nicht in einen einzigen zusammengesetzten Pfad gezwungen werden.

Prüfe die Regeln deines Animationsmechanismus

Das native Beispiel verwendet bewusst übereinstimmende Befehle. Eine Bibliothek kann zusätzliche Vorbereitung übernehmen, ihre Anforderungen können also anders sein.

Die MorphSVG-Dokumentation von GSAP beschreibt das Umwandeln von Pfaddaten in kubische Kurven und das Hinzufügen von Punkten bei Bedarf. Sie bietet außerdem Zuordnungseinstellungen wie shapeIndex. Verwende sie, um die Zuordnung zu prüfen, statt anzunehmen, zwei unabhängig exportierte Formen passten bereits zusammen.

KUTE.js dokumentiert in seinem SVG-Morph-Leitfaden ein anderes Vorbereitungsmodell, einschließlich eines separaten Ablaufs für Teilpfade. Prüfe die tatsächlich verwendete Version und Komponente, bevor du native Pfadbeschränkungen oder Ratschläge einer anderen Bibliothek darauf anwendest.

Wähle für diesen Mechanismus ein kleines repräsentatives Paar und prüfe seine Zwischengeometrie. Ein erfolgreicher Quadrat-zu-Raute-Test belegt nicht das Verhalten eines detaillierten zusammengesetzten Logos. Behalte eine Kopie der Quellgrafik, damit du Änderungen aus der Animationsvorbereitung vom ursprünglichen Design unterscheiden kannst.

Bereite Rastergrafik vor, bevor du Zustände aufeinander abstimmst

Wenn die Vektor-Masterdatei fehlt und nur PNG- oder JPG-Grafik übrig ist, kann PerfectVectors Bild-zu-Vektor-Ablauf einen bearbeitbaren SVG-Kandidaten vorbereiten. Vergleiche Silhouette, Löcher und separate Bereiche mit der Quelle und prüfe dann die heruntergeladenen Pfade. Der SVG-Bearbeitungsleitfaden behandelt den nächsten Bereinigungsschritt.

Das Vektorisieren zweier Bilder stellt keine semantische Zuordnung zwischen ihren Punkten her und erzeugt kein fertiges Morphing. Akzeptiere zuerst jede statische Zeichnung und bereite dann das Paar für den gewählten Animator vor. Wenn bereits eine bearbeitbare Vektor-Masterdatei existiert, arbeite mit ihr, statt eine Rasterkopie erneut nachzuzeichnen.

Teste nach jeder wesentlichen Änderung am Paar einen Zwischenzustand. Ein einfacherer Endzustand ist nur nützlich, wenn der Übergang weiterhin den vorgesehenen Merkmalen folgt. Die Bearbeitungsartikel im Blog bieten verwandte Hinweise zur Quellvorbereitung.

FAQ

Brauchen SVG-Pfade zum Morphing dieselbe Anzahl an Punkten? Bei nativer Pfaddateninterpolation zählt die übereinstimmende Befehlsstruktur einschließlich Befehlstypen und Reihenfolge. Eine Bibliothek kann unterschiedliche Strukturen normalisieren; prüfe daher ihre eigene Dokumentation, statt dich nur auf die Punktanzahl zu verlassen.

Warum verdreht sich mein SVG-Morphing, obwohl die Endzustände korrekt aussehen? Die Punkte können in unerwünschter Reihenfolge einander zugeordnet sein. Prüfe Startpunkt, Richtung und Merkmalszuordnung und dann den Zwischenzustand. Identische Endsilhouetten können eine zusammengefallene Zwischenform verbergen.

Können zwei separate SVG-Dateien automatisch ineinander überführt werden? Ein Animator braucht kompatible oder normalisierte Geometrie und eine sinnvolle Zuordnung zwischen Zuständen. Zwei Dateiendungen allein liefern diese Zuordnung nicht; prüfe Pfade, Löcher und separate Teile.

Erzeugt die Konvertierung zweier PNGs in SVG ein abgestimmtes Morphing-Paar? Nein. Konvertierung bereitet statische Vektorkandidaten vor. Du musst weiterhin ihre Teile und Punkte aufeinander abstimmen, einen Animationsmechanismus wählen und den Übergang prüfen.

Quellen

1. W3C — SVG-Pfade — Definiert die Struktur nativer Pfaddateninterpolation und die Parameterzuordnung.
2. MDN — animate — Dokumentiert Attributanimation im Zeitverlauf.
3. MDN — pauseAnimations — Ermöglicht das Anhalten der Prüfzeitleiste.
4. MDN — setCurrentTime — Dokumentiert das Springen auf der SVG-Zeitleiste in Sekunden.
5. MDN — fill-rule — Erklärt das Verhalten innerer Bereiche zusammengesetzter Grafik.
6. GSAP — MorphSVG — Beschreibt Normalisierung und Einstellungen zur Punktzuordnung.
7. KUTE.js — SVG Morph — Dokumentiert komponentenspezifische Vorbereitung und den Teilpfadablauf.

Stimme die Teile aufeinander ab und prüfe den Zwischenzustand, bevor du die zeitliche Gestaltung verfeinerst. Wenn deine Ausgangsgrafik ein Rasterbild ist, bereite einen SVG-Kandidaten vor, bestätige seine statische Geometrie und erstelle dann die einander entsprechenden Animationszustände.