15-Minuten-Ripple-Effekt Button in React

1. Willkommen und Kursübersicht: Willkommen zu diesem Kurs. In nur 15 Minuten lernen Sie, wie Sie mit React eine fantastische Abstoßanimation auf einer Schaltfläche erstellen React eine fantastische Abstoßanimation auf einer Schaltfläche erstellen Hier sind zwei Ansätze, die Sie erwarten können. Wir werden zunächst kurz eine Basisversion überprüfen , die die Kernidee zeigt. Wenn Sie auf die Schaltfläche klicken, erscheint ein Abweisungszeichen. Dann werden wir uns mit einer erweiterten Version befassen, die den Effekt mithilfe moderner Reaktionstechniken und bewährter Methoden verfeinert den Effekt mithilfe moderner Reaktionstechniken und bewährter Projektbasiertes Lernen. Es geht nicht um lange Vorlesungen. Sie gelangen direkt zum Code wobei jeder Schritt klar erklärt wird, sodass Sie ihn sofort anwenden können. Der erste besteht aus dem Unterrichten. Ich fasse die Dinge kurz und energisch, damit Sie keine Zeit verschwenden. Sie werden praktische Fähigkeiten erwerben , die Sie für Ihre eigenen Projekte einsetzen können. Am Ende werden Sie eine übersichtliche interaktive Schaltfläche und ein tieferes Verständnis von React-Animationen haben eine übersichtliche interaktive Schaltfläche und ein tieferes Verständnis , was Ihr Toolkit für die Webentwicklung erweitern wird Ihr Toolkit für die Webentwicklung erweitern Lassen Sie uns einsteigen und etwas Fantastisches kreieren. 2. Setup: React-App erstellen: Beginnen Sie mit einem leeren Projektordner und verwenden Sie VS Code, einen leistungsstarken und benutzerfreundlichen Code-Editor. Öffnen Sie zunächst das atlratd-Terminal im VS-Code. Jetzt erstellen wir unsere React-App mit dem Photon-Befehl. Px, erstelle React App Dot. Der Punkt am Ende weist PX an, die React-App im koreanischen Verzeichnis zu erstellen die React-App im , anstatt einen neuen Ordner zu erstellen. Drücken Sie die Eingabetaste und warten Sie, bis die Installation abgeschlossen ist. Dieser Prozess wird alles einrichten, was wir brauchen, um mit dem Codieren und Reagieren zu beginnen. Okay, sobald die Einrichtung abgeschlossen ist, löschen wir das Terminal Schauen wir uns nun unsere Projektstruktur an. Im Datei-Explorer sehen Sie mehrere Dateien und Ordner. Das vorerst wichtigste ist App Dots. Hier spielt sich die Hauptlogik unserer App ab. Führen Sie NPM start aus, um eine Vorschau unseres Projekts im Browser anzuzeigen. Dadurch wird ein neues Browserfenster geöffnet Standard-Willkommensseite von React angezeigt Lassen Sie uns unser Projekt organisieren, indem wir eine separate Komponente für unsere Schaltfläche erstellen. im SFC-Ordner Erstellen Sie im SFC-Ordner einen neuen Ordner namens Components Sie dann in diesem Ordner Erstellen Sie dann in diesem Ordner eine neue Datei und rufen Sie den Button Dot GSX auf Dies wird unsere benutzerdefinierte Schaltflächenkomponente sein, und in der nächsten Lektion werden wir damit beginnen, sie Schritt für Schritt zu erstellen 3. Vorbereiten der Schaltflächenkomponente: Richtig, das ist unser Projekt , an dem wir arbeiten können. Ich habe hier eine CSS-Datei hinzugefügt und sie Cool Button to CSS genannt. Es enthält die CSS-Stile für unsere coole Button-Komponente. Sie finden diese Datei im Abschnitt „Ressourcen“ mit Kommentaren zu den Funktionen ihrer CSS-Eigenschaft. Jetzt fangen wir an, unsere coole Button-Komponente zu codieren. Importieren Sie zuerst React aus dem Act und dann importieren wir unsere Styles aus dem CSS-Modul Cool Button. Erstellen Sie eine Funktionsschaltfläche mit einem großen C und verwenden Sie eine Pfeilfunktion. Funktion gibt einen GSX-Code zurück , der ein Button-Element mit dem Text sein wird , der ein Button-Element mit dem Text sein Klicken Sie auf M. Wir geben unserer Schaltfläche den Klassennamen Cool dash button , den Sie in der CSS-Datei der Studie finden. Das wird unserer Schaltfläche einen coolen und interaktiven Stil verleihen einen coolen und interaktiven Stil Schreiben Sie nun am Ende der Datei den Standard-Cool-Button Exportieren Dadurch wird die Cool-Button-Komponente während unseres gesamten Projekts wiederverwendbar. unsere Komponente zu rendern, müssen wir sie in der Abdo GS-Datei in diesem Dev-Element verwenden in diesem Dev-Element Stellen Sie sicher, dass Sie es so importiert haben. Außerdem müssen wir die App-Klasse für dieses Dev-Element bearbeiten , um den Cool-Button in der Mitte der Seite zu platzieren . Sie also in der Abdo-CSS-Datei und in der APCSS-Klasse diese CSS-Eigenschaften hinzu, und sie sollten die Arbeit erledigen Lassen Sie uns diese App ausführen und das Ergebnis sehen und das Terminal bei einem NPM-Start Wenn der lokale House-Server gestartet wird, wird die App im Browser gerendert und Sie sehen unseren coolen Button in der Mitte der Seite Es hat einen coolen Hover-Effekt und einen Klick-Effekt mit einem schönen Hintergrund mit Farbverlauf und einem schönen Schatten, der der Schaltfläche ein wenig Tiefe verleiht der der Schaltfläche ein wenig Tiefe Sie können die CSS-Datei im Abschnitt Ressourcen überprüfen , wo Sie Kommentare dazu finden , was CSS-Klasse und -Eigenschaft bewirken Das war's für diese Lektion. Das ist nur die Vorbereitung für das Projekt, und in den nächsten paar Lektionen werden wir uns den interessanten Dingen befassen. Also lass uns gehen. 4. Ansatz für Anfänger: grundlegender Ripple-Animationseffekt: Okay, hier haben wir unseren Button aus der vorherigen Lektion gelassen Button aus der vorherigen Lektion Es sieht gut aus, aber wir wollen es cooler machen , indem wir einen Ripple-Click-Effekt hinzufügen Zunächst beginnen wir mit der grundlegenden, nicht so fortgeschrittenen Methode Erzeugung des Klick-Effekts In der nächsten Lektion werde ich Ihnen dann zeigen, wie Sie diese Art von Effekten richtig ausführen können. die grundlegende und die fortgeschrittene Vorgehensweise kennen , werden Sie starke Fähigkeiten zur Problemlösung entwickeln, und das ist das ultimative Ziel dieses Kurses. Lass uns anfangen. Erstellen Sie zunächst innerhalb der Schaltfläche ein Span-Element direkt unter dem Click-Me-Text. Dies wirkt wie unser Welleneffekt , wenn auf die Schaltfläche geklickt wird Geben Sie der Span den Klassennamen Ripple. Diese Klasse ist in der Cool Button Dot CSS-Datei definiert der Cool Button Dot CSS-Datei In den Ressourcen finden Sie detaillierte Informationen zum CSS-Code. Gehen Sie zurück zum Ripple und fügen Sie ein Style-Attribut hinzu. In diesem Thema werden wir einige Eigenschaften hinzufügen, um die Position und Größe der Welligkeit zu steuern die Position und Größe der Welligkeit Setzen Sie links auf Null, oben auf Null, Breite auf 100% und hoch auf 100% Jetzt können Sie jedes Mal, wenn Sie die Seite ausrollen , den Welleneffekt unten sehen Das liegt daran, dass jedes Mal, wenn das Tempo geladen wird, das Ripple-Element auch mit den CSS-Stilen geladen wird, und wenn die CSS-Stile geladen werden, wird jede Animation, die wir haben wird jede Animation, die wir haben, automatisch ausgelöst Und das ist bei unserer Ripple-Animation genau hier der Fall. Wir wollen, dass der Effekt bei jedem Klickereignis ausgelöst wird der Effekt bei jedem Klickereignis dem Button-Element also ein OnClick-Attribut Fügen Sie dem Button-Element also ein OnClick-Attribut und setzen Sie es so, dass es dem Handle-Klick entspricht Erstellen Sie hier eine Handle-Click-Funktion. Klicken Sie, wir lösen die Wellenanimation indem wir die Spanne hinzufügen und dann entfernen. Dies ist eine einfache Möglichkeit, eine Animation auszuführen Dafür verwenden wir einen Reaktionszustand, der animate auf true gesetzt hat. Natürlich müssen wir den Status hier definieren, und wir werden den Use-State-Hug verwenden und den Anfangsstatus auf False setzen und den Status auf React portieren Jetzt verwenden wir den Animate-Status, um die Spanne zu rendern, die Span in zwei reine Basen und fügen die Animate-State-Variable Dadurch wird festgestellt, dass „React I animate“ wahr ist, und dann wird die Spanne gerendert Wenn es falsch ist, rendern Sie den Bereich nicht. Speichern Sie jetzt den Code und lassen Sie uns testen. Klicken Sie auf die Schaltfläche und die Pul-Animation wird ausgelöst. Wenn Sie jedoch erneut klicken, passiert nichts, da wir den Animationsstatus nicht wieder auf Kraft zurückgesetzt Um diesen Umschaltmechanismus zu nutzen, stellen wir die Funktion zum Klicken auf den Griff ein und fügen dieses festgelegte Timeout hinzu, das auf 600 Millisekunden wartet. Dies ist der Animationszeitraum , der in der CSS-Klasse po definiert ist definiert Nach 600 Millisekunden wird der Callback ausgelöst und wir rufen die Funktion set animate auf, wodurch der Animate-Status wieder auf Force zurückgesetzt wird . Sie können mehrmals auf die Schaltfläche klicken, und der Welleneffekt wird jedes Mal ausgeführt Aber wie Sie sehen können, sieht die Animation nicht gut aus, besonders wenn ich sehr schnell klicke Darüber hinaus möchten wir, dass die Wellen an der Position beginnen, an der wir mit dem Mauszeiger auf die Schaltfläche geklickt haben wir mit dem Mauszeiger auf die Schaltfläche Mit einer fortgeschritteneren Code-Implementierung können wir das besser machen einer fortgeschritteneren Code-Implementierung In der nächsten Lektion werden wir dafür sorgen, dass diese Animation flüssiger und unterhaltsamer ist, besonders wenn sie Ihrer Cursorposition folgt 5. Fortgeschrittener-Ansatz: Profi-Ripple-Animationstechniken: Der Abseilanimationseffekt funktioniert, aber nicht ganz gut. Er sieht nicht gut aus Es wirkt komisch und es ist überhaupt nicht glatt. Das liegt an unserer schlechten Code-Implementierung. In dieser Lektion werden wir das Problem beheben. Glauben Sie mir, es wird super einfach sein und Spaß machen. Lassen Sie uns zunächst den Code in der Handle-Click-Funktion entfernen . Entferne den Animationsstatus von hier und auch hier drüben. Lassen Sie uns unseren Click-Handler in Use-Callback-React-Hook integrieren, um die Leistung zu optimieren und unnötige Renderings zu verhindern Fügen Sie am Ende so ein Interray hinzu, das sicherstellt, dass die Funktion nur einmal erstellt wird Stellen Sie sicher, dass Sie den US-Callback-Hook von React importieren. Jetzt wird sich die Gesamtidee Wellen zu erzeugen, ändern Wir werden ein Array verwenden, um mehrere Ripple-Fakten zu verfolgen. Jedes Mal, wenn auf die Schaltfläche geklickt wird, fügen wir dem Array ein neues Ripple-Objekt hinzu, das seine Position speichert und die Animation auslöst Nach einer kurzen Verzögerung werden wir diese Welligkeit aus dem Array entfernen , um alles sauber zu halten Auf diese Weise können mehrere Wellen beim Klicken auf die Schaltfläche reibungslos erscheinen und wieder verschwinden Fügen wir einen neuen Status hinzu, um die Wellen zu speichern , nennen wir es Wellen, Klicken Sie im Griff auf die Funktion Set Ripples. Nimm die vorherigen Wellen und gib in einem Coback ein neues Array mit den alten Wellen und einem neuen zurück ein neues Array mit den alten Wellen und Vorerst wird es eine neue Welle sein. Hier unten werden wir das Ripple-Array verwenden, um anhand der Array-Länge zu bestimmen , wie viele Wellen wir rendern müssen rendern Bei Ripples Punktmap mit dem Cobac , der seine Welligkeit annimmt, und dem Schlüsselargument, das standardmäßig mit React erzeugt wird Nimm nun das Ripple-Span-Element, schneide es aus und platziere es wie folgt innerhalb des Cobac zwischen zwei Klammern. Fügen Sie ein Schlüsselattribut hinzu und setzen Sie es dem Schlüsselargument gleich. Speichern Sie den Code und lassen Sie uns das Ergebnis testen. Die Animation funktioniert immer noch, und hier ist der Moment der Wahrheit. Wenn ich sehr schnell klicke, werden die Wellen nacheinander gleichmäßig erzeugt. Aber wir haben immer noch das Problem. Lassen Sie uns den Quellcode der Seite überprüfen. Und in unserem Button-Element können wir eine Katastrophe sehen. Das Ripple Span-Element wird in der Kuppel mehrfach wiedergegeben Dies wird sich definitiv auf die Leistung auswirken. Wir wollen die Welligkeit nach kurzer Zeit entfernen und unsere Kuppel sauber halten Sie in der Handle-Click-Funktion Fügen Sie in der Handle-Click-Funktion ein festgelegtes Timeout mit einem Stellen Sie die Timeout-Dauer auf 600 Millisekunden ein. Dies ist die Animationsdauer, die in der Po-CSS-Klasse für die hier definierte Po-Animation Po-CSS-Klasse für die hier definierte Po-Animation Rufen Sie nach 600 Millisekunden set ripples auf. Nehmen Sie das vorherige Array und geben vorherigen Punktfilter mit einem Callback zurück, der seine Welligkeit herausnimmt und Wellen herausfiltert oder entfernt, deren Schlüssel nicht dem U-Ripple-Punkt-Schlüssel und Wellen herausfiltert oder entfernt, deren Schlüssel nicht U-Ripple-Punkt-Schlüssel Wir wollen also nur New Ripple behalten und den Rest entfernen. Die neue Welle existiert noch nicht, also definieren wir sie gleich hier. Es wird eine Konstante und ein Objekt sein. Dieses Objekt wird seine Welligkeit repräsentieren, und seine Welligkeit wird diese Stileigenschaften haben Also werden wir etwas definieren dem in diesem Objekt sehr ähnlich ist Fügen Sie eine X-Eigenschaft mit dem Wert Null, eine Y-Eigenschaft mit dem Wert Null und einer Größe von 100% hinzu. X- und Y-Eigenschaften behalten die Position des Cursors bei, wenn wir auf die Unterseite klicken, und die Größeneigenschaft sorgt dafür, dass die Abweisung die gesamte Schaltfläche abdeckt Wir werden uns in einer Weile darum kümmern, aber vorerst behalten wir diese Werte Und schließlich werden wir eine Schlüsseleigenschaft haben, weil wir sie hier verwenden und es ist immer am besten, unsere eigenen Schlüssel zu erstellen , anstatt uns darauf zu verlassen, dass React das tut. Setzen Sie den Wert also jetzt auf den Punkt date. Ersetzen Sie diese neue Abstoßzeichenfolge durch eine neue Abstoßen-Javascript-Konstante Verwenden wir für das Schlüsselattribut den Ripple Dot Key. Sagen wir das und die Animation funktioniert immer noch. Und vor allem, wenn wir das innerhalb des Button-Elements überprüfen, müssen wir die Anwendung neu laden , damit wir von vorne beginnen können Wenn ich jetzt auf die Schaltfläche klicke, wirst du feststellen, dass das Ripple-Span-Element erscheint und nach 600 Millisekunden verschwindet es wieder Jetzt fehlt uns immer noch etwas. Wir wollen die Position und Größe der Wellen programmgesteuert steuern und Größe der Wellen programmgesteuert Wir müssen also die Eigenschaften des Ripple-Objekts verwenden, um die Wellenspanne zu gestalten Lassen Sie uns dies durch den Wellenpunkt X ersetzen Setzen Sie oben den Wellenpunkt auf Y und verwenden Sie für die Breite und Höhe die Wellenpunktgröße verwenden Sie für die Breite und Höhe die Diese Eigenschaften haben immer noch keinen Einfluss auf die Wellen Wir werden ihre Werte anhand der Button-Referenzen definieren anhand der Button-Referenzen Definieren Sie hier eine Button-Ref-Konstante. Wir werden den Use Rf React-Hook verwenden und seinen Anfangswert auf Null setzen. Stellen Sie sicher, dass Sie den Use Rf-Hook von React angeben. Mit diesem Hook können wir die Position des Cursors auf der Schaltfläche definieren und die Größe der Welligkeit bestimmen Ordnung, fügen Sie nun das ref-Attribut zum Button-Element hinzu und setzen Sie seinen Wert auf Button-Ref Auf diese Weise enthält die Button-Ref-Konstante die Referenz der Schaltfläche in der Puppe. Definieren Sie mit der Funktion zum Klicken auf den Griff eine Konstante. Rect ist die Abkürzung für Rechteck , weil es die rechteckige Form der Schaltfläche und ihre Position auf dem Bildschirm darstellt die rechteckige Form der Schaltfläche . Setzt den Wert auf die Schaltfläche Rf, Punkt, der aktuelle Punkt erhält den Begrenzungsclient Rt , eine Funktion , die Sie aufrufen müssen Lassen Sie uns die Rat-Variable in der Konsole protokollieren und sehen, was sie uns gibt Wenn ich klicke, erhalte ich diese Ausgabe auf der Konsole. Get Bounding Client Track gibt uns diese Informationen über die Schaltfläche, anhand derer wir die Position und Größe der Schaltflächen berechnen werden Position und Größe der Schaltflächen Entferne das Konsolenprotokoll, füge eine Größenkonstante berechne die Größe mit der mathematischen Punktmax-Funktion, die uns das Maximum aus zwei gegebenen Zahlen gibt, wobei die G-Punktbreite und die G-Punkthöhe übergeben Dadurch wird die Po-Größe auf die größere Dimension der Breite oder Höhe der Schaltfläche festgelegt die größere Dimension der Breite oder Höhe der Schaltfläche , sodass der Effekt die Schaltfläche bei der Animation vollständig abdeckt Lassen Sie uns nun die X-Koordinate des Cursors berechnen , wenn wir auf die Schaltfläche klicken Wir müssen also auf das Klickereignis zugreifen. Reaktion übergeben wir das Klickereignis standardmäßig als Argument an die Funktion. Wir werden es E nennen, kurz für Event. Aus dem Klick-Event nehmen wir die X-Koordinate der Klicks und den Punkt E des Clients X, subtrahieren die linke Position der Schaltflächen, rechten Punkt links und passen sie um die Hälfte der Po-Größe Also Größe geteilt durch zwei zur Mitte. Dadurch wird die X-Position der Wellen innerhalb der Schaltfläche berechnet. Definieren Sie als Nächstes die Y-Konstante. Wir nehmen die Y-Koordinate der Klicks, E, Kunde Y, subtrahieren die obere Position und den oberen Punkt der Schaltfläche und passen sie um die Hälfte der Wellengröße an, sodass wir sie zentrieren Also Größe geteilt durch zwei. Dadurch wird die Y-Position der Wellen innerhalb der Schaltfläche berechnet. Jetzt werden wir diese Berechnungen innerhalb des neuen Ripple-Objekts verwenden , um unsere Welligkeit zu formen Für diese Größe beziehen wir uns also auf die berechnete Größe. Für die Y-Eigenschaft beziehen wir uns auf die Y-Koordinate des Cursors und dasselbe für die X-Koordinate. Und das ist das letzte Stück , um diesen Zauberspruch zu erschaffen. Speichern wir das und schauen uns die Ergebnisse an. Schließe dieses Fenster, und wenn ich klicke, beginnen die Wellen mit der Genauigkeit des Y-Cursors zu animieren , und die Größe der Welle bedeckt die Wir sind von der einfachen Implementierung zur fortgeschrittenen Implementierung dieses Button-Animationseffekts übergegangen , und Sie haben eine neue Fähigkeit und eine neue Sichtweise darüber erlernt , wie Dinge aufgebaut sein und reagieren sollten Diesen Kurs zu beenden ist wirklich eine große Leistung. Es zeigt, dass Sie den Funken haben, der Sie motiviert, Zeit und Mühe zu investieren , um neue Dinge zu lernen Und das, mein Freund, ist das Wichtigste in jeder erfolgreichen Geschichte Ich lasse dich hier stehen, aber du kannst mir gerne folgen und dein Projekt im Projektportfolio auf Skill Share einreichen , damit du Feedback bekommst und vielleicht versuchen kannst, deine eigene Logik oder Animation zu entwickeln deine eigene Logik oder Animation und sie mit anderen Lernenden und mit mir zu teilen Ich würde mich freuen, deine Kreationen zu sehen.