• Haupt / Wie Man

Verwendung von React Spring zum Animieren von Komponenten

React Spring kann Ihnen bei Animationen helfen, deren Implementierung im Web bekanntermaßen schwierig ist. CSS-Animationen sind die beste Wahl, aber um ein reibungsloses Ergebnis zu erzielen, müssen Klassen, Dauer und Ereignisse sorgfältig miteinander in Einklang gebracht werden. Werfen a JavaScript-Framework wie Reagieren in die Mischung erschwert die Sache nur noch weiter.

Bei Animationen, die auf Benutzerinteraktion beruhen, können Werte über JavaScript berechnet und direkt auf ein Element angewendet werden. Bei diesem manuellen Ansatz müssten wir unsere eigene Beschleunigung berechnen und anwenden, damit die Animation natürlicher aussieht.

Reagiere auf den Frühling ist eine Bibliothek, die für viele gängige Probleme bei der Animation im Web ausgelegt ist. Es verfolgt einen etwas anderen Ansatz, indem es sich auf die Physik über gerade Zeiträume und definierte Lockerungsfunktionen konzentriert. Dies trägt dazu bei, dass sich die Dinge glatt und natürlich anfühlen.

Während dies die meiste Zeit für visuelle Effekte verwendet wird, wechselt die Bibliothek zwischen zwei Werten, unabhängig davon, ob dieser Wert jemals für einen Stil verwendet wird oder nicht. Zum Beispiel könnte es verwendet werden, um eine Reihe von Anmeldungen zu zählen, um zu betonen, wie groß eine Community ist.

In diesem Tutorial erstellen wir eine Kartenkomponente, mit der Benutzer Bilder bewerten können. Die Karte wird umgedreht, um eine Sternebewertung anzuzeigen, und Benutzer können klicken, um ihre eigene hinzuzufügen. Wir werden die neuere Hooks-Implementierung von React Spring verwenden, für die React Version 16.8 oder höher erforderlich ist. Bevor du anfängst, Laden Sie hier die Tutorial-Dateien herunter (und sichern Sie sie in Cloud-Speicher ).

Wenn Sie eine Site ohne komplexe Codeprozesse erstellen möchten, verwenden Sie eine anständige Webseitenersteller . Und seien Sie sicher zu erkunden Web-Hosting Optionen auch.

01. Abhängigkeiten installieren

Nachdem die Dateien heruntergeladen wurden, müssen die Paketabhängigkeiten installiert werden, bevor wir beginnen können. Dieses auf Create React App basierende Projekt enthält die Reaktionsfeder Paket und alle erforderlichen lokalen Server-Setups, die für den Start erforderlich sind.

Suchen Sie in der Befehlszeile die Projektdateien, installieren Sie sie und führen Sie sie aus.

> yarn > yarn start

02. Generieren Sie Bilder im Status

Zuerst brauchen wir einige Bilder, um sie zu bewerten. In diesem Tutorial werden wir einige Bilder in den Anwendungsstatus hartcodieren, aber diese Daten können aus jeder Quelle stammen. Öffnen Sie App.js und erstellen Sie einige Bilder mit dem useState Haken von React. Dadurch erhält jedes Bild eine erste Bewertung, die wir später anzeigen und aktualisieren können.

const [cards] = useState([ createImage(image1), createImage(image2), createImage(image3) ]);

03. Zeigen Sie jede Bildkarte an

Da die Bilder in einem Array gespeichert sind, können wir diesen Status durchlaufen und für jeden separate Komponenten erstellen. Die Animationslogik für React Spring befindet sich in a Komponente, die wir überall verwenden können, wo wir brauchen.

Erstellen Sie in der Rendermethode von App.js eine Kopie dieser Komponente für jede Karte im Statusarray. Es erhält jeden Wert im Status, einschließlich des Bildes und der anfänglichen Bewertung.

{cards.map((card, index) => ( ))}

04. Kartenstruktur hinzufügen

Bevor wir die Animation hinzufügen können, benötigt die Karte einige Inhalte. Jede Karte hat eine Vorder- und Rückseite, die separat implementiert sind übereinander geschichtete Elemente.

Öffnen RatingsCard / index.js und fügen Sie die Struktur der Karte hinzu. Wir müssen das Bild als Hintergrund auf die vordere Karte anwenden, wobei die Rückseite schließlich die Bewertung enthält.

05. Schwebestile anwenden

Alle Stile, die nicht direkt durch unsere Animationen aktualisiert werden, können über CSS angewendet werden. Dies beinhaltet den grundlegenden 3D-Schatteneffekt für jede Karte, wenn Sie mit der Maus darüber fahren. Innerhalb RatingsCard / style.css Fügen Sie einige zusätzliche Stile hinzu, damit die Karte beim Schweben aus der Seite springt, indem Sie einen Filter anwenden.

.RatingsCard:hover { filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.25)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1)); }

06. Standardmäßig Schatten setzen

Ein plötzlicher Schatten beim Schweben ist eine erschütternde Erfahrung. Wir sollten daher langsam zwischen Staaten wechseln, um die Dinge reibungslos zu halten. Fügen Sie der Karte einen subtileren Schlagschatten hinzu, wenn Sie nicht mit der Maus darüber fahren. Verwenden Sie die Überleitung Eigenschaft zwischen diesen beiden Zuständen zu animieren.

.RatingsCard { [...] filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1)); transition: filter 0.5s; }

07. Halten Sie den ausgewählten Status

Wir müssen Informationen darüber speichern und aktualisieren, welche Seite der Karte nach oben zeigt. Wir können das integrierte React verwenden useState Hook, um einen Startwert zu definieren, und lässt ihn den aktuellen Wert und eine Methode zum Aktualisieren zurückgeben.

Zu Beginn des RatingsCard Komponentenfunktion, erstellen definieren dies ausgewählt Zustand.

const [selected, setSelected] = useState(false);

08. Definieren Sie die Flip-Animation

React Spring ist für den Übergang von Zahlen zwischen einem Wert und einem anderen verantwortlich. Dies kann mit einer Feder und der erfolgen useSpring Haken. Wir stellen ihm einige Setup-Informationen zur Verfügung und es gibt eine Reihe von Werten zurück, die gemäß den physikalischen Berechnungen aktualisiert werden.

Erstellen Sie eine Feder für die Flip-Animation. Dieser wird eine Karte verblassen und drehen, je nachdem, ob sich die Karte in ihrer befindet ausgewählt Zustand.

const { opacity, transform } = useSpring({ opacity: selected ? 1 : 0, transform: `rotateY( ${selected ? 180 : 0}deg)` });

09. In animierten Container konvertieren

Die von zurückgegebenen Objekte useSpring Definieren Sie ihre Animation, geben Sie jedoch nicht die erforderlichen numerischen Werte an. Das animiert Die Factory-Funktion verarbeitet diese Informationen und liefert die Werte dann als Zahlen an die Komponenten.

Konvertieren Sie die RatingsCard Element, um das zu verwenden animiert Funktion. Das animiert.div Die Syntax weist die Funktion an, a zurückzugeben .

10. Animieren Sie die Frontkarte

React Spring animiert nur die Werte und führt keine Animation der Elemente selbst durch. Wir können diese Werte mit einer Stil-Requisite verknüpfen und diese Animation im laufenden Betrieb erstellen. Aktualisieren Sie die Frontkarte, um die neue zu nutzen Opazität und verwandeln Werte. In diesem Fall müssen wir den Opazitätswert interpolieren, auf den wir in Kürze eingehen werden.

11. Animieren Sie die Rückkarte

Beim Umdrehen der Karte muss jede Animation, die wir auf ein Gesicht anwenden, umgekehrt auf das andere angewendet werden. Wenn sie zusammen gespielt werden, sehen sie so aus, als würden sie sich als ein Stück bewegen.

In diesem Fall müssen wir die gleichen Stile auf die Rückkarte anwenden, aber diesmal interpolieren wir die verwandeln Wert stattdessen.

12. Interpolieren Sie die Werte

Anstatt Werte direkt auf CSS-Eigenschaften anzuwenden, können wir ihnen eine Art Funktion zuweisen, um ihren Wert einem anderen zuzuordnen. Dieser Vorgang wird als Interpolation bezeichnet.

Definieren Sie einige Interpolationsfunktionen oben in RatingsCard / index.js . Diese wenden beim Auswählen oder Abwählen die Umkehrung sowohl der Deckkraft als auch der Transformationsanimationen an.

const inverseOpacity = o => 1 - o; const inverseTransform = t => `${t} rotateY(180deg)`;

13. Status beim Klicken umschalten

Das Umdrehen der Karte sollte mit einem Klick verbunden sein. Als die ausgewählt Der Statuswert bestimmt, welches Gesicht sichtbar ist. Wir sollten diesen Status umschalten, wenn wir auf die Karte klicken.

Fügen Sie dem äußeren einen Klick-Listener hinzu RatingsCard Element. In diesem Fall wird der im Status gehaltene Boolesche Wert umgeschaltet.

setSelected(!selected)} >

14. Passen Sie die Physik des Kartenwechsels an

Im Moment funktioniert unsere Animation, aber es scheint eher ein Float als ein Flip zu sein. Wir können einige Werte für jede Feder ändern, um ihr Verhalten zu ändern. Erstellen Sie im Setup-Objekt für die Feder eine config Objekt, um die Reibung zu verringern und die Spannung zu erhöhen. Dies gibt der Animation ein schnelleres Gefühl.

useSpring({ config: { friction: 22, tension: 500 }, [...] });

15. Erstellen Sie eine Feder für den Neigungseffekt

Während der CSS-gestützte Hover-Effekt von früher einige Rückmeldungen liefert, können wir dies weiter verbessern, indem wir eine Kippanimation haben, die auf die Cursorposition reagiert. Wenn Sie eine Feder mit einer hohen Frequenz aktualisieren, z. B. eine Mausbewegung, können Sie mit dem eine bessere Leistung erzielen einstellen Funktion, die von jeder Feder zurückgegeben wird. Erstellen Sie eine neue Quelle für diese Animation und behalten Sie die zurückgegebene Funktion bei.

const [props, set] = useSpring(() => ({ state: [0, 0, 1] } ));

16. Wenden Sie Neigungsstile an

React Spring kann viele verschiedene Arten von Werten animieren, einschließlich Arrays. Durch das Speichern unserer Werte in einem Array können wir sie alle auf das Array interpolieren verwandeln Eigentum in einem Durchgang.

Ein ... kreieren transformCard Interpolationsfunktion und wenden Sie die Stile auf die Haupt RatingsCard Element.

const transformCard = (x, y, scale) => `perspective(1000px) rotateX(${x}deg) rotateY(${y}deg) scale(${scale})`; [...] setSelected(!selected)} style={{ transform: !selected && props.state.interpolate( transformCard) }}>

17. Stellen Sie die Werte beim Bewegen der Maus ein

Mausereignisse geben die Koordinaten des Cursors zu diesem Zeitpunkt an. Wir sind an den Client-Koordinaten interessiert, um die Cursorposition im Ansichtsfenster zu ermitteln. Fügen Sie eine Mausbewegung hinzu und überlassen Sie Ereignisse dem Äußeren . Wir übergeben die Koordinaten an eine Funktion beim Verschieben und setzen sie auf die Standardwerte zurück, wenn der Cursor die verlässt .

onMouseLeave={() => set({ state: [0, 0, 1] })} onMouseMove={({ clientX: x, clientY: y }) => set({ state: calculateValues(x, y) }) }

18. Berechnen Sie die Animationswerte

Wir möchten nur eine kleine Neigung, um zu vermeiden, dass sich die Karte zu stark bewegt, wenn der Benutzer mit ihr interagiert. Das berechneWerte Die Funktion ermittelt die Seite des Bildschirms, auf der sich der Cursor befindet, und kippt ihn in diese Richtung.

Erstellen Sie die Funktion zum Ausfüllen dieser Werte. Durch Teilen durch 40 wird der Neigungseffekt verringert, um die Benutzerfreundlichkeit zu erhöhen. Der endgültige Wert hebt die Karte visuell vom Bildschirm an.

const calculateValues = (x, y) => [ -(y - window.innerHeight / 2) / 40, (x - window.innerWidth / 2) / 40, 1.1];

19. Sternebewertung anzeigen

Jedes Bild hat eine Bewertung, die wir in Sternen auf der Rückseite der Karte anzeigen müssen. Diese Logik befindet sich in einer eigenen Komponente, die jedoch zuerst auf die Rückseite angewendet werden muss.

Erstellen Sie zuerst einen neuen Status, um die Bewertung zu speichern, und erstellen Sie dann einen Komponente innerhalb der Rückseite .

const [currentRating, setRating] = useState(rating); [...] {selected && ( )}

20. Erstellen Sie eine Sternanimation

Die Sternebewertungen werden eingeblendet, sobald die Karte umgedreht wurde. Mit dem useTrail Mit dem Haken von React Spring können wir Federn nacheinander auf mehrere Komponenten anwenden.

Aufmachen StarRating / index.js und fügen Sie den Haken hinzu. Das erste Argument definiert die Anzahl der Federn, die hergestellt werden sollen.

const animatedStars = useTrail(5, { config: { friction: 22, tension: 500 }, from: { opacity: 0, transform: 'scale(0.8)' }, opacity: 1, transform: 'scale(1)' });

21. Sterne auf die Komponente auftragen

Das Letzte, was wir tun müssen, ist, diese Sterne anzuzeigen. Das animierte Sterne Die Variable enthält jetzt eine Reihe von Federn, die wir durchlaufen und auf die Karte anwenden können.

Zeigen Sie für jeden Stern eine Komponente innerhalb der Hauptleitung Bewertung in Sternen div. Verbreiten Sie die Stilrequisiten, um alle Effekte auf jede Komponente anzuwenden. Wenn Sie darauf klicken, senden Sie die neue Bewertung an das übergeordnete Element Komponente.

{animatedStars.map((props, index) => ( ))}

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Ausgabe 288 kaufen oder abonnieren .

Weiterlesen:

• Entwickeln Sie wiederverwendbare React-Komponenten
• Die besten Laptops für die Programmierung im Jahr 2019
• 35 Webdesign-Tools, mit denen Sie intelligenter arbeiten können