Verwendung der Reaktionsfeder, um Komponenten zu animieren

Die Reaktionsfeder kann Ihnen mit Animationen helfen, die notorisch knifflig sind, um im Internet zu implementieren. CSS-Animationen. Sind die beste Wahl, aber das Schaffung eines reibungslosen Ergebnisses erfordert einen sorgfältigen Jonglieren von Klassen, Dauer und Ereignissen. A. werfen A. Javascript Framework. Wie reagieren Sie in den Mix, erfüllt nur die Dinge weiter.

Für Animationen, die sich auf die Benutzerinteraktion verlassen, können Werte über JavaScript berechnet und direkt auf ein Element angewendet werden. Durch die Einnahme dieses manuellen Ansatzes müssten wir unsere eigene Lockerung berechnen und anwenden, um die Animation natürlicher auszusehen.

Feder reagieren ist eine Bibliothek, die aufgebaut ist, um mit vielen gemeinsamen Hang-ups, wenn es um die Animation im Internet geht. Es dauert einen etwas unterschiedlichen Ansatz, indem er sich auf die Physik über geraden Dauer und definierte Lockfunktionen konzentriert. Dies hilft, die Dinge glatt und natürlich zu fühlen.

Während der meiste Zeit dies für visuelle Effekte verwendet wird, übergeht die Bibliothek zwischen zwei Werten, unabhängig davon, ob der 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 hervorzuheben, wie groß eine Gemeinschaft ist.

In diesem Tutorial erstellen wir eine Kartenkomponente, mit der Benutzer Bilder bewerten können. Die Karte flippt, um eine Sternebewertung anzuzeigen, und Benutzer können klicken, um ihre eigenen hinzuzufügen. Wir verwenden die neuere Hooks-Implementierung Reaktionsfeder, die Reaging-Version 16.8 oder höher benötigt. Bevor du anfängst, Laden Sie die Tutorial-Dateien hier herunter (und wieder zurückgehen Cloud-Speicherung. ).

Wenn Sie einen Standort ohne komplexe Codeprozesse erstellen möchten, verwenden Sie einen anständigen Webseitenersteller . Und sei sicher, dass er erkunden kann Web-Hosting Optionen auch.

01. Installation von Abhängigkeiten

Mit den heruntergeladenen Dateien müssen die Paketabhängigkeiten installiert werden, bevor wir anfangen können. Dieses Erstellen von React App-based-Projekt beinhaltet das Springreaktionsfeder. Paket und alle notwendigen lokalen Server, die eingerichtet sind, um den Start zu beginnen.

Suchen Sie auf der Befehlszeile die Projektdateien und installieren Sie sie und führen Sie sie an.

 & gt; Garn
& gt; Garn Start 

02. Bilder im Zustand generieren

Erstens brauchen wir einige Bilder zu bewerten. Für dieses Tutorial werden wir einige Bilder in den Anwendungsstatus fleißigen, aber diese Daten könnten von einer beliebigen Quelle stammen. Öffnen Sie app.js und erstellen Sie einige Bilder mit der usestate Haken von der Reaktion. Dadurch erhalten Sie jedes Bild eine anfängliche Bewertung, die wir später anzeigen und aktualisieren können.

 const [karten] = usestate ([
CreateImage (Image1),
CreateImage (Bild2),
CreateImage (Bild3)
]); 

03. Zeigt jede Bildkarte an

Da die Bilder in einem Array gespeichert sind, können wir diesen Zustand überlegen und separate Komponenten für jeden erstellen. Die Animationslogik für die Reaktionsfeder lebt in einem & lt; RatingsCard / & gt; Komponente, die wir überall verwenden können, wo wir müssen.

Erstellen Sie in der Rendermethode von app.js eine Kopie dieser Komponente für jede Karte im Statusarray. Es wird jeden Wert im Zustand erhalten, einschließlich des Bildes und der Erstbewertung.

 {karten.map ((Karte, Index) = & gt; (
& lt; RatingsCard Key = {index} {... card} / & gt;
))} 

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 als separat umgesetzt wird & lt; div & gt; Elemente aufeinander geschichtet.

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

 & lt; div classname = "RatingsCard" & gt;
& lt; div
classname = "RatingsCard__front"
style = {{{{
BackgroundFimage: `` © `{bild})`
}}
/ & gt;
& lt; div classname = "RatingsCard__back" / & gt;
& lt; / div & gt; 

05. Wenden Sie den Hover-Styles an

Alle Styles, die nicht direkt über unsere Animationen aktualisiert werden, können über CSS angewendet werden. Dies beinhaltet den grundlegenden 3D-Schatteneffekt für jede Karte, wenn sie überschwemmt werden. Innerhalb RatingsCard / style.css. Fügen Sie einige zusätzliche Stile hinzu, um die Karte mit einem Filter auf der Seite zu springen, indem Sie einen Filter anwenden.

 .aftcard: 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. Setzen Sie standardmäßig Schatten

Ein plötzlicher Schatten auf dem Hover ist ein ruckartiges Erlebnis. Wir sollten also langsam zwischen den Staaten übergehen, um die Dinge glatt zu halten. Fügen Sie einen Subtler-Drop-Shadow für die Karte hinzu, wenn Sie nicht überschwemmt werden. Benutze das Überleitung Eigentum, um zwischen diesen beiden Staaten zu animieren.

 .aftcard {
[...]
Filter: Drop-Shadow (0 3PX 6PX
RGBA (0, 0, 0, 0,16))
Drop-Shadow (0 3PX 6PX
RGBA (0, 0, 0, 0,1));
Übergang: Filter 0,5s;
} 

07. Halten Sie den ausgewählten Zustand

Wir müssen Informationen über welche Seite der Karte speichern und aktualisieren. Wir können das integrierte React-In verwenden usestate Haken, um einen Startwert zu definieren, und es gibt den aktuellen Wert und eine Methode, um sie zu aktualisieren.

Zu Beginn der RatingCard. Komponentenfunktion, erstellen Sie diese Option ausgewählt Zustand.

 const [ausgewählt, eingestellt]
 = USESTATE (FALSE); 

08. Definieren Sie die Flip-Animation

Die Reaktionsfeder ist dafür verantwortlich, Zahlen zwischen einem Wert und einem anderen zu veranlassen. Dies kann mit einem Frühling und dem Verwendungspring. Haken. Wir stellen ihm einige Setup-Informationen bereit, und es gibt einen Satz von Werten, die nach seinen Physik-Berechnungen aktualisieren.

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

 const {opazity, transform}
 = Verwendungspring ({{
Deckkraft: ausgewählt? 1: 0,
Transformation: `dreihig (
$ {ausgewählt? 180: 0} DEG) `
}); 

09. In animierter Container konvertieren

Die Objekte kehrten von zurück Verwendungspring. Definieren Sie ihre Animation, geben Sie jedoch nicht die numerischen Werte an, die wir benötigen. Das animiert Die Werksfunktion verdönt diese Informationen und liefert dann die Werte als Zahlen an die Komponenten.

Konvertieren Sie das RatingCard. Element, um das zu verwenden animiert Funktion. Das animiert.div. Die Syntax zeigt die Funktion an, um a zurückzugeben & lt; div & gt; .

 & lt; animated.div classname = "RatingsCard" & GT;
& lt; animiert.div
classname = "RatingsCard__front"
style = {{{{
BackgroundFimage: `` © `{bild})`
}}
/ & gt;
& lt; animated.div classname =
"RatingsCard__back" / & gt;
& lt; /animated.div> 

10. Animieren Sie die Frontkarte

Die Reaktionsfeder ist nur die Werte animieren und leistet keine Animationen von Elementen selbst. Wir können diese Werte an einen Style-Prop verknüpfen und diese Animation in der Fliege erstellen. Aktualisieren Sie die Frontkarte, um das Neue zu nutzen Opazität und verwandeln Werte. In diesem Fall müssen wir den Deckkraftwert interpolieren, den wir in Kürze ansprechen werden.

 & lt; animiert.div
classname = "RatingsCard__front"
style = {{{{
Hintergrundbild: `` `` {bild}) `,
Deckkraft: Opacity.Interpolate (
Inversepacity),
verwandeln
}}
/ & gt; 

11. Animieren Sie die hintere Karte

Bei der Umdrehung der Karte müssen die Animation, die wir für ein Gesicht aufhalten, in umgekehrter Richtung auf den anderen aufgetragen werden. Wenn sie zusammen gespielt haben, werden sie aussehen, als würden sie sich als ein Stück bewegen.

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

 & lt; animiert.div
classname = "RatingsCard__back"
style = {{{{
Opazität,
Transformation: Transformation
.interpolate (Inversetransform)
}}
/ & gt; 

12. Interpolieren Sie die Werte

Anstatt die Werte an CSS-Eigenschaften direkt anzuwenden, können wir ihnen eine Art Funktion anwenden, um ihren Wert auf ein anderes zuzuordnen. Dieser Prozess wird als Interpolation bezeichnet.

Definieren Sie ein paar Interpolationsfunktionen an der Spitze von RatingsCard / Index.js. . Diese wenden die Umkehrung der Deckkraft auf und transformieren Sie die Animationen bei der Auswahl oder Auswahl.

 const InverseOpacity = O = & gt; 1 - o;
const InversetRansform = t = & gt;
 `$ {t} dreiht (180deg)`; 

13. Toggle-Status beim Klicken

Das Umlauf der Karte sollte an einen Klick gebunden sein. Als die ausgewählt Zustandswert bestimmt, welches Gesicht sichtbar ist, wir sollten diesen Status beim Klicken auf die Karte umschalten.

Fügen Sie dem Äußeren einen Klickfummel hinzu RatingCard. Element. Wenn dies geschieht, wechselt es den booleschen Wert, der in dem Status gehalten wird.

 & lt; animiert.div
classname = "RatingsCard"
onclick = {() = & gt;
Setselected (! ausgewählt)}
& gt; 

14. Passen Sie die Karten-Flip-Physik an

Im Moment funktioniert unsere Animation, aber es scheint mehr ein Schwimmer als ein Flip. Wir können einige Werte an jeder Feder ändern, um zu ändern, wie sich er sich verhält. Im Inneren des Setup-Objekts für den Frühling, erstellen Sie a Konfiguration Objekt, um die Reibung zu verringern und die Spannung zu erhöhen. Dies ergibt die Animation ein snappierigeres Gefühl.

 Verwendungspring ({{
config: {
Reibung: 22,
Spannung: 500.
},
[...]
}); 

15. Erstellen Sie den Frühling für den Neigungseffekt

Während der CSS-Powered-Fover-Effekt von früher etwas Feedback bereitstellt, können wir das weiter verbessern, indem wir eine kippbare Animation aufweisen, die auf die Cursorposition reagiert. Beim Aktualisieren einer Feder mit hoher Frequenz, beispielsweise einer Mausbewegung, können wir bessere Leistung durch Verwendung der einstellen Funktion, die von jeder Feder zurückgegeben wird. Erstellen Sie einen neuen Frühling für diese Animation und halten Sie einen Halten der zurückgegebenen Funktion.

 const [Requisiten, Set] = Verwendungspring (() = & gt; ({
Zustand: [0, 0, 1]
}
)); 

16. Neigungsstile anwenden

Reaktionsfeder kann viele verschiedene Arten von Werten animieren, die Arrays enthalten. Die Speicherung unserer Werte in einem Array ermöglicht es uns, sie alle auf die zu interpolieren verwandeln Eigentum in einem Pass.

Ein ... kreieren Transformkard Interpolationsfunktion und wenden Sie die Styles an die Hauptseite an RatingCard. Element.

 const transformcard = (x, y, scale) = & gt;
 `Perspektive (1000px) rotatex ($ {x} DEG)
dreißen ($ {y} deg) skalieren ($ {scale}) `;
[...]
& lt; animiert.div
 classname = "RatingsCard"
 onclick = {() = & gt; Setselected (! ausgewählt)}
 style = {{transform :! ausgewählt & amp; & amp;
Requisiten.State.Interpolate (
transformcard)}} & gt; 

17. Stellen Sie die Werte auf Mausbewegung ein

Mausereignisse stellen die Koordinaten des Cursors damals bereit. Wir sind an den Client-Koordinaten interessiert, um die Cursorposition innerhalb des Ansichtsfensters zu erhalten. Fügen Sie Mausbewegung hinzu und lassen Sie Ereignisse an der Außenseite & lt; div & gt; . Wir bestehen die Koordinaten an eine Funktion zum Bewegen und setzen auf die Standardwerte zurück, wenn der Cursor das verlässt & lt; div & gt; .

 onmouseeleave = {() = & gt; einstellen({
 Zustand: [0, 0, 1]})}
onmouseMove = {({clientx: x,
 Clienty: y}) = & gt; einstellen({
 Zustand: BerechnenValues ​​(x, y)})
} 

18. Animationswerte berechnen

Wir wollen nur eine kleine Neigung, um zu vermeiden, dass die Karte zu viel bewegt wird, wenn der Benutzer damit interagiert. Das Berechnenamen Die Funktion wird auf der Seite des Bildschirms herausgearbeitet, der Cursor ist eingeschaltet und neigt ihn in diese Richtung.

Erstellen Sie die Funktion, um diese Werte auszufüllen. Die Dividierung durch 40 verringert den Neigungseffekt, um es nutzbarer zu machen. Der Endwert erhöht die Karte visuell vom Bildschirm.

 const calculateValues ​​= (x, y) = & gt; [
- (y - window.innerhöhe / 2) / 40,
(x - window.innerwidth / 2) / 40,
1.1]; 

19. Sternebewertung anzeigen

Jedes Bild hat eine Bewertung, die wir in Stars auf der Rückseite der Karte anzeigen müssen. Diese Logik wird in seiner eigenen Komponente gehalten, aber das muss zuerst auf das Rückwand angewendet werden.

Erstellen Sie zunächst ein neues Status-Status, um die Bewertung festzuhalten, und erstellen Sie dann a & lt; staring & gt; Komponente in der Rückseite & lt; div & gt; .

 const [currentrating, setrating]
 = USESTATE (Rating);
[...]
{ausgewählt & amp; & amp; (
 & lt; Staring Rating = {currentrating}
Setrating = {Setrating} / & gt;
)} 

20. Erstellen Sie eine Sternanimation

Die Sternbewertungen werden einblenden, sobald die Karte umgedreht hat. Mit dem verwendeten Usetrail Haken von der Reaktionsfeder, wir können Federn an mehrere Komponenten anbringen, eines nach dem anderen.

Aufmachen Staring / Index.js. und fügen Sie den Haken hinzu. Das erste Argument definiert die Anzahl der Federn.

 const animatedstars = armtrail (5, {
config: {
Reibung: 22,
Spannung: 500.
},
Von: {Deckkraft: 0,
Transformation: "Skala (0,8)"},
Deckkraft: 1,
Transformation: "Skala (1)"
}); 

21. Wenden Sie Sterne an die Komponente an

Das letzte, was wir tun müssen, ist tatsächlich diese Sterne anzuzeigen. Das Animatedstars. Die Variable enthält jetzt ein Array von Federn, die wir überfahren und auf die Karte anwenden können.

Für jeden Stern zeigen Sie ein & lt; animatedstar & gt; Komponente in der Hauptseite Bewertung in Sternen Div. Verbreiten Sie die Style-Requisiten, um alle Effekte auf jede Komponente anzuwenden. Wenn Sie auf klicken, senden Sie die neue Bewertung an den Elternteil & lt; ratingcard & gt; Komponente.

 {animatedstars.map ((Requisiten, Index) = & gt; (
& lt; animiertstar
Active = {Index + 1 & lt; = Rating}
onclick = {e = & gt; {
e.stopppropagation ();
Setrating (Index + 1);
}}
Key = {Index}
style = {{... Requisiten}}
/ & gt;
))} 

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

Weiterlesen:

• Wiederverwendbare Reaktionskomponenten entwickeln
• Die besten Laptops für die Programmierung im Jahr 2019
• 35 Webdesign-Tools, mit denen Sie intelligenter arbeiten können