Morphing SVG mit react-spring

Mich fasziniert der Morphing-Effekt schon, seit ich ein kleines Kind war. Etwas an einer sich verwandelnden Animation fesselt mich immer. Als ich das erste Mal Morphing sah, fragte ich mich  „ Wow, wie haben sie das gemacht?” Seitdem habe ich Demos erstellt und einen Artikel über den Effekt geschrieben.

Es gibt viele Optionen, wenn es um verschiedene Animationsbibliotheken geht, die Morphing unterstützen. Viele davon sind gut und bieten zahlreiche Funktionen. In letzter Zeit habe ich mich mit react-spring beschäftigt. React-spring ist eine clevere, physikbasierte Animationsbibliothek, die auf React aufbaut. Adam Rackis hat kürzlich eine schöne Übersicht darüber veröffentlicht. Die Bibliothek bietet viele Funktionen, darunter, neben vielen anderen, SVG-Morphing. Tatsächlich liegt die Schönheit von react-spring darin, wie es Morphing unterstützt. Es erlaubt Ihnen, dies direkt im Markup zu tun, wo Sie Ihre SVG-Pfad-Deskriptoren definieren. Das ist aus buchhalterischer Sicht gut. Die SVG-Pfad-Deskriptoren sind dort, wo Sie sie typischerweise erwarten würden.

Hier ist ein Video davon, was wir in diesem Artikel behandeln

Es ist ein Morphing-Effekt in einer Onboarding-Sequenz. Hier wird er als Hintergrundeffekt eingesetzt. Er soll die Vordergrundanimation ergänzen; sie etwas mehr hervorheben, anstatt die Szene zu dominieren.

Erstellen des SVG-Dokuments

Als Erstes müssen wir das zugrundeliegende Modell erstellen. Normalerweise, wenn ich eine klare Vorstellung davon habe, was ich tun möchte, erstelle ich eine Art Design. Die meisten meiner Erkundungen beginnen mit einem Modell und enden mit einer Demo. In den meisten Fällen bedeutet das, ein SVG-Dokument in meinem Vektoreditor zu erstellen. Ich verwende Inkscape, um meine SVGs zu zeichnen.

Wenn ich SVG-Dokumente erstelle, verwende ich die exakten Proportionen. Ich finde, es ist besser, präzise zu sein. Für mich hilft es meiner Wahrnehmung dessen, was ich erstellen möchte, wenn ich dasselbe Koordinatensystem im Vektoreditor wie im Browser und im Code-Editor verwende. Nehmen wir zum Beispiel an, Sie erstellen gerade ein 24px ✕ 30px SVG-Icon, inklusive Padding. Der beste Ansatz ist, die exakt gleiche Größe zu verwenden – ein SVG-Dokument, das 24 Pixel breit und 30 Pixel hoch ist. Sollten sich die Proportionen als falsch herausstellen, können sie später immer noch angepasst werden. SVG ist in dieser Hinsicht nachsichtig. Es ist skalierbar, egal was Sie tun.

Das SVG-Dokument, das wir erstellen, ist 256 Pixel breit und 464 Pixel hoch.

Zeichnen der Modelle

Beim Erstellen von Modellen müssen wir darüber nachdenken, wo wir die Knoten platzieren und wie viele Knoten wir verwenden. Das ist wichtig. Hier legen wir den Grundstein für die Animation. Modellierung ist das, worum es beim Morphing geht. Wir haben eine Menge von Knoten, die sich in eine andere verwandeln. Diese Knotensammlungen müssen exakt die gleiche Anzahl von Knoten haben. Zweitens sollten diese Sets irgendwie korrelieren.

Wenn die Beziehung zwischen den Vektorformen nicht sorgfältig durchdacht ist, wird die Animation nicht perfekt sein. Jeder einzelne Knoten beeinflusst die Animation. Ihre Position und die Krümmung müssen genau richtig sein. Für detailliertere Informationen darüber, wie Knoten in SVG-Pfaden konstruiert werden, lesen Sie die Erklärung der Bézier-Kurven auf MDN.

Zweitens müssen wir beide Formen berücksichtigen. Einer der Vektoren kann Teile enthalten, die im anderen nicht vorhanden sind. Oder es können andere Unterschiede zwischen den beiden Modellen bestehen. In diesen Fällen kann es eine gute Idee sein, an bestimmten Stellen zusätzliche Knoten einzufügen. Am besten sind Strategien zu entwickeln. Zum Beispiel: Diese Ecke geht dorthin, diese gerade Linie wölbt sich zu einer Kurve und so weiter.

Ich habe einen Pen zusammengestellt, um zu veranschaulichen, wie es aussieht, wenn Sets schlecht korrelieren, im Vergleich zu genau gestalteten. Im folgenden Beispiel sind im linken Morphing-Effekt die Knoten zufällig platziert. Die Knoten, die die Zahlen eins und zwei bilden, haben keine Beziehung. Im rechten Beispiel ist die Platzierung der Knoten sorgfältiger geplant. Dies führt zu einem kohärenteren Erlebnis. 

Das erste Modell

Mit dem Linienwerkzeug zeichnen wir die erste Vektorform. Da das Modell, das wir erstellen, abstrakter ist, ist es etwas nachsichtiger. Wir müssen immer noch über die Platzierung und die Krümmung nachdenken, aber es erlaubt mehr Nachlässigkeit.

Was Vektoren und Größen angeht, gilt dasselbe für die Erstellung der Modelle für das Morphing. Es ist ein iterativer Prozess. Wenn es beim ersten Mal nicht richtig ist, können wir jederzeit zurückgehen und es anpassen. Es erfordert normalerweise ein oder zwei Iterationen, damit die Animation glänzt. Hier sehen Sie, wie das Modell aussieht, wenn es fertig ist.

Das Ergebnis ist eine glatte, abstrakte SVG-Form mit acht Knoten.

Das zweite und dritte Modell

Sobald das erste Modell fertig ist, ist es Zeit, das zweite Modell (das wir auch als Zustand betrachten können) zu zeichnen. Dies ist die Form, in die sich das erste Set verwandeln wird. Dies könnte der Endzustand sein, d.h. ein einzelner Morphing-Effekt. Oder es könnte ein Schritt auf dem Weg sein, wie ein Keyframe. In dem Fall, den wir betrachten, gibt es drei Schritte. Auch hier muss jedes Modell mit dem vorherigen korrelieren. Eine Möglichkeit, sicherzustellen, dass die Modelle übereinstimmen, ist die Erstellung des zweiten Vektors als Duplikat des ersten. So wissen wir, dass die Modelle die gleiche Anzahl von Knoten und das gleiche Aussehen und Gefühl haben.

Seien Sie vorsichtig mit dem Editor. Vektoreditoren optimieren typischerweise für Dateigröße und Format. Es kann sehr gut sein, dass die Modelle beim Speichern von Änderungen inkompatibel werden. Ich habe es mir zur Gewohnheit gemacht, den SVG-Code nach dem Speichern der Datei zu überprüfen. Es hilft auch, wenn Sie mit dem Pfad-Deskriptor-Format vertraut sind. Es ist etwas kryptisch, wenn man nicht daran gewöhnt ist. Es könnte auch eine gute Idee sein, die Optimierung in den Vektoreditor-Einstellungen zu deaktivieren.

Wiederholen Sie den obigen Prozess für die dritte Form. Kopieren Sie, verschieben Sie alle Knoten und setzen Sie die dritte Farbe.

Licht, Kamera… Action!

Sobald die Modelle erstellt sind, haben wir den Großteil der Arbeit erledigt. Jetzt ist es an der Zeit, sich dem Animationsaspekt zuzuwenden. React-spring bietet eine Reihe von Hooks, die wir für Animation und Morphing verwenden können. `useSpring` ist ein perfekter Kandidat für den Effekt in diesem Beispiel. Er ist für einzelne Animationen wie die, die wir erstellen, gedacht. Hier ist, wie man Animationen mit dem `useSpring`-Hook initialisiert.

const [{ x }, set] = useSpring(() => ({
  x: 0,
}));

Das Obige liefert uns eine Animationseigenschaft, `x`, um unseren Morphing-Effekt aufzubauen. Eine großartige Sache an diesen Animationseigenschaften ist, dass wir sie verändern können, um fast jede Art von Animation zu erstellen. Wenn der Wert daneben liegt, können wir ihn durch Interpolation ändern.

Der zweite Parameter, die `set`-Funktion, erlaubt es uns, Updates auszulösen. Unten ist ein Codeausschnitt, der seine Verwendung zeigt. Er aktualisiert den Animationswert `x` mit einem Gestenhandler `useDrag` aus der react-use-gesture-Bibliothek. Es gibt viele Möglichkeiten, wie wir Animationen in react-spring auslösen können.

const bind = useDrag(
  ({ movement: [x] }) => {
    // ...
    set({ x });
  },
);

Wir haben nun alles eingerichtet, um unsere Modelle, die Pfad-Deskriptoren, mit dem Markup zu kombinieren. Indem wir das `animated`-Schlüsselwort zum JSX-Code hinzufügen, aktivieren wir das Animationssystem von react-spring. Mit dem Interpolationsaufruf `to`, ehemals `interpolate`, konvertieren wir Drag-Distanzen in morphing-Formen. Das Ausgabe-Array enthält die bereits besprochenen Modelle. Um sie an Ort und Stelle zu bekommen, kopieren wir einfach die Pfad-Deskriptoren aus der SVG-Datei in das Markup. Drei verschiedene Deskriptoren, `d`, aus drei verschiedenen `path`-Elementen, kopiert aus drei verschiedenen SVG-Dateien, sind nun zu einer kombiniert. So sieht der JSX-Knoten aus, wenn er mit einer react-spring-Animation betrieben wird.

<svg ...>
  <animated.path
    d={x.to({
      range: [-400, -200, 0],
      output: [
        // First model
        "M 157.81292,131.16918 C 128.33979,127.45582 59.004493,121.76045 53.287478,168.06051 47.570462,214.36057 86.454799,213.14326 77.881699,234.66986 69.308599,256.19646 59.042495,268.13837 67.634107,288.98209 76.225718,309.82581 103.27857,320.05328 138.34249,312.55156 173.40641,305.04984 204.93111,298.87002 208.02612,279.75926 211.12113,260.6485 189.48716,257.88808 188.5557,229.54606 187.62424,201.20404 212.01456,174.45091 200.8528,155.7634 189.69104,137.07589 187.28605,134.88254 157.81292,131.16918 Z",
        // Second model
        "M 157.81292,131.16918 C 128.33979,127.45582 48.756902,138.1566 53.287478,168.06051 57.818054,197.96442 75.182448,197.77187 73.782662,224.42227 72.382877,251.07266 70.314846,257.89078 72.757903,278.7345 75.20096,299.57822 88.114636,303.32873 113.94876,307.60312 139.78288,311.87751 159.84171,314.24141 176.25858,295.13065 192.67546,276.01989 203.83379,256.86332 190.60522,228.5213 177.37665,200.17928 205.866,189.8223 211.10039,171.13479 216.33478,152.44728 187.28605,134.88254 157.81292,131.16918 Z",
        // Third model
        "M 157.81292,131.16918 C 128.33979,127.45582 86.672992,124.83473 71.733144,166.01099 56.793295,207.18725 69.033893,203.92043 80.955976,230.57083 92.87806,257.22123 55.968217,259.9403 59.436033,279.75926 62.90385,299.57822 94.985717,299.83924 132.0922,306.16316 169.19868,312.48708 186.48544,320.38997 198.80328,288.98209 211.12113,257.57422 199.73475,245.59097 195.72902,217.24895 191.72328,188.90693 209.96504,178.54995 215.19943,159.86244 220.43382,141.17493 187.28605,134.88254 157.81292,131.16918 Z",
      ],
    })}
  />
</svg>

Betrachten wir die Unterschiede zwischen einem Standard-JSX-`path`-Element und dem, was wir derzeit haben. Um die Morphing-Animation zu realisieren, haben wir

• das `animated`-Schlüsselwort hinzugefügt, damit das JSX-`path`-Element mit React spring animiert wird,
• den Deskriptor `d` von einem String zu einer React spring-Interpolation geändert und
• die Distanz `x` in eine Keyframe-Animation zwischen drei `path`-Deskriptoren konvertiert.

Entwicklungsumgebung

Ich habe noch nicht die perfekte Entwicklungsumgebung für die Arbeit mit SVG gefunden. Derzeit wechsle ich zwischen dem Vektoreditor, der IDE und dem Browser hin und her. Es gibt ein bisschen Kopieren und einige Redundanz. Es ist nicht perfekt, aber es funktioniert. Ich habe in der Vergangenheit ein wenig mit Skripten experimentiert, die SVGs parsen. Ich habe immer noch nichts gefunden, das ich auf alle Szenarien anwenden kann. Vielleicht mache ich etwas falsch. Wenn nicht, wäre es großartig, wenn die Webentwicklung mit SVGs etwas nahtloser wäre.

Los geht's!

Zu guter Letzt, die Demo!

Danke fürs Lesen!