Innhold
- 01. Installer avhengigheter
- 02. Generer bilder i tilstand
- 03. Vis hvert bildekort
- 04. Legg til kortstruktur
- 05. Bruk sveverstiler
- 06. Sett skygge som standard
- 07. Hold valgt tilstand
- 08. Definer flip-animasjonen
- 09. Konverter til animert container
- 10. Animer frontkortet
- 11. Animer bakkortet
- 12. Interpolere verdiene
- 13. Bytt tilstand ved klikk
- 14. Juster kortets fysikk
- 15. Lag vår for vippeeffekt
- 16. Bruk vippestiler
- 17. Sett verdier når musen beveger seg
- 18. Beregn animasjonsverdier
- 19. Vis stjernerangering
- 20. Lag stjerneanimasjon
- 21. Påfør stjerner på komponenten
React Spring kan hjelpe deg med animasjoner som er kjent som vanskelig å implementere på nettet. CSS-animasjoner er det beste valget, men å skape et jevnt resultat krever nøye sjonglering av klasser, varigheter og arrangementer. Å kaste et JavaScript-rammeverk som React i blandingen kompliserer bare tingene ytterligere.
For animasjoner som er avhengige av brukerinteraksjon, kan verdier beregnes via JavaScript og brukes på et element direkte. Ved å følge denne manuelle tilnærmingen, må vi beregne og bruke vår egen lettelse for å få animasjonen til å se mer naturlig ut.
React Spring er et bibliotek som er bygget for å håndtere mange vanlige hang-ups når det gjelder animasjon på nettet. Det tar en litt annen tilnærming, ved å fokusere på fysikk over rette varigheter og definerte lettelsesfunksjoner. Dette bidrar til å holde ting glatt og naturlig.
Mens det meste av tiden brukes til visuelle effekter, vil biblioteket bytte mellom to verdier, uavhengig av om denne verdien noen gang blir brukt til en stil eller ikke. For eksempel kan den brukes til å telle opp et antall påmeldinger for å understreke hvor stort et samfunn er.
I denne opplæringen skal vi lage en kortkomponent som lar brukerne rangere bilder. Kortet vender for å avsløre en stjernevurdering, og brukere kan klikke for å legge til sine egne. Vi vil bruke React Springs nyere implementering av kroker, som krever React versjon 16.8 eller nyere. Last ned opplæringsfilene her før du begynner (og sikkerhetskopier dem i skylagring).
Hvis du vil bygge et nettsted uten komplekse kodeprosesser, bruk en anstendig nettstedsbygger. Og sørg for å utforske alternativer for webhotell også.
01. Installer avhengigheter
Når filene er lastet ned, må avhengigheten av pakken installeres før vi kan starte. Dette Create React App-baserte prosjektet inkluderer reagerer-våren pakken og alle nødvendige lokale serveroppsett som trengs for å komme i gang.
På kommandolinjen, finn prosjektfilene og installer dem, og kjør dem deretter.
02. Generer bilder i tilstand
Først trenger vi noen bilder for å rangere. For denne opplæringen skal vi hardkode noen bilder til applikasjonstilstanden, men disse dataene kan komme fra hvilken som helst kilde. Åpne App.js og lag noen bilder med useState krok fra React. Dette vil gi hvert bilde en første vurdering vi kan vise og oppdatere senere.
const [cards] = useState ([createImage (image1), createImage (image2), createImage (image3)]);
03. Vis hvert bildekort
Ettersom bildene er lagret i en matrise, kan vi løpe over den tilstanden og lage separate komponenter for hver. Animasjonslogikken for React Spring vil leve inne i en RatingsCard /> komponent som vi kan bruke hvor som helst vi trenger.
Inne i gjengivelsesmetoden til App.js, opprett en kopi av komponenten for hvert kort i delstatssamlingen. Den vil motta alle verdier i staten, inkludert bildet og den første vurderingen.
{cards.map ((card, index) => (RatingsCard key = {index} {... card} />))}
04. Legg til kortstruktur
Før vi kan legge til animasjonen, trenger kortet noe innhold. Hvert kort har front og bakside, som er implementert som separate div> elementer lagd oppå hverandre.
Åpen RatingsCard / index.js, og legg til kortstrukturen. Vi må bruke bildet som bakgrunn på frontkortet, med baksiden som til slutt inneholder karakteren.
div className = "RatingsCard"> div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`}} /> div className = "RatingsCard__back" /> / div>
05. Bruk sveverstiler
Alle stiler som ikke oppdateres direkte gjennom animasjonene våre, kan brukes gjennom CSS. Dette inkluderer den grunnleggende 3D-skyggeeffekten for hvert kort når den holdes over. Innsiden RatingsCard / style.css, legg til noen ekstra stiler for å få kortet til å hoppe ut av siden mens du holder markøren ved å bruke et filter.
.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. Sett skygge som standard
En plutselig skygge på svev er en skurrende opplevelse. Vi bør derfor sakte gå over mellom stater for å holde ting glatt. Legg til en subtilere skygge for kortet når du ikke blir svevet over det. Bruke overgang eiendom å animere mellom de to statene.
.RatingsCard {[...] filter: drop-shadow (0 3px 6px rgba (0, 0, 0, 0.16)) drop-shadow (0 3px 6px rgba (0, 0, 0, 0.1)); overgang: filter 0,5s; }
07. Hold valgt tilstand
Vi må lagre og oppdatere informasjon om hvilken side av kortet som vender opp. Vi kan bruke React's innebygde useState krok for å definere en startverdi, og den får den tilbake gjeldende verdi og en metode for å oppdatere den.
Ved starten av VurderingerKort komponentfunksjon, opprett definer dette valgt stat.
const [selected, setSelected] = useState (false);
08. Definer flip-animasjonen
React Spring er ansvarlig for å overføre tall mellom en verdi og en annen. Dette kan gjøres med en fjær og useSpring krok. Vi gir det litt oppsettinformasjon, og den returnerer et sett med verdier som oppdateres i henhold til fysikkberegningene.
Lag en vår for flip-animasjonen. Denne vil falme og rotere et kort, avhengig av om kortet er i valgt stat.
const {opacity, transform} = useSpring ({opacity: valgt? 1: 0, transform: `rotateY ($ {valgt? 180: 0} deg)`});
09. Konverter til animert container
Objektene returnerte av useSpring definere animasjonen deres, men ikke oppgi de numeriske verdiene vi trenger. De animert fabrikkfunksjonen fordøyer denne informasjonen og leverer deretter verdiene som tall til komponentene.
Konverter VurderingerKort element for å bruke animert funksjon. De animert. div syntaks forteller funksjonen å returnere a div>.
animated.div className = "RatingsCard"> animated.div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`}} /> animated.div className = "RatingsCard__back" /> /animated.div >
10. Animer frontkortet
React Spring animerer bare verdiene og gjør ikke noen animasjon av selve elementene. Vi kan koble disse verdiene til en stilstøtte og lage den animasjonen på farten. Oppdater frontkortet for å bruke det nye opasitet og forvandle verdier. I dette tilfellet må vi interpolere opasitetsverdien, som vi snart vil ta opp.
animated.div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`, opacity: opacity.interpolate (inverseOpacity), transform}} />
11. Animer bakkortet
Når du vender på kortet, må animasjonen vi bruker på det ene ansiktet, brukes motsatt på det andre. Når de spilles sammen, vil de se ut som om de beveger seg som ett stykke.
I dette tilfellet må vi bruke de samme stilene på bakkortet, men interpolere denne gangen forvandle verdi i stedet.
animated.div className = "RatingsCard__back" style = {{opacity, transform: transform .interpolate (inverseTransform)}} />
12. Interpolere verdiene
I stedet for å bruke verdier direkte på CSS-egenskaper, kan vi bruke en slags funksjon på dem, for å kartlegge verdien til en annen. Denne prosessen kalles interpolasjon.
Definer et par interpolasjonsfunksjoner mot toppen av RatingsCard / index.js. Disse gjelder det motsatte av både opasitet og transformasjonsanimasjoner når du velger eller fjerner valget.
const inverseOpacity = o => 1 - o; const inverseTransform = t => `$ {t} roterY (180deg)`;
13. Bytt tilstand ved klikk
Vendingen av kortet skal knyttes til et klikk. Som den valgt tilstandsverdi bestemmer hvilket ansikt som er synlig, bør vi bytte den tilstanden når vi klikker på kortet.
Legg til en klikkelytter til det ytre VurderingerKort element. Når dette skjer, vil den veksle mellom den boolske verdien som holdes i tilstanden.
animated.div className = "RatingsCard" onClick = {() => setSelected (! valgt)}>
14. Juster kortets fysikk
Akkurat nå fungerer animasjonen vår, men det virker mer som en flottør enn en flipp. Vi kan endre noen verdier på hver vår for å endre hvordan den oppfører seg. Inne i oppsettobjektet for våren, opprett en config mot å redusere friksjonen og øke spenningen. Dette vil gi animasjonen en snappere følelse.
useSpring ({config: {friksjon: 22, spenning: 500}, [...]});
15. Lag vår for vippeeffekt
Mens CSS-drevet sveveeffekt fra tidligere gir noen tilbakemeldinger, kan vi forbedre det ytterligere ved å ha en vippende animasjon som reagerer på markørposisjonen. Når du oppdaterer en fjær med høy frekvens, for eksempel en musebevegelse, kan vi få bedre ytelse ved å bruke sett funksjon som blir returnert hver vår. Lag en ny vår for denne animasjonen og hold tak i den returnerte funksjonen.
const [rekvisitter, sett] = useSpring (() => ({tilstand: [0, 0, 1]}));
16. Bruk vippestiler
React Spring kan animere mange forskjellige typer verdier, som inkluderer matriser. Når vi lagrer verdiene våre i ett utvalg, kan vi interpolere dem alle på forvandle eiendom i ett pass.
Lage en transformCard interpolasjonsfunksjon og bruke stilene til hovedtemaet VurderingerKort element.
const transformCard = (x, y, scale) => `perspektiv (1000px) rotateX ($ {x} deg) roterY ($ {y} deg) skala ($ {skala})`; [...] animated.div className = "RatingsCard" onClick = {() => setSelected (! selected)} style = {{transform:! selected && props.state.interpolate (transformCard)}}>
17. Sett verdier når musen beveger seg
Mushendelser gir koordinatene til markøren på det tidspunktet. Vi er interessert i klientkoordinatene for å få markørposisjonen i visningsområdet. Legg til musebevegelse og la hendelser til det ytre div>. Vi sender koordinatene til en funksjon under bevegelse og tilbakestiller til standardverdiene når markøren forlater div>.
onMouseLeave = {() => sett ({state: [0, 0, 1]})} onMouseMove = {({clientX: x, clientY: y}) => sett ({state: calcValues (x, y)} )}
18. Beregn animasjonsverdier
Vi vil bare ha en liten vipp for å unngå at kortet beveger seg for mye når brukeren kommuniserer med det. De calculeValues funksjonen vil utarbeide siden av skjermen markøren er på og vippe den mot den retningen.
Opprett funksjonen for å fylle ut disse verdiene. Ved å dele på 40 reduseres tiltningseffekten for å gjøre den mer brukbar. Den endelige verdien vil visuelt øke kortet fra skjermen.
const calculeValues = (x, y) => [- (y - window.innerHeight / 2) / 40, (x - window.innerWidth / 2) / 40, 1.1];
19. Vis stjernerangering
Hvert bilde har en vurdering som vi må vise i stjerner på baksiden av kortet. Denne logikken holdes inne i sin egen komponent, men den må brukes på baksiden først.
Først oppretter du et nytt stykke stat for å ha karakteren, og oppretter deretter et StarRating> komponent inne på baksiden div>.
const [currentRating, setRating] = useState (vurdering); [...] {valgt && (StarRating-rangering = {currentRating} setRating = {setRating} />)}
20. Lag stjerneanimasjon
Stjerneklassifiseringen vil falme inn når kortet har snudd. Ved å bruke useTrail krok fra React Spring, kan vi bruke fjærer på flere komponenter, den ene etter den andre.
Åpne opp StarRating / index.js og legg til kroken. Det første argumentet vil definere antall fjærer å lage.
const animatedStars = useTrail (5, {config: {friksjon: 22, spenning: 500}, fra: {opacity: 0, transform: "scale (0.8)"}, opacity: 1, transform: "scale (1)"} );
21. Påfør stjerner på komponenten
Det siste vi trenger å gjøre er å faktisk vise stjernene. De animatedStars variabel inneholder nå en rekke fjærer, som vi kan gjenta og bruke på kortet.
Vis en for hver stjerne AnimatedStar> komponent inne i hoveddelen StarRating div. Spred stilrekvisittene for å bruke alle effektene på hver komponent. Når du klikker, send den nye vurderingen til foreldrene RatingCard> komponent.
{animatedStars.map ((rekvisitter, indeks) => (AnimatedStar active = {index + 1 = rating} onClick = {e => {e.stopPropagation (); setRating (index + 1);}} key = {index} stil = {{... rekvisitter}} />))}
Denne artikkelen ble opprinnelig publisert i kreativt magasin for webdesignWebdesigner.Kjøp utgave 288 eller abonnere.
