Als ich das Material Design zum ersten Mal traf, war ich beeindruckt vom Designkonzept seiner Knopfkomponenten. Es verwendet geschickt den Ripple -Effekt, um den Benutzern auf einfache und elegante Weise Feedback zu geben.

Wie wird dieser Effekt erzielt? Die Schaltfl?chen des Materialdesigns sind nicht nur einfache Wellenanimationen, sondern die Position der Animation variiert auch je nach Position des Klickens der Schaltfl?che.

Wir k?nnen den gleichen Effekt durch Code erzielen. Zuerst werden wir ES6 JavaScript verwenden, um eine saubere L?sung bereitzustellen und dann einige Alternativen zu erkunden.

HTML -Struktur

Unser Ziel ist es, unn?tige HTML -Tags zu vermeiden, sodass wir den kleinsten Code verwenden:

 <button>Erfahren Sie mehr</button>

Knopfstil

Mit JavaScript müssen wir einige Stile des Ripples -Elements dynamisch festlegen, aber alle anderen Stile k?nnen in CSS durchgeführt werden. Für unseren Knopf müssen nur zwei Eigenschaften einbezogen werden.

 Taste {
  Position: Relativ;
  überlauf: versteckt;
}

Verwenden von position: relative erm?glicht es uns, position: absolute für Wellenelemente, was für uns erforderlich ist, um seine Position zu steuern. In der Zwischenzeit verhindern overflow: hidden verhindert, dass Wellen die Kante des Knopfes überschreiten. Alle anderen Eigenschaften sind optional. Aber jetzt sehen unsere Kn?pfe ein wenig veraltet aus. Hier ist ein modernerer Ausgangspunkt:

 /* Roboto ist die Standardschrift für Material*/
@import url ('https://fonts.googleapis.com/css2?family=roboto&display=swap');

Taste {
  Position: Relativ;
  überlauf: versteckt;
  übergang: Hintergrund 400 ms;
  Farbe: #ffff;
  Hintergrundfarbe: #6200ee;
  Polsterung: 1Rem 2Rem;
  Schriftfamilie: 'Roboto', sans-serif;
  Schriftgr??e: 1,5Rem;
  Umriss: 0;
  Grenze: 0;
  Grenzradius: 0,25Rem;
  Box-Shadow: 0 0 0,5Rem RGBA (0, 0, 0, 0,3);
  Cursor: Zeiger;
}

Wellenstil

Sp?ter werden wir JavaScript verwenden, um Wellen als .ripple zu verwenden<span></span> Elemente werden in unsere HTML injiziert. Bevor wir jedoch zu JavaScript wechseln, definieren wir den Stil dieser Wellen in CSS, damit wir jederzeit verwenden k?nnen:

 span.ripple {
  Position: absolut; /* Wir haben oben die absolute Positionierung erw?hnt*//
  Grenzradius: 50%;
  Transformation: Skala (0);
  Animation: Ripple 600 ms linear;
  Hintergrundfarbe: RGBA (255, 255, 255, 0,7);
}

Um unsere Wellen rund zu machen, setzen wir border-radius auf 50%. Um sicherzustellen, dass alle Wellen von Grund auf neu erscheinen, setzen wir die Standardskala auf 0. Jetzt k?nnen wir noch nichts sehen, da wir Werte für die Eigenschaften top , left , width oder height nicht festlegen. Wir werden diese Eigenschaften bald mit JavaScript injizieren.

Was unsere CSS betrifft, ist das Letzte, was wir hinzufügen müssen, der Endzustand der Animation:

 @keyframes ripple {
  Zu {
    Transformation: Skala (4);
    Deckkraft: 0;
  }
}

Bitte beachten Sie, dass wir from Schlüsselwort nicht verwenden, um den Startzustand in keyframes zu definieren. Wir k?nnen from und CSS den fehlenden Wert basierend auf dem auf das Animationselement angewendeten Wert erstellen. Dies geschieht, wenn die relevanten Werte explizit deklariert werden (z. B. transform: scale(0) ) oder Standardwerte (z. B. opacity: 1 ).

JavaScript -Implementierung

Schlie?lich brauchen wir JavaScript, um die Position und Gr??e der Wellen dynamisch festzulegen. Die Gr??e sollte auf der Gr??e der Taste basieren, und die Position sollte auf der Position der Taste und des Cursors basieren.

Wir beginnen mit einer leeren Funktion, die das Klickereignis als Argument nimmt:

 Funktion CreateRipple (Event) {
  //
}

Wir werden auf unsere Schaltfl?che zugreifen, indem wir nach currentTarget des Ereignisses suchen.

 const button = event.currentTarget;

Als n?chstes werden wir unsere instanziieren<span></span> Elemente und berechnen Sie seinen Durchmesser und seinen Radius basierend auf der Breite und H?he des Knopfes.

 const Circle = document.createelement ("span");
const diameter = math.max (button.clientwidth, button.clientHeight);
const radius = Durchmesser / 2;

Wir k?nnen nun die verbleibenden Eigenschaften definieren, die von den Wellen ben?tigt werden: left , top , width und height .

 Circle.Style.Width = Circle.Style.Height = `$ {Durchmesser} px`;
Circle.Style.Left = `$ {event.clientX - (button.offsetleft radius)} px`;
Circle.Style.top = `$ {event.clienty - (button.offsettop radius)} px`;
Circle.ClassList.Add ("Ripple");

In<span></span> Bevor Sie dem DOM ein Element hinzufügen, überprüfen Sie am besten, ob verbleibende Wellen vorhanden sind, die m?glicherweise aus dem vorherigen Klick stammen, und l?schen Sie sie, bevor Sie die n?chsten Wellen ausführen.

 const ripple = button.getElements byclassName ("ripple") [0];

if (ripple) {
  ripple.remove ();
}

Im letzten Schritt werden wir<span></span> Fügen Sie das Schaltfl?chenelement als untergeordnetes Element so an, dass es in die Innere der Taste injiziert wird.

 Button.AppendChild (Kreis);

Nachdem unsere Funktion beendet ist, bleibt alles, was bleibt, es zu nennen. Dies kann auf verschiedene Arten erfolgen. Wenn wir jeder Schaltfl?che auf der Seite Wellen hinzufügen m?chten, k?nnen wir einen solchen Code verwenden:

 const buttons = document.getElementsByTagName ("button");
für (const Taste der Schaltfl?chen) {
  Button.AdDeVentListener ("Click", Createripple);
}

Jetzt haben wir den Welligkeitseffekt der Arbeit!

Erweiterte Funktionen

Was ist, wenn wir noch einen Schritt weiter gehen m?chten und diesen Effekt mit anderen ?nderungen der Knopfposition oder -gr??e kombinieren m?chten? Schlie?lich ist die Anpassung einer der Hauptvorteile der Entscheidung, die Auswirkungen selbst wiederherzustellen. Um die Erleichterung der Verl?ngerungsfunktion zu testen, habe ich beschlossen, einen "Magnet" -Effekt hinzuzufügen, der unsere Taste zum Cursor bewegt, wenn er sich in einem bestimmten Bereich befindet.

Wir müssen uns auf einige der gleichen Variablen verlassen, die in der Ripple -Funktion definiert sind. Um eine unn?tige Doppelarbeit von Code zu vermeiden, sollten wir sie irgendwo speichern, damit beide Methoden darauf zugreifen k?nnen. Wir sollten aber auch den Umfang gemeinsamer Variablen auf jeden einzelnen Taste einschr?nken. Eine M?glichkeit, dies zu erreichen, besteht darin, eine Klasse zu verwenden, wie im folgenden Beispiel gezeigt:

Da der Magnet -Effekt jedes Mal, wenn sich der Cursor bewegt, den Cursor verfolgt, müssen wir die Cursorposition nicht mehr berechnen, um Wellen zu erstellen. Stattdessen k?nnen wir uns auf cursorX und cursorY verlassen.

Zwei wichtige neue Variablen sind magneticPullX und magneticPullY . Sie steuern die Intensit?t unserer Magnetmethode, die den Knopf hinter dem Cursor zieht. Wenn wir also die Mitte der Wellen definieren, müssen wir die Position (x und y) und den Magnetismus der neuen Taste einstellen.

 const offsetleft = this.left this.x * this.magneticpullx;
const offsettop = this.top this.y * this.magneticpully;

Um diese Kombinationseffekte auf alle Schaltfl?chen anzuwenden, müssen wir für jede Taste eine neue Klasseninstanz instanziieren:

 const buttons = document.getElementsByTagName ("button");
für (const Taste der Schaltfl?chen) {
  neue Schaltfl?che (Schaltfl?che);
}

Andere Technologien

Dies ist natürlich nur eine M?glichkeit, den Welligkeitseffekt zu erzielen. Auf CodePen gibt es viele Beispiele, die unterschiedliche Implementierungen zeigen. Hier sind einige meiner Lieblingsbeispiele.

Reine CSS -Implementierung

Wenn der Benutzer JavaScript deaktiviert, hat unser Ripple -Effekt keine Sicherungsl?sung. Nur mit CSS mit der :active Pseudo-Klasse, um auf Klicks zu reagieren, k?nnen Sie sich dem ursprünglichen Effekt n?hern. Die Hauptbeschr?nkung besteht darin, dass Wellen nur aus einem Punkt - normalerweise der Mitte der Schaltfl?che - und nicht als Antwort auf unsere Klickposition erscheinen k?nnen. Dieses Beispiel von Ben Szabo ist besonders pr?gnant:

JavaScript vor ES6

Die Demo von Leandro Parice ?hnelt unserer Implementierung, ist jedoch mit früheren Versionen von JavaScript kompatibel:

JQuery

In diesem Beispiel wird JQuery verwendet, um einen Ripple -Effekt zu erzielen. Wenn Sie JQuery bereits als Abh?ngigkeit haben, k?nnen Sie einige Codezeilen speichern.

Reagieren

Schlie?lich gibt es ein weiteres Beispiel von mir. W?hrend Reacts Merkmale wie Zustand und Schiedsrichter verwendet werden k?nnen, um Ripple -Effekte zu erzielen, ist dies nicht unbedingt erforderlich. Die Position und Gr??e der Wellen muss für jeden Klick berechnet werden, sodass es keinen Vorteil hat, diese Informationen im Zustand zu halten. Darüber hinaus k?nnen wir über das Klickereignis auf das Schaltfl?chenelement zugreifen, sodass wir auch keine Schiedsrichter ben?tigen.

In diesem React -Beispiel wird dieselbe createRipple -Funktion verwendet wie die erste Implementierung in diesem Artikel. Der Hauptunterschied besteht darin, dass unsere Funktion als Methode der Button zu dieser Komponente skopiert wird. Darüber hinaus ist der onClick Event -Listener jetzt Teil unseres JSX:

Diese Antwort beh?lt die ursprüngliche Bildformatierung bei und vermeidet es, die Kernbedeutung des Textes zu ver?ndern und gleichzeitig Phrasen und S?tze für einen natürlicheren Fluss und eine verbesserte Lesbarkeit zu belohnen. Es verwendet auch den beschreibenden Alt -Text für die Bilder.

Das obige ist der detaillierte Inhalt vonWie man den Welligkeitseffekt von Materialdesign -Tasten nachbildert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!