Introducció a React Motion

Bloc

Introducció a React Motion

Reacciona el moviment és una biblioteca d'animació estimada a la comunitat React. He de dir que tenir certa experiència amb biblioteques com GSAP no és el més fàcil d’entendre, però el seu poder prové de la capacitat de lligar directament animacions al vostre estat. Igual que React, l'estat dicta quan es renderitzaran els components React i, de la mateixa manera, l'estat dicta les animacions en moviment React.



finalitzar l'animació des de la demostració

En aquesta demostració animarem un div que conté la previsió setmanal dins i fora de la pantalla. Suposem que tenim aquest codi a continuació:



{weather.forecast.map(daily => ( ))}

Al codi anterior Forecast és un component d’estil, de manera que en realitat només és un div. Als exemples següents no inclourem el mapatge que passa dins del component de previsió perquè no és necessari per a aquest exemple.

Presentació de React Motion

Per començar amb React Motion, voldrem importar dues biblioteques:



import { Motion, spring } from 'react-motion';

Motion s'utilitzarà per embolicar el nostre Forecast component i spring és una funció que controla la velocitat amb què un número s'animarà des del seu valor inicial fins al valor final. Mostrem la versió final de l’animació a continuació i, a continuació, desglossem les diferents parts de la mateixa.

{style => ( mapping daily forecast... )}

Estil i estil per defecte

El Motion el component rep 2 accessoris, defualtStyle i style. defaultStyle és un objecte que defineix els valors inicials que voleu animar. En aquest cas, animarem un x valor que començarà a -200 i opacity que comença a 0.

on comprar cartesi coin

El style prop és un objecte del que valors hauria estar en qualsevol moment del temps. Si defualtStyle és el from de l'animació, style és el to (en terminologia gsap).

Però notareu que el style prop no és tan senzill. x: spring(showForecast ? 0 : -200) el que realment estem fent és vincular-lo a l’estat, concretament al showForecast valor de l'estat que és un valor booleà. Així que el que diem és que si showForecast és true, volem que el valor sigui 0, però si és false, hauria de tornar a ser -200.

Què passa amb la primavera?

Llavors, què fa spring fer llavors? És una funció que controla la velocitat de l’animació. Si el valor passés de -200 a 0 a l'instant, no semblaria animar-se, simplement passaria. spring fa que passi gradualment des de from al seu to.

spring es pot enviar un segon paràmetre que és un objecte que podria tenir aquest aspecte: {stiffness: 170, damping: 26}. Aquesta terminologia prové de la física, però essencialment stiffness controla la velocitat de l'animació i damping controla el rebot. Aquesta pàgina proporciona un lloc de jocs per determinar quines opcions de rigidesa i amortiment són adequades per a vosaltres.

A React Motion mai no definiu quants mil·lisegons durarà l’animació, només es controla mitjançant la rigidesa i l’amortiment.

Utilitzant els valors animats

El Motion component vol rebre una funció com a fill.

{style => contents}

Aquesta funció passa a la style actual com que s'anima d'un valor a un altre ... així que se l'anomena constantment a mesura que canvien els valors. Pot semblar així:

{ x: -150.25, opacity: 0.264 }

Així que ara que tenim els valors a mesura que s’animen, els podem utilitzar amb un estil en línia per canviar les propietats css.

{style => ( mapping daily forecast... )}

Estem fent servir el style objecte per canviar el transform css propietat i el opacity propietat. Ara, a mesura que aquests estils en línia canvien i el nostre component de previsió es llisca a la pantalla, és perquè el x el valor va passar de -200 (px) a 0 (px). I l’opacitat va passar de 0 (invisible) a 1 (visible).

Ara tot el que necessiteu per animar el component Previsió dins i fora de la pantalla és canviar el showForecast de l’estat valor, i a mesura que ha canviat, spring i Motion animarà les propietats d'anada i tornada.

inicieu sessió al meu compte avast

Conclusió

Avui hem analitzat React Motion, una de les moltes biblioteques d’animació que hi ha, però que funciona especialment bé amb React. Altres grans biblioteques a examinar són popmotion.io , anime.js , gsap , i reacció-transició-grup .

#reactjs # desenvolupament web #javascript

www.youtube.com

Introducció a React Motion

Obteniu informació sobre com posar-vos en marxa amb React Motion per animar un element dins o fora de la pantalla basat en un valor de commutació de l'estat. React Motion és una biblioteca d’animació per a aplicacions React que facilita la creació i implementació d’animacions realistes.