Konvertieren Sie Fotos in animierte SVGs mit Reaktion, React und TypeScript um, indem Sie die animierten SVGs umwandeln.

1. Einführung: Das Erlernen der Verwendung optimierter SVGs ist eine wichtige Fähigkeit für alle Designer- oder Entwicklerfähigkeiten. In diesem Minikurs, der nur aus einer Lektion besteht, gehen wir von einem Bild aus , das nur mit einem normalen Telefon aufgenommen wurde. Wir werden das Bild optimieren. Wir werden es in ein SVG umwandeln. Anschließend optimieren wir das SVG, um es für das Web bereit zu machen, erstellen dann eine React-SVG-Komponente. Und als Bonus fügen wir einen benutzerdefinierten React-Hook hinzu, um den Hintergrund dieser SVG-Datei zu animieren. Und die ganze Zeit wird React TypeScript verwenden. Es hat mir wirklich Spaß gemacht, diesen Minikurs aufzunehmen. Ich hoffe du hast viel gelernt. Lass uns jetzt anfangen. 2. Wie man Fotos in optimierte, web-Ready SVGs und Port umwandelt, um TypeScript zu reagieren: Ich fand es cool dieses wirklich coole Logo hier auf der Rückseite und in der Nähe des sechsten Jubiläums auf der Vorderseite anzubringen. Aber es wäre cool, es in ein SVG zu verwandeln. Und als Bonus füge ich sogar einen benutzerdefinierten React-Hook hinzu, um letztendlich diese pinke Hintergrundfarbe zu ändern . wir also die Maus bewegen, ändern wir die Hintergrundfarbe. Also zeige ich dir den vollen Flow. Ich habe ein Foto von der vorderen Rückseite des Shirts gemacht. Also ja, lassen Sie uns in den Code einsteigen und anfangen, ihn uns anzusehen. Wie gesagt, ich habe bereits ein Bild von der Vorder- und Rückseite des Shirts gemacht ein Bild von der Vorder- und Rückseite des , nur mit einer normalen iPhone-Kamera und nichts Besonderes. Das erste, was wir tun werden, um unser reaktionsbasiertes SVG zu erstellen , ist diese beiden Bilder in GIMP zu öffnen. Also wähle ich beide aus. Und wir werden sie hier in GIMP öffnen. Jetzt, da wir beide Bilder hier haben, drehen wir sie als Erstes. Also gehen wir runter zu Transformieren und drehen uns um 90 Grad. Und auch für die Rückseite des Shirts, drehen Sie es um 90 Grad. Dann gehe ich zum Bild-Modus-Index. Und ich werde das in ein dreifarbiges Bild umwandeln. Wir haben also Schwarz, Hellblau und diese leuchtend rosa Farbe. Hoffentlich macht Gimp einen guten Job für uns. Mal sehen, wie das läuft. Großartig. Es hat also im Grunde mehr oder weniger gute Arbeit geleistet. Ich werde das auch hier tun. Und in diesem Fall haben wir nicht drei Farben, aber ich denke, wir haben 12345. Ich glaube, sie haben dieselbe Farbe. Versuchen wir es also mit fünf Farben zu indizieren und sehen, was passiert. In Ordnung, das sieht also ziemlich gut aus. Das nächste, was wir tun werden, ist diese Bilder zu exportieren. Ich nenne das Shirt einfach wieder sauber. Stellen Sie sicher, dass die Qualität 100 eingestellt ist. Und das Gleiche gilt für die Front hier. Und ich nenne das genauso. Hemd sauber. Wir haben unsere 100-prozentige Qualität und werden diese exportieren. Als Nächstes öffnen wir Inkscape. Und jetzt, da wir Inkscape geöffnet haben, werden wir diese beiden bereinigten Bilder importieren. Ich habe die beiden hier, kann beide mit Befehl auswählen und klicken. Und wir werden sie öffnen. Nun fragt Inkscape dich hier, einige Einstellungen wollen wir glatt nehmen, um die Qualität zu optimieren. Einbetten ist in Ordnung und aus einer Datei. Stellen Sie also sicher, dass es wirklich wichtig ist, dass das einzig Wichtige hier glatt ist , weil wir wollen, dass das Bild von höchster Qualität ist. Inkscape öffnet also standardmäßig diese beiden separaten Bilder. Wir können die Vorderseite hier nehmen, und ich kopiere das einfach nach hinten. Wir haben hier die Vorderseite von hinten Seite an Seite. Es sind immer noch beide Bitmap-Bilder, und hier kommt die Magie ins Spiel. Also, wie gesagt, dies ist ein dreifarbiges Bild und dies ist ein fünffarbiges Bild. Lass uns zuerst die drei Farben machen. Sobald Sie Ihre Bitmap ausgewählt haben. Ich gehe hier hoch, Trace Bitmap. Und wir wollen mehrere Scans machen. Und statt Helligkeitsstufen werden wir keine Farben verwenden. Und dann wollen wir drei Scans, einen pro Farbe. Normalerweise entferne ich all diese Optimierungen, aber Ihr Kilometerstand kann variieren. Das Schöne ist, dass Sie ständig aktualisieren und entscheiden können , ob Sie mit diesen Werten herumspielen möchten . Manchmal sorgt das Glätten für schöne glattere Kanten, aber es sieht hier wie die Standardeinstellung aus, ohne Optimierung oder Auswahl von Glatt, sieht ziemlich gut aus. Also werde ich sagen OK. Und du wirst es jetzt hier sehen, genau überlagert mit der Bitmap. Es ist keine Bitmap, wie sie es immer noch ist, sagt das Bild hier unten. Stattdessen sehen wir, dass es sich um eine Gruppe von drei Objekten handelt. Das heißt, die Spur hat perfekt funktioniert. Ich werde das einfach hierher verschieben und ich werde das alte Bild loswerden . Jetzt mache ich dasselbe für die Rückseite des Shirts. Bitmap nachverfolgen. Mehrere Scans. In diesem Fall haben wir fünf Farben. Lassen Sie uns es aktualisieren, um zu sehen, ob es alle Farben aufnimmt. Perfekt. Das sieht toll aus. Sagen wir, okay. Und jetzt sehen wir, dass wir eine Gruppe von fünf Objekten haben. Also werde ich das noch einmal verschieben und das alte Bild loswerden. Also jetzt werden wir diese Bilder bereinigen. Also für die Vorderseite des Shirts benötige ich diesen Hintergrund eigentlich nicht. Ich will nur den Schriftzug. Also das Blau und das Rosa. Also das erste, was ich tun werde, ist die Gruppierung aufzuheben. Diese Gruppe von drei Farben. Normalerweise gruppiert sich der Trace automatisch. Und insgesamt können wir das einfach aufheben. Und wir sehen, dass wir hier diesen dunklen Pfad gewählt haben. Das werden wir einfach loswerden. Es sieht also so aus, als ob es bei der Konvertierung in GIMP einige Artefakte gab , aber das ist auch kein Problem. Seien Sie vorsichtig, wenn Sie hier auswählen. Wir wollen nicht die gesamte Ebene löschen. Wir wollen nur diese Ecke löschen. Und da das jetzt ein SVG ist, wollen wir nur die Knoten aus diesem SVG und wir werden diese Ecke löschen. Wir bleiben also nur noch für die pinke Schicht übrig. Nur dieser nette Schriftzug. Also können wir dasselbe für die Rückseite des Shirts tun. Ich werde die Gruppierung aufheben. Und hier müssen wir ein bisschen vorsichtig sein, denn wenn wir genau hinschauen , wie das Shirt gedruckt wurde, dieses Schwarz keine separate Farbe. Dies ist buchstäblich der Hintergrund dieses Bildes. Wir müssen also einen Teil dieses Hintergrunds behalten, aber ich werde ihn irgendwie zurückformen sodass ein Umriss um das gesamte Bild entsteht. Wird ein bisschen netter aussehen. Ich glaube. Das Erste, was ich tun werde, ist dieses Rot loszuwerden. Ich bin mir nicht sicher, wie es genau aufgetaucht ist, aber ich werde diese rote Schicht ganz loswerden. Also können wir das einfach löschen. Und wie gesagt, ich fange an diesen schwarzen Hintergrund neu zu gestalten. Wir können hier also viele Optimierungen vornehmen. Ich werde die meisten dieser Knoten löschen und wir können mit dem Aufräumen beginnen. Jetzt stellen Sie möglicherweise fest, dass Sie irgendwann einen anderen Knoten benötigen. Das ist einfach genug zu lösen. Sie stellen nur sicher, dass mindestens zwei Knoten mit gedrückter Umschalttaste ausgewählt sind. Und wir drücken hier einfach die Plus-Taste, um einen neuen Knoten einzufügen Ich benötige noch ein paar mehr. Auch wenn diese drei ausgewählt sind , drücke ich erneut die Plus-Taste und Sie werden sehen, dass tatsächlich eine neue zwischen jede Auswahl gesetzt wird. Das sollte mir hier also ziemlich gute Laufleistung bringen. Jetzt machen wir es einfach nach oben und immer wieder. Leg es einfach oben drauf. Das sieht ziemlich nett aus. Und mir ist aufgefallen, dass sich diese Farbe nicht wirklich perfekt übertragen hat. Ich nehme einfach Aqua. Das sieht echt nett aus. Und ich werde auch sicherstellen, dass die Untertitel hier in diesem Hintergrund dieselbe Farbe haben. Nur für ein bisschen Einigkeit. Kann diesen Hex-Code kopieren. Und wenn ich das hier auswähle, kann ich es wieder einfügen. Und das sieht ziemlich gut aus. Ich meine, der Hintergrund hier ist nicht super sauber, aber das ist natürlich nicht der Sinn dieses Videos. Deshalb habe ich eine Menge von diesem Zeug durchgemacht. Und natürlich finden Sie, wie wir wissen, unendlich viele SVGs im Internet. Also manchmal fängst du sowieso mit einem SVG an. Das war nur ein kleiner Bonus euch meinen Arbeitsablauf zu zeigen, wie ich Bitmap-Bilder in SVGs umwandle. Wir sind fast fertig. Ich wähle das aus und gehe zu den Dokumenteneigenschaften. Ich werde die Größe der Seite an den Inhalt anpassen. Ich werde ein paar Ränder hinzufügen. Wahrscheinlich ist 50 ziemlich gut. Stellen Sie dabei nur sicher, dass Ihre Einheiten in Pixeln angegeben sind. Wenn Sie ein Zoll oder so groß sind, werden Sie riesige Margen haben. Aber 50 scheint ziemlich anständig zu sein. Und ich denke, es ist gut für uns, das zu retten. Also gehe ich zu Speichern unter und gebe einfach das Shirt-Design ein. Und natürlich mit der SVG-Erweiterung. Jetzt bietet uns Inkscape zwei SVG-Optionen, das Inkscape-SVG oder das Flugzeug-SVG. Und da wir uns dem Web zuwenden, wollen wir zu einfachem SVG wechseln. Inkscape wird einen Teil ihres Markups streichen. Es ist also nicht so ausführlich. Aber wie wir in Kürze sehen werden, werden wir das SVG noch weiter optimieren. Also werde ich das speichern. Nur um zu veranschaulichen, was wir hier tun werden, ich bin in meinen Downloads. Dies ist das SVG, das wir gerade exportiert haben. Und ich werde das mit Visual Studio Code öffnen. Wir können hier sehen, dass hier ziemlich viel Müll ist. Das ist ein riesiges SVG. Wäre es nicht toll, wenn es ein Tool gäbe, das die Größe des gerade exportierten SVGs reduzieren könnte . Wir können es also einfach oder einfacher in React verwenden. Zum Glück gibt es ein solches Tool für uns und das ist dieses SVG-OMG-Tool von Jake Archibald. Es wird auf einer seiner GitHub-Seiten gehostet. Also öffne ich das SVG, das wir gerade exportiert haben. Und jetzt ist das Coole an diesem Tool, dass wir mit einigen Einstellungen herumspielen und letztendlich die Größe unseres SVGs reduzieren können . der Regel sind es diese beiden, die am meisten Platz gespart haben, aber Sie müssen vorsichtig sein. Wenn ich anfange, die Genauigkeit zu niedrig zu reduzieren, kann es sein, dass Sie seltsame Kanten sehen und so weiter. Aber Sie können sehen, wenn Sie das tun, dass wir bereits auf 16 KB gesunken sind. Aber nur damit es nicht so grob wird, glaube ich, belasse ich die Zahlengenauigkeit bei eins. Und wir können ein bisschen mit der Transformationspräzision spielen . Ich scheine dort nichts zu bemerken. Sie können das Markup verschönern. Kann einen Mehrfachpass machen. Ich bin mir nicht sicher, was die Unterschiede sind, aber wir sparen ein bisschen. Also nehmen wir das. Und sofort können wir hier einfach auf Kopieren klicken, und dieses SVG wird in unsere Zwischenablage kopiert. Jetzt bin ich in der Code-Sandbox und wir werden eine Sandbox erstellen. Und reagieren Sie natürlich mit TypeScript. Und das erste, was wir hier tun werden, ist einen neuen Ordner namens Components zu erstellen . Und ich werde eine neue Komponente namens SVG erstellen , die eine TSX-Datei ist. Und es ist nur eine funktionale Komponente. Jetzt könnten wir versuchen, das SVG, das wir gerade kopiert haben, einfach einzufügen. Und wenn ich das bereinige, werden wir einige Probleme haben. Und im Wesentlichen besteht das Problem darin, dass SVG, da es sich um Original-XML handelt, nicht gerade bereit für JSX ist. Zum Glück gibt es ein anderes Tool, das wir dafür verwenden können. Und dieses Tool ist Magic Dot React js.net. Also können wir einfach unser SVG einfügen und der Generator generiert für uns eine gültige JSX-Syntax. Jetzt entscheidet es sich aus irgendeinem Grund immer eine Klassenkomponente zu erstellen. Aber natürlich benötigen wir nur den Aufschlag in der Retourenerklärung. Wenn ich also hier ganz nach unten scrolle, haben wir alles, was wir brauchen, und wir können zurück in unsere Sandbox gehen und es erneut versuchen. Jetzt sollten wir keine Syntaxwarnungen haben , wenn ich das Dokument formatiere. Perfekt, also werde ich diese SVG-Komponente des Shirts speichern und die App-Komponente hier bereinigen. Lassen Sie uns sagen, React plus SVG plus TypeScript entspricht Herz. Und ich werde meine SVG-Komponente hinzufügen . Ich importiere das von Gegnern, SVG. Das sieht also schon ziemlich gut aus. Und wie ich bereits erwähnt habe, würden wir einen benutzerdefinierten Hook verwenden , damit wir, wenn wir die Maus über den Bildschirm bewegen, diese Hintergrundfarbe ändern nur um es ein bisschen unterhaltsam zu machen. Und ich denke auch, was wirklich cool wäre wir diese beiden Farben ändern. Also müssen wir zuerst zu unserem SVG zurückkehren und herausfinden, welcher Pfad oder welche Pfade dazu beitragen. Und dann verwenden wir den Haken, um die Farbe entsprechend der Mausposition zu ändern . Also lass uns zuerst hier einsteigen. Und wenn wir uns den ersten aufgelisteten Pfad ansehen, haben wir diese Farbe. Okay, das ist die, diese hellbeige Farbe. Dann haben wir diese FC-Farbe. Bingo, wir haben unsere Farbe gefunden. Nun, wenn ich danach suche, ja, genau. Ich sollte es zweimal sehen. Und das ist die Farbe , die wir ändern wollen, wenn sich die Maus bewegt. Das erste, was ich tun werde, ist, anstatt das fest codiert als Zeichenfolge zu belassen, ich werde es in eine Variable ändern, die einfach Farbe heißt. Und natürlich wird uns die Code-Sandbox anschreien , weil wir das noch nicht definiert haben. Also hier oben sage ich Farbe. Und nennen wir diesen Hook , der noch definiert und noch implementiert werden muss. Nennen wir es so etwas wie Farbe auf der Maus verwenden. Beweg dich. Nun, um diesen Hook tatsächlich zu implementieren. Ich mag es, meinen Code zu organisieren. Normalerweise lege ich meine Hooks in einen separaten Hooks-Ordner. Wir können es denselben Namen nennen, Farbe bei der Mausbewegung verwenden und werden const exportieren, Farbe bei Mausbewegung verwenden. Und für den Moment kehren wir einfach rot zurück. Wir können bereits überprüfen, ob wir alle Punkte richtig verbunden haben. Also werde ich importieren, Farbe bei Mausbewegung von Hooks verwenden. Das ist wieder ein Ordner. Verwenden Sie Farbe bei der Mausbewegung. Nett. Wir sind also auf halbem Weg. Wir haben die richtige Farbe ausgewählt, die wir ändern möchten. Und jetzt ist es nur die eigentliche Animation, wenn wir die Maus bewegen, um diese Farbe zu ändern. Wir können also die Return-Typdefinition hinzufügen und dass wir immer möchten, dass eine Zeichenfolge von diesem Hook zurückgegeben wird. Und da sich die Farbe selbst bei der Mausbewegung ändert, verwenden wir natürlich die Farbe selbst bei der Mausbewegung ändert, Use State, um unsere Farbe zu definieren. Wir haben also eine konstante Farbe, festgelegte Farbe, und das ist der Zustand verwendet. Und ich werde hier weiterhin Rot als Anfangswert verwenden . Und das müssen wir aus React importieren. Ordnung, alles ist immer noch okay. Um nun wirklich anzufangen, der Mausbewegung zuzuhören , ist das ein Fenster. Event-Listener hinzufügen. Und das Ereignis ist eine Mausbewegung. Und ich werde eine Mausbewegungsfunktion definieren. In React ist es jetzt keine bewährte Methode, dies einfach offen zu definieren. Wir sollten ein Aufräumen und auch ein Unmount-Cleanup durchführen. Also werde ich das in einen Benutzereffekt-Hook einfügen , der sich auf Mount befindet. Mit einem leeren Abhängigkeitsarray. Ich würde diesen Event-Listener hinzufügen. Und die Cleanup-Funktion ist, wie wir wissen, wenn wir eine Funktion von US Effect zurückgeben. Und das wäre Window Dot, Event Listener entfernen. Jetzt glatt und mit der Maus bewegen. Lassen Sie uns nun diese Mausbewegungsfunktion definieren. Und wenn wir uns diesen Add Event Listener für die Mausbewegung ansehen, sehen wir, dass wir ein Mausereignis erhalten. Das würde also in dieser Funktion übergeben werden. Und da unser Bild einen großen Teil des Bildschirms einnimmt, halte ich es für nicht zu naiv, als erste Implementierung, die vollen Abmessungen des Bildschirms zu nehmen und dies auf einer Art Prozentsatz zu stützen von wo wir gerade mit unserer Maus sind. So ist z. B. der Prozentsatz x der Position unserer Maus der Kunde x geteilt durch die innere Breite des Bildschirms. Und das Gleiche für warum das Fenster. Und dann können wir vielleicht als durchschnittlichen Prozentsatz die 2% x plus y addieren, geteilt durch zwei. Jetzt haben wir eine Art von Prozent. Und was mir sofort in den Sinn kommt , ist , dass wir Farben irgendwie mischen können. Das Einfachste im Moment wären also vielleicht zwei Farben. Und mit diesem Geschenk haben Sie eine Art Mischung zwischen ihnen. Sie können versuchen, Ihre eigene Funktion zu schreiben , um dies mit zwei Farben zu tun. Aber was mich betrifft, werde ich eine sehr beliebte Abhängigkeit verwenden, um solche Dinge zu tun. Und es heißt Chromosomen AS. Und mit chroma js können wir Kromer aus einem JS importieren und mithilfe der Skalierungsfunktion von Chrome eine Skala definieren . Das ist also eine chromatische Skala. Und wir können eine oder mehrere Farben weitergeben. Im Moment denke ich, dass ich etwas tun werde. Versuchen wir es mit Rosa und Lila. Und ich werde auch diese ursprüngliche Farbe wieder in Rosa ändern , damit sie dem, was wir ursprünglich hatten, und dem Design näher kommt. Jetzt, wo sich diese Skala zwischen ihnen vermischt, mit einer Dezimalzahl, was genau das ist, was das ist, wird dies mit diesem Skalenobjekt enden. Es heißt einfach wie anrufen. Skala im Durchschnitt. Und dann ein Hex bekommen. Also nenne ich diese Farbe. Stellen Sie dann natürlich die Farbe auf den Status, wodurch dieser Hook ausgeführt wird, und geben Sie dann natürlich die neue Farbe zurück. Und das Letzte, was hier aufgeräumt werden muss, es sieht so aus, als ob sich die Code-Sandbox beschwert oder besser gesagt, TypeScript beschwert sich. Die Chroma JS-Typen können nicht gefunden werden. Fügen wir also auch die Typen für Chroma js hinzu. Jetzt können wir das bereinigen und lassen Sie uns die App aktualisieren. Sehen Sie sich unsere Handarbeit hier an. Sehr cool. wir also die Maus bewegen, wechselt sie von Rosa zu Lila. Und aufgrund dieses Algorithmus, wir hier festgelegt haben, ist die Summe von 0% natürlich, wenn sowohl x als auch y Null sind Dadurch kommst du Rosa so nahe wie möglich. Und wenn X und Y nahe an der inneren Höhe oder inneren Breite liegen, kommt dir das Violett am nächsten. Als letztes Sahnehäubchen wir zu unserem SVG zurück und korrigieren es. Es sieht so aus, als gäbe es einige kleine Grenzprobleme , die wir lösen könnten. Und wir können das einfach bereinigen, indem wir unserem schwarzen SVG hier eine kleine Strichbreite hinzufügen. Also mache ich das einfach. Dieser schwarze Pfad des SVG ist tatsächlich dieser mit dieser dunklen Farbe. Und so sehen wir, dass das erste, was tatsächlich fehlt , die Strichfarbe selbst ist, die in der SVG-Sprache einfach mit einem Strich bezeichnet wird. Und ich werde den Strich machen, natürlich in derselben Farbe. Die Füllung. Speichern Sie das und aktualisieren Sie es hier. Das mag etwas bewirkt haben, aber lassen Sie uns den Strich auf eins erhöhen und sehen, wie das aussieht. Laden Sie hier neu. Es ist fast gelöst. Wenn wir auf zwei steigen, wird das vielleicht endlich für uns erledigt. Sehr nett. Schau immer noch hier, lass uns sehen, wie es aussieht. Wenn wir bis zu vier ganz springen. In Ordnung, das ist ziemlich gut. Wir könnten zurück zu Inkscape gehen und diese beiden kleinen Hinweise hier korrigieren, aber ich bin ziemlich zufrieden damit, wie das herauskam. Nettes, lustiges kleines Projekt, das wir gemacht haben. Ich hoffe, du hast etwas darüber gelernt aus Bitmaps SVG werden und sauberere SVGs werden. Das hat mir wirklich Spaß gemacht. Und ja, lassen Sie mich wissen, wenn Sie weitere Informationen zu Tipps und Strategien zum Erstellen dieser benutzerdefinierten Hooks wünschen. Abgesehen davon freue ich mich sehr, wieder da zu sein und wir sehen uns beim nächsten Mal. Passt auf euch auf.