Morphing SVG mit React-Fund

Ich bin seit meiner Kindheit vom Verformungseffekt angezogen. Die Animation von Formveränderungen erregt immer meine Aufmerksamkeit. Das erste Mal, als ich den Verformungseffekt sah, wundte ich mich: „Wow, wie haben sie das gemacht?“ Seitdem habe ich ein Demo -Programm erstellt und einen Artikel über diesen Effekt geschrieben.

Es gibt viele Optionen, wenn es um verschiedene Animationsbibliotheken geht, die die Verformung unterstützen. Viele von ihnen sind gut und bieten viele Funktionen. In letzter Zeit war ich von React-Spraing fasziniert. React-Spring ist eine kurze physische Animationsbibliothek, die auf React basiert. Adam Rackis hat kürzlich einen schönen Überblick veröffentlicht. Diese Bibliothek verfügt über viele Funktionen, einschließlich (und viele andere) SVG -Deformation. In der Tat ist die Schönheit des React-Fundes, wie sie die Verformung unterstützt. Es ermöglicht Ihnen, direkt in das Tag zu verformen, das den SVG -Pfaddeskriptor definiert. Aus Buchhaltungsstandpunkt ist das großartig. SVG -Pfaddeskriptoren befinden sich normalerweise dort, wo Sie sie erwarten.

Das Folgende ist ein Video des Inhalts in diesem Artikel:

Dies ist ein Verformungseffekt in einer Onboarding -Sequenz. Hier wird es als Hintergrundeffekt verwendet. Es ist so konzipiert, dass es die Vordergrundanimation ergänzt; Machen Sie es mehr hervor, anstatt die Szene zu besetzen.

Erstellen Sie ein SVG -Dokument

Das erste, was wir tun müssen, ist das zugrunde liegende Modell zu erstellen. Sobald ich ein klares Verständnis dafür habe, was ich tun möchte, erstelle ich ein Design. Die meisten meiner Erkundungen beginnen mit dem Modell und enden mit einer Demo. In den meisten Fällen bedeutet dies, in meinem Vektoreditor ein SVG -Dokument zu erstellen. Ich benutze Inkscape, um meine SVG zu zeichnen.

Beim Erstellen eines SVG -Dokuments verwende ich die genaue Skala. Ich fand es besser, präzise zu sein. Für mich hilft es mir, zu erkennen, was ich erstellen möchte, wenn ich dasselbe Koordinatensystem wie im Browser- und Code -Editor verwende. Angenommen, Sie erstellen beispielsweise ein 24px ✕ 30px SVG -Symbol, einschließlich Polsterung. Der beste Weg ist, genau die gleiche Größe zu verwenden - ein 24 -Pixel -Breit- und 30 Pixel hohe SVG -Dokument. Wenn das proportionale Ergebnis falsch ist, können Sie es später jederzeit einstellen. In diesem Sinne ist SVG tolerant. Es ist skalierbar, egal was Sie tun.

Das von uns erstellte SVG -Dokument ist 256 Pixel in der Breite und 464 Pixel in Höhe.

Zeichnen ein Modell

Beim Erstellen eines Modells müssen wir überlegen, wo die Knoten platziert sind und wie viele Knoten verwendet werden. Das ist sehr wichtig. Hier legen wir den Grundstein für die Animation. Modellierung ist der gesamte Inhalt der Verformung. Wir haben einen Satz von Knoten in einen anderen Satz von Knoten konvertiert. Diese Knotensätze müssen genau die gleiche Anzahl von Knoten haben. Zweitens sollten diese Sets in irgendeiner Weise zugeordnet werden.

Wenn die Beziehung zwischen Vektorformen nicht sorgfältig berücksichtigt wird, ist die Animation unvollkommen. Jeder Knoten beeinflusst die Animation. Ihre Position und Krümmung müssen genau richtig sein. Weitere Informationen darüber, wie Knoten in SVG -Pfaden aufgebaut sind, finden Sie in der Erklärung der Bezier -Kurve auf MDN.

Zweitens müssen wir beide Formen gleichzeitig berücksichtigen. Eines der Vektoren kann Teile enthalten, die im anderen Vektor nicht gefunden werden können. Alternativ kann es andere Unterschiede zwischen den beiden Modellen geben. In diesen Fällen ist es am besten, an einigen Stellen zusätzliche Knoten einzufügen. Es ist am besten, eine Strategie zu entwickeln. Zum Beispiel ist dieser Winkel da, diese gerade Linie erweitert sich zu einer Kurve usw.

Ich habe einen Stift zusammengestellt, um die Situation zu veranschaulichen, in der das Set schlecht mit genauem Design korreliert. Im folgenden Beispiel werden die Knoten im Deformationseffekt links zufällig platziert. Es gibt keine Beziehung zwischen den Knoten, die die Nummern eins und zwei darstellen. Im richtigen Beispiel ist die Platzierung der Knoten sorgfältiger geplant. Dies bringt eine kohärentere Erfahrung.

Das erste Modell

Das Linienwerkzeug ist das Werkzeug, mit dem wir die erste Vektorform zeichnen. Da das von uns erstellte Modell abstrakter ist, ist es ein bisschen verzeihend. Wir müssen immer noch Position und Krümmung in Betracht ziehen, dies ermöglicht jedoch eine größere willkürliche Belastung.

Für Vektoren und Größen gilt dies auch für die Erstellung von Deformationsmodellen. Dies ist ein iterativer Prozess. Wenn das erste Mal falsch ist, können wir immer zurückkehren und Anpassungen vornehmen. Normalerweise braucht es ein oder zwei Iterationen, um die Animation zum Leuchten zu bringen. Hier ist der fertige Modell -Look.

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

Die zweite und dritte Modelle

Sobald das erste Modell fertig ist, kann das zweite Modell gezogen werden (wir können es auch als Zustand behandeln). Dies ist der erste Satz von Formen, zu denen es deformiert wird. Dies kann der endgültige Zustand sein, d. H. Ein einzelner Deformationseffekt. Oder es könnte ein Schritt auf dem Weg sein, wie ein Keyframe. Für den Fall, den wir uns ansehen, gibt es drei Schritte. Ebenso muss jedes Modell dem Vorgängermodell zugeordnet werden. Eine Möglichkeit, um sicherzustellen, dass das Modell übereinstimmt, besteht darin, den zweiten Vektor als Kopie des ersten Vektors zu erstellen. Auf diese Weise wissen wir, dass das Modell die gleiche Anzahl von Knoten und das gleiche Erscheinungsbild und das gleiche Gefühl hat.

Seien Sie vorsichtig mit dem Herausgeber. Vektoreditoren sind normalerweise für die Dateigröße und das Format optimiert. Wenn Sie Änderungen sparen, ist es wahrscheinlich, dass das Modell inkompatibel ist. Ich habe die Gewohnheit entwickelt, den SVG -Code nach dem Speichern der Datei zu überprüfen. Dies kann auch helfen, wenn Sie mit dem Pfaddeskriptorformat vertraut sind. Wenn Sie nicht daran gewöhnt sind, ist es ein wenig mysteriös. Es ist auch eine gute Idee, die Optimierung in den Vorlieben des Vektoreditors zu deaktivieren.

Wiederholen Sie den obigen Vorgang für die dritte Form. Kopieren Sie, alle Knoten neu positionieren und eine dritte Farbe festlegen.

Lichter, Kameras ... Aktionen!

Nach dem Erstellen des Modells haben wir den größten Teil der Arbeit geleistet. Jetzt ist es Zeit, den Animationsbereich zu überprüfen. React-Spring verfügt über eine Reihe von Haken, die wir für Animationen und Verformungen verwenden können. UseSping ist ideal für den Effekt in diesem Beispiel. Es ist für die Verwendung mit einer einzelnen Animation wie der, die wir erstellen. Hier erfahren Sie, wie Sie die Animation mit dem UseSPring -Hook beginnen.

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

Die oben genannten liefert uns eine Animationseigenschaft X, die unseren Deformationseffekt um sie herum aufbaut. Einer der großen Vorteile dieser Animationseigenschaften ist, dass wir sie ändern können, um fast jede Art von Animation zu erstellen. Wenn der Wert falsch ist, können wir ihn durch Interpolation ändern.

Der zweite Parameter, die Set -Funktion, ermöglicht es uns, ein Update auszulösen. Unten ist ein Codeausschnitt, der seine Verwendung zeigt. Es aktualisiert den Animationswert X mit dem Gestenhandler aus der React-Use-Regre-Bibliothek. Es gibt viele Möglichkeiten, wie wir Animationen im React-Stillstand auslösen können.

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

Wir sind jetzt bereit, unser Modell (Pfaddeskriptor) mit Tags zu kombinieren. Durch Hinzufügen des animierten Schlüsselworts zum JSX-Code haben wir das React-Spring-Animationssystem aktiviert. Indem wir einen Interpolat auf den zuvor benannten Interpolat tätigen, wandeln wir den Widerstandsabstand in eine deformierte Form um. Das Ausgangsarray enthält die zuvor diskutierten Modelle. Um sie einzustellen, kopieren wir einfach den Pfaddeskriptor aus der SVG -Datei in das Tag. Jetzt werden drei verschiedene Deskriptoren D aus drei verschiedenen Pfadelementen aus drei verschiedenen SVG -Dateien kopiert und zu einem kombiniert. So suchen JSX-Knoten mit React-Spring-Animation nach angetriebenem.

<code><svg ...="">
<animated.path c="" d="{x.to({" first="" model="" output:="" range:="" second="" third="" z=""></animated.path></svg></code>

Schauen wir uns den Unterschied zwischen einem Standard -JSX -Pfadelement und dem, den wir derzeit haben, betrachten. Um die Verformungsanimation zu erhalten, haben wir:

• Animiertes Schlüsselwort hinzugefügt, um JSX -Pfadelemente mit React Spring zu machen,
• Ändern Sie den Deskriptor D von der String, um die Federinterpolation zu reagieren, und
• Konvertieren Sie die Entfernung X in eine Keyframe -Animation zwischen drei Pfaddeskriptoren.

Entwicklungsumfeld

Ich habe keine perfekte Entwicklungsumgebung für den Umgang mit SVG gefunden. Derzeit wechsle ich zwischen Vector Editor, IDE und Browser hin und her. Einige Replikation und einige Redundanz. Es ist nicht perfekt, aber es funktioniert. Ich habe in der Vergangenheit versucht, Skripte für SVG zu analysieren. Ich habe immer noch nichts gefunden, was auf alle Szenarien angewendet werden kann. Vielleicht ist es nur so, dass ich etwas falsch gemacht habe. Wenn nicht, wäre es großartig, wenn die Webentwicklung mit SVG nahtloser sein kann.

Fangen wir an!

Last but not least die Demo!

Danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonMorphing SVG mit React-Fund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!