Come utilizzare React Spring per animare i componenti

React Spring può aiutarti con animazioni, che sono notoriamente ingannevoli per implementare sul Web. Animazioni CSS. Sono la scelta migliore, ma creando un risultato fluido, richiede un'attenta giocoleria di classi, durate ed eventi. Lanciare a. Quadro JavaScript. Come reagire nel mix complica solo le cose oltre.

Per le animazioni che si basano sull'interazione dell'utente, i valori possono essere calcolati tramite JavaScript e applicati direttamente a un elemento. Prendendo questo approccio manuale, avremmo bisogno di calcolare e applicare il nostro allentamento per rendere l'animazione più naturale.

Reagire la molla è una biblioteca costruita per affrontare un sacco di hang-up comuni quando si tratta di animazione sul web. Ci vuole un approccio leggermente diverso, concentrandosi sulla fisica rispetto alle durate dritte e alle funzioni di allentamento definite. Questo aiuta a mantenere le cose sentirsi liscia e naturali.

Mentre la maggior parte del tempo viene utilizzato per gli effetti visivi, la Biblioteca passerà tra due valori indipendentemente dal fatto che tale valore sia mai utilizzato per uno stile o meno. Ad esempio, potrebbe essere usato per contare un numero di iscrizioni per enfatizzare quanto sia grande una comunità.

In questo tutorial, faremo un componente di carte che consente agli utenti di valutare le immagini. La carta si capovolge per rivelare una valutazione di stelle e utenti possono fare clic per aggiungere il proprio. Useremo l'implementazione dei ganci più recenti di React Spring, che richiede React versione 16.8 o superiore. Prima che inizi, Scarica i file tutorial qui (e indietro in deposito cloud. ).

Se vuoi costruire un sito senza processi di codice complessi, usa un decente Builder del sito web . E assicurati di esplorare web hosting anche le opzioni.

01. Installa dipendenze

Con i file scaricati, le dipendenze del pacchetto devono essere installate prima di iniziare. Questo creare il progetto basato su app react include il React-Spring. Pacchetto e tutto il server locale necessario impostato per iniziare.

Nella riga di comando, individuare i file di progetto e installare, quindi eseguirli.

 & GT; filato
& GT; Inizio del filo 

02. Genera immagini in stato

Innanzitutto, abbiamo bisogno di alcune immagini per valutare. Per questo tutorial, stiamo per effettuare il codice problematico Alcune immagini nello stato di applicazione, ma questi dati potrebbero provenire da qualsiasi fonte. Apri Up App.JS e crea alcune immagini con il Usestate. Gancio da reagire. Questo darà ad ogni immagine una valutazione iniziale che possiamo visualizzare e aggiornare in seguito.

 Cost [carte] = Usestate ([
Creazione (immagine1),
CreateMage (Image2),
CreateMage (Image3)
]); 

03. Visualizza ogni scheda immagine

Poiché le immagini sono memorizzate in un array, possiamo loop su tale stato e creare componenti separati per ciascuno. La logica di animazione per la molla reagire vivrà all'interno di un & lt; ratingscard / & gt; Componente che possiamo usare ovunque dobbiamo.

All'interno del metodo di rendering di app.js, crea una copia di quel componente per ogni carta nell'array di stato. Riceverà ogni valore nello stato, compresa l'immagine e la valutazione iniziale.

 {card.map ((carta, indice) = & gt;
& lt; ratingscard key = {indice} {... card} / & gt;
))} 

04. Aggiungi la struttura delle carte

Prima di poter aggiungere l'animazione, la carta ha bisogno di alcuni contenuti. Ogni carta ha una parte anteriore e posteriore, che sono implementate come separate & lt; div & gt; Elementi stratificati sopra l'altro.

Aperto RatingScard / index.js. e aggiungere la struttura della carta. Dobbiamo applicare l'immagine come sfondo alla carta anteriore, alla fine della parte posteriore contenente la valutazione.

 & lt; div classname = "ratingscard" e gt;
& lt; div; div
classname = "ratingscard__front"
Style = {{
BackgroundImage: `URL ($ {Image})`
}}
/ & gt;
& lt; div classname = "ratingscard__back" / & gt;
& lt; / div & gt; 

05. Applicare gli stili di movimentazione

Eventuali stili che non sono direttamente aggiornati attraverso le nostre animazioni possono essere applicati tramite CSS. Ciò include l'effetto Shadow 3D di base per ogni carta quando è stato trasferito. Dentro RatingScard / style.css. , aggiungere alcuni stili extra per far saltare la carta dalla pagina su Hover applicando un filtro.

 .ratingscard: Hover {
Filtro: Drop-Shadow (0 14px 28px
RGBA (0, 0, 0, 0,25))
Drop-Shadow (0 10 px 10px
 RGBA (0, 0, 0, 0.1));
} 

06. Imposta l'ombra per impostazione predefinita

Un'ombra improvvisa su Hover è un'esperienza jarring. Dovremmo quindi lentamente la transizione tra gli stati per mantenere le cose lisce. Aggiungere un sotterraneo Drop-Shadow per la carta quando non viene trasferito. Usa il transizione proprietà per animare tra quei due stati.

 .ratingscard {
[...]
Filtro: Drop-Shadow (0 3 PX 6 PX
RGBA (0, 0, 0, 0.16))
Drop-Shadow (0 3 px 6px
RGBA (0, 0, 0, 0.1));
Transizione: filtro 0,5s;
} 

07. Tenere premuto stato selezionato

Dobbiamo memorizzare e aggiornare le informazioni su quale lato della carta è rivolto verso l'alto. Possiamo usare il react's integrato Usestate. Gancio per definire un valore di avvio e restituisce il valore corrente e un metodo per aggiornarlo.

All'inizio del RatingScard. Funzione dei componenti, crea definire questo selezionato stato.

 Cost [selezionato, setSelected]
 = USESTATE (FALSE); 

08. Definire l'animazione flip

React Spring è responsabile del transizione dei numeri tra un valore e un altro. Questo può essere fatto con una molla e il usedspring. gancio. Forniamo alcune informazioni di configurazione e restituiamo una serie di valori che si aggiornano in base ai suoi calcoli fisici.

Crea una molla per l'animazione flip. Questo svanerà e ruoterà una carta a seconda che la carta sia nel suo selezionato stato.

 const {opacità, trasformazione}
 = usedpring ({
Opacità: selezionato? 1: 0,
Trasforma: `Rotaty (
$ {selezionato? 180: 0} deg) `
}); 

09. Converti in contenitore animato

Gli oggetti sono tornati da usedspring. Definisci la loro animazione, ma non forniscono i valori numerici di cui abbiamo bisogno. Il animato La funzione di fabbrica digerisce queste informazioni e quindi fornisce i valori come numeri ai componenti.

Convertire il RatingScard. elemento per usare il animato funzione. Il animato.div. La sintassi indica la funzione di restituire a & lt; div & gt; .

 & lt; animato.div classname = "RatingScard" e GT;
& lt; animato.div
classname = "ratingscard__front"
Style = {{
BackgroundImage: `URL ($ {Image})`
}}
/ & gt;
& lt; animato.div classname =
"RatingScard__back" / & GT;
& lt; /animated.div> 

10. Animare la carta anteriore

React Spring sta solo animando i valori e non fa alcuna animazione di elementi stessi. Possiamo collegare quei valori a uno stile di stile e creare quell'animazione al volo. Aggiorna la carta anteriore per utilizzare il nuovo opacità e trasformare valori. In questo caso, avremo bisogno di interpolare il valore di opacità, che affronteremo a breve.

 & lt; animato.div
classname = "ratingscard__front"
Style = {{
stato backgroundimage: `url ($ {image})`,
Opacità: opacità.Interpolato (
Inverseopacità),
trasformare
}}
/ & GT; 

11. Animare la scheda sul retro

Quando si lancia la carta, qualunque animazione applichiamo a una faccia dovrà essere applicata all'altra all'altra. Quando giocato insieme, sembreranno che si stanno muovendo come un pezzo.

In questo caso, dobbiamo applicare gli stessi stili alla scheda sul retro, ma questa volta interpola il trasformare Valore invece.

 & lt; animato.div
classname = "RatingScard__back"
Style = {{
opacità,
Trasforma: trasformazione
.Interpolato (Inversetransform)
}}
/ & GT; 

12. Interpolare i valori

Invece di applicare direttamente i valori alle proprietà CSS, possiamo applicare una specie di funzione a loro, per mappare il loro valore a uno diverso. Questo processo è chiamato interpolazione.

Definire un paio di funzioni di interpolazione verso la parte superiore di RatingScard / index.js. . Questi applicano il retro dell'opacità e delle animazioni trasformano quando si seleziona o deselezione.

 const inverseopacity = o = & gt; 1 - o;
const inversetransform = t = & gt;
 `$ {T} Rotatey (180DEG)`; 

13. Toggle Stato sul clic

La lancia della carta dovrebbe essere legata a un clic. Come il selezionato Il valore di stato determina quale faccia è visibile, dovremmo alternare tale stato quando si fa clic sulla scheda.

Aggiungi un clic del listener sull'esterno RatingScard. elemento. Quando ciò accade, alternano il valore booleano tenuto in stato.

 & lt; animato.div
classname = "RatingScard"
onclick = {() = & gt;
setSelected (! selezionato)}
& GT; 

14. Regolare la scheda Flip Physics

In questo momento, la nostra animazione funziona, ma sembra più un galleggiante di un flip. Possiamo cambiare alcuni valori su ogni molla per cambiare come si comporta. All'interno dell'oggetto di installazione per la molla, creare a configurazione oggetto per diminuire l'attrito e aumentare la tensione. Questo darà all'animazione una sensazione di snappier.

 USEPRING ({
Config: {
Attrito: 22,
Tensione: 500.
},
[...]
}); 

15. Crea la molla per l'effetto inclinazione

Mentre l'effetto panoramico alimentato da CSS dal precedente fornisce alcuni feedback, possiamo migliorare l'ulteriore con un'animazione inclinata che reagisce alla posizione del cursore. Quando si aggiorna una molla ad alta frequenza, come una mossa del mouse, possiamo ottenere prestazioni migliori usando il impostato funzione che viene restituita da ogni molla. Crea una nuova primavera per questa animazione e mantenere una presa della sua funzione restituita.

 Cost [puntelli, set] = usedpring (() = & gt; ({
Stato: [0, 0, 1]
}
)); 

16. Applicare gli stili di inclinazione

React Spring può animare molti diversi tipi di valori, che include array. Memorizzare i nostri valori in un array ci consente di interpolarli tutti sul trasformare proprietà in un passaggio.

Creare un Transforcard. Funzione di interpolazione e applica gli stili al principale RatingScard. elemento.

 Const Transforcard = (x, y, bilancia) = & gt;
 `Prospettiva (1000px) rotax ($ {x} deg)
rotay ($ {y} deg) scala ($ {scala}) `;
[...]
& lt; animato.div
 classname = "RatingScard"
 onclick = {() = & gt; setSelected (! selezionato)}
 Style = {{Transform :! selezionato e amp; & amp;
Props.State.Interpolato (
Transforcard)}} e GT; 

17. Impostare i valori sul movimento del mouse

Gli eventi del mouse forniscono le coordinate del cursore in quel momento. Siamo interessati alle coordinate del cliente per ottenere la posizione del cursore all'interno del punto di vista. Aggiungi il movimento del mouse e lascia gli eventi all'esterno & lt; div & gt; . Passiamo le coordinate a una funzione su spostamento e ripristina i valori predefiniti quando il cursore lascia il & lt; div & gt; .

 onmouseleave = {() = & gt; impostato({
 Stato: [0, 0, 1]})}
onmouseMove = {({clientx: x,
 Clienty: y}) = & gt; impostato({
 Stato: calcolavalues ​​(x, y)})
} 

18. Calcola i valori di animazione

Vogliamo solo una piccola inclinazione per evitare che la carta spostasse troppo quando l'utente interagisce con esso. Il calcolavalues. La funzione funzionerà il lato dello schermo il cursore è acceso e l'inclini verso quella direzione.

Creare la funzione per compilare quei valori. Dividere per 40 riduce l'effetto di inclinazione per renderlo più utilizzabile. Il valore finale aumenterà visitamente la carta dallo schermo.

 CONST CALCOLATEVALUES = (X, Y) = & GT; [
- (y - window.innerheight / 2) / 40,
(x - finestra.innerwidth / 2) / 40,
1.1]; 

19. Mostra la valutazione della stella

Ogni immagine ha una valutazione che dobbiamo visualizzare nelle stelle sul retro della carta. Questa logica si svolge all'interno del proprio componente, ma che deve essere applicata prima alla faccia posteriore.

Innanzitutto, crea un nuovo pezzo di stato per tenere il punteggio, quindi creare a & lt; Starrating & GT; Componente all'interno del rivolto posteriore & lt; div & gt; .

 Cost [Correnti, Setrazione]
 = USATE (valutazione);
[...]
{selezionato e amp; & amp; (
 & lt; starating rating = {currenrating}
Setating = {Setating} / & gt;
)} 

20. Crea animazione Star

Le valutazioni a stella svaniscono una volta che la carta è stata capovolta. Usando il. Userportail. Gancio Dalla molla reagire, possiamo applicare molle a più componenti, uno dopo l'altro.

Aprire Storating / index.js. e aggiungere il gancio. Il primo argomento definirà il numero di molle da fare.

 Cost AnimatedStars = Usertrail (5, {
Config: {
Attrito: 22,
Tensione: 500.
},
Da: {Opacità: 0,
Trasforma: "scala (0.8)"},
Opacità: 1,
Trasforma: "scala (1)"
}); 

21. Applicare stelle al componente

L'ultima cosa che dobbiamo fare è effettivamente mostrare quelle stelle. Il animators. La variabile ora contiene una serie di molle, che possiamo isolare e applicare sulla carta.

Per ogni stella, mostra un & lt; animatedstar & gt; Componente all'interno del principale Stelle Div. Stendere i puntelli di stile per applicare tutti gli effetti a ciascun componente. Quando cliccato, invia la nuova valutazione al genitore & lt; RatingCard & GT; componente.

 {animaterstarrs.map ((puntelli, indice) = & gt; (
& lt; animatedstar
attivo = {indice + 1 & lt; = valutazione}
onclick = {e = & gt; {
e.StopPropagation ();
Setaring (indice + 1);
}}
Key = {indice}
Style = {{... puntelli}}
/ & gt;
))} 

Questo articolo è stato originariamente pubblicato su Creative Web Design Magazine Web designer . Comprare il problema 288. o sottoscrivi .

Per saperne di più:

• Sviluppare componenti reagibili riutilizzabili
• I migliori computer portatili per la programmazione nel 2019
• 35 strumenti di web design per aiutarti a lavorare in modo più intelligente