Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt

Wasserwelleneffekt

Wenn der Benutzer klickt, wird ein Welleneffekt mit der Mitte des Klicks als Mittelpunkt erzeugt. Es eignet sich für verschiedene Szenen, ist schön, ohne übertrieben zu sein, und der Schlüssel liegt darin, dass es dem Benutzer ein sehr intuitives Feedback geben kann.

Sehen wir uns die Umsetzung an

Zunächst basiert die Kapselung hier auf benutzerdefinierten Anweisungen von Vue3. Die benutzerdefinierten Anweisungen von Vue3 haben sich im Vergleich zu Vue2 nicht wesentlich geändert. Unser Ziel ist die Fertigstellung eines Basisprototyps des Wasserwellen-Befehls und dabei gehen wir Schritt für Schritt vor.

Passen Sie einen Wasserwellen-Standardstil an

Wasserwellen sind eigentlich ein Prozess, bei dem an der Stelle, auf die der Benutzer klickt, ein kleiner Kreis erzeugt wird, dessen Größe sich allmählich auf das gesamte angeklickte Element ausdehnt. Hier formulieren wir also zunächst einen grundlegenden Stil für Wasserwellen und richten Übergangsanimationen ein. Die Übergangsanimation sollte ein Prozess sein, der langsam beginnt und dann schneller wird. Hier verwenden wir die Anpassung der Bézierkurve

.meine-ripple {
  Position: absolut;
  oben: 0;
  links: 0;
  Z-Index: 100;
  Randradius: 50 %;
  Hintergrundfarbe: aktuelle Farbe;
  Deckkraft: 0;
  Übergang: Transformation 0,2 s kubisch-bézier (0,68, 0,01, 0,62, 0,6), Opazität 0,08 s linear;
  wird sich ändern: transformieren, Opazität;
  Zeigerereignisse: keine;
}

Berechnen Sie die Position und den Durchmesser von Wasserwellen

Wenn wir den Durchmesser der Wasserwelle, das (x, y) bei ihrer Entstehung und das (x, y) bei Ende der Übergangsanimation bestimmen, können wir den Übergang verwenden, um die Wasserwellenanimation zu rendern. Das (x, y) bei ihrer Entstehung ist die Position, auf die der Benutzer klickt, aber wie berechnen wir den Durchmesser der Wasserwelle und das (x, y) bei Ende der Übergangsanimation? Unsere Elemente sind alle Rechtecke. Egal, wo der Benutzer auf das Element klickt, der Kreis mit der Hypothenuse des Rechtecks ​​als Durchmesser kann das gesamte Element perfekt abdecken. Zur Berechnung der Hypothenuse verwenden wir Grundschulmathematikkenntnisse, um die Quadratwurzel der Summe der Quadrate beider Seiten zu finden. Das Folgende ist ein Wasserwellen-Ableitungsdiagramm am Ende der Übergangsanimation.

Erster Pfeil: Erwartete Wasserwelle Zweiter Pfeil: Erzeugte Wasserwelle am Element (0,0) Dritter Pfeil: Erzeugte Wasserwelle am Element (0,0) ohne abgerundete Ecken

Wir können feststellen, dass wir durch Versetzen der vom Element (0,0) erzeugten Wasserwelle die gewünschte Wasserwelle erhalten können, woraus wir schließen können, dass

Die Größe der Wasserwelle am Ende der Animation = Das (x,y) der Hypothenuse des Kreises, wenn sie erstellt wird = Die Position, an der der Benutzer klickt Das (x,y) am Ende der Übergangsanimation = Die am Element (0,0) erstellte Wasserwelle ist um x und y versetzt

Funktion computeRippleStyles(Element, Ereignis) {
  const { oben, links } = element.getBoundingClientRect()
  const { Clientbreite, Clienthöhe } = Element
  
  const radius = Math.sqrt(Clientbreite ** 2 + Clienthöhe ** 2) / 2
  Konstante Größe = Radius * 2
  
  const localX = event.clientX - links
  const localY = event.clientY - nach oben

  const centerX = (Clientbreite - Radius * 2) / 2
  const centerY = (Clienthöhe - Radius * 2) / 2

  const x = localX - Radius
  const y = localY - Radius

  return { x, y, MitteX, MitteY, Größe }
}

Erzeugen Sie Wasserwellen, wenn die Maus gedrückt wird

Dann müssen wir Wasserwellen erzeugen, wenn die Maus gedrückt wird, und auf das Mausklickereignis warten. Hier nehmen wir die PC-Seite als Beispiel. Wenn die Wasserwellen gerade erzeugt wurden, verwenden Sie Transform, um sie auf 0,3 zu verkleinern. Dies ist eine relativ geeignete Erstellungsgröße, die der Autor ausprobiert hat. Ändern Sie dann Transform, um die Übergangsanimation der Wasserwellendiffusion auszulösen. Hier wird auch ein Transparenzübergang hinzugefügt, um den Wasserwellenkräuseln mehr Struktur zu verleihen.

Funktion createRipple(Ereignis) {
  const container = dies
  const { x, y, MitteX, MitteY, Größe } = computeRippleStyles(Container, Ereignis)
  const ripple = document.createElement('div')
  ripple.classList.add('meine-ripple')
  ripple.style.opacity = `0`
  ripple.style.transform = `übersetzen(${x}px, ${y}px) scale3d(.3, .3, .3)`
  ripple.style.width = `${size}px`
  ripple.style.height = `${size}px`
  // Zeichnen Sie die Erstellungszeit der Wasserwelle auf. ripple.dataset.createdAt = String(performance.now())

  const { position } = window.getComputedStyle(container)
  container.style.overflow = "versteckt"
  Position === „statisch“ und (diese.Stil.Position = „relativ“)

  container.anhängenKind(ripple)

  fenster.setTimeout(() => {
    ripple.style.transform = `übersetzen(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
    ripple.style.opacity = `.25`
  })
}

const VRipple = {
  montiert(el) {
    el.addEventListener('mousedown', erstelleRipple)
  }
}

Zerstöre die Wasserwelle, wenn die Maus angehoben wird

Wenn Sie die Maus anheben, müssen Sie nur den generierten Wasserwellenknoten finden, um die Transparenz zu ändern, und dann den Wasserwellenknoten entfernen, nachdem die Animation zur Transparenzänderung beendet ist.

Funktion entferneRipple() {
  const container = dies
  const ripples = container.querySelectorAll('.meine-ripple')
  wenn (!Wellenlänge) {
    zurückkehren
  }

  const lastRipple = ripples[ripples.Länge - 1]
  // Berechnen Sie, wie lange die Ausführung der Diffusionsanimation basierend auf der Erstellungszeit der Wasserwelle dauert, um sicherzustellen, dass jede Wasserwelle die Diffusionsanimation abschließt. const delay = 300 - performance.now() + Number(lastRipple.dataset.createdAt)

  setzeTimeout(() => {
    lastRipple.style.opacity = `0`
    
    setTimeout(() => lastRipple.parentNode?.removeChild(lastRipple), 300)
  }, Verzögerung)
}

const VRipple = {
  montiert(el) {
    el.addEventListener('mousedown', erstelleRipple)
    document.addEventListener('mouseup', entferneRipple)
  },
  nicht montiert(el) {
    el.removeEventListener('mousedown', erstelleRipple)
    document.removeEventListener('mouseup', removeRipple)
  }
}

Erweitern Sie Ihre Wasserwellenoptionen mit der Befehlsbindung

Du kannst deine Anleitung durch Bindungen auch erweitern, zum Beispiel Möglichkeiten zur Farbänderung, Statusdeaktivierung etc. vorsehen, worauf ich hier aber nicht näher eingehe. Werfen wir einen Blick auf die Ergebnisse.

Abschließende Gedanken

Bisher haben wir einen einfachen Ripple-Befehl implementiert. In unserer Komponentenbibliothek gibt es einen solchen Befehl auch, Sie können also für eine vollständigere Version unseren Quellcode aufrufen. Zunächst möchte ich der Nuggets-Community danken. Einige Freunde haben bereits begonnen, einige Codes per PR an unser Lager zu senden. Wir freuen uns auch sehr, so etwas mit den Freunden in der Community zu tun. Darüber hinaus hat unser Komponentenbibliotheksteam Enthusiasten angeworben, die sich an der Mitwirkung beteiligen. Interessierte Freunde sind herzlich eingeladen, an der Diskussion teilzunehmen. Um teilzunehmen, gehen Sie direkt zum Lager, um ein Problem zu melden und eine E-Mail zu hinterlassen. Wir werden uns so schnell wie möglich darum kümmern. Unabhängig davon, ob Sie interessiert sind oder nicht, hoffe ich, dass Sie uns einen Stern geben und uns Aufmerksamkeit schenken können. Die Unterstützung und das Interesse der Community-Partner sind unsere größte Motivation.

Lageradresse Dokumentadresse

Oben sind die Details der Klick-Feedback-Anweisung von Vue, um den Wasserwelleneffekt zu erzielen. Weitere Informationen zur Klick-Feedback-Anweisung von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!