Šiame straipsnyje apžvelgsime „React Spring“ – „JavaScript“ pagrindu sukurtą animacijos biblioteką. Pažiūrėsime į jo funkcijas, įskaitant įvairius siūlomus kabliukus ir komponentus, ir kaip juos panaudoti „React“ programose.
Animacijos koncepcija „React“ programose buvo nuolat besikeičiantis priekinės sistemos kūrimo aspektas. Iš pradžių „React“ animacijos buvo sukurtos naudojant CSS perėjimus ir animacijas, tačiau „React Applications“ vis sudėtingėjant, tapo akivaizdu, kad reikia galingesnių animacijos įrankių. Dėl to buvo sukurtos „JavaScript“ pagrindu sukurtos animacijos bibliotekos, tokios kaip „Framer Motion“, „Remotion“ ir „React Spring“. Kiekviena iš šių bibliotekų siūlo unikalias funkcijas ir galimybes kurti animacijas naudojant „React“.
Bendros žinios
Šiame straipsnyje daroma prielaida, kad turite šiuos dalykus:
„React Spring“ įvadas
Reaguokite pavasarį yra „JavaScript“ animacijos biblioteka, naudojama kuriant interaktyvias animacijas „React“ programose. Skirtingai nuo tradicinių CSS pagrindu sukurtų animacijų ar kitų „React“ animacijos bibliotekų, „React Spring“ naudoja fizikos pagrindu sukurtas animacijas, kurios imituoja realaus pasaulio judesius ir sukuria natūralesnį efektą.
Šios animacijos gali būti taikomos bet kuriai React komponentų nuosavybei, įskaitant padėtį, mastelį, neskaidrumą ir kt. Dėl to tai yra galingas įrankis kūrėjams, norintiems pagerinti savo „React“ programų naudotojo patirtį pasitelkiant patrauklią animaciją.
„React Spring“ nustatymas mūsų projekte
Norėdami animuoti mūsų „React“ projekto komponentus naudodami „React Spring“, turime atlikti šiuos veiksmus:
Atsisiųskite ir įdiekite „React Spring“ biblioteką. Tai galime padaryti naudodami
npm
arbayarn
:npm install react-spring
yarn add react-spring
Šios komandos įdiegs
react-spring
biblioteką ir jos priklausomybes į mūsų projekto katalogą.Įdiegę „React Spring“, turime importuoti reikiamus komponentus ir kabliukus į „React“ komponentus, kad pradėtume animuoti elementus. Tai galima pasiekti naudojant toliau nurodytus veiksmus sintaksė:
import { animated, (hook) } from 'react-spring'
Aukščiau pateiktame kodo fragmente iš „React Spring“ bibliotekos importuojame dvi priklausomybes (hook ir animacines). Štai kaip kiekvienas iš jų veikia ir kodėl juos reikia importuoti.
Animuoti
„React Spring“ programoje animated
vardų erdvėje pateikiamas komponentų rinkinys, naudojamas elementams animuoti mūsų programoje „React“. Jame pateikiamos animuotos standartinių HTML elementų versijos, pvz <div>
, <span>
ir <img>
. Šiuos animuotus elementus galima naudoti vietoj įprastų HTML elementų, todėl galime pritaikyti jiems animaciją naudojant „React Spring“ animacijos kabliukus.
Kabliukai
„React Spring“ pateikia keletą kabliukų, padedančių kurti animacijas „React“ komponentuose. Šie kabliukai supaprastina animacijų valdymo procesą ir palengvina jų integravimą į mūsų komponentus. Štai keletas pagrindinių „React Spring“ pateiktų kabliukų:
naudokite pavasarį. Tai dažniausiai naudojama daugeliu atvejų, nes sukuria vieną spyruoklinę animaciją, kuri pakeičia duomenis iš pradinės būsenos į kitą.
useTransition. Tai suaktyvina sąrašo elementų pridėjimą, pašalinimą arba pertvarkymą. Jis valdo elementų animacijos gyvavimo ciklą, kai jie patenka į DOM arba išeina iš jo, todėl užtikrina sklandų perėjimą tarp skirtingų sąrašo būsenų.
useTrail. Tai naudojama kuriant kelias pavasario animacijas, kurios sukuria „tako“ efektą, kai kiekvienas pavasaris seka arba takai už ankstesnio.
naudotiChain. Kaip ir grandinė, ji naudojama animacijų sekai apibrėžti, nurodant tvarką, kuria jos turėtų atsirasti.
naudokite spyruokles. Nors tai panašu į
useSpring
,useSprings
naudojamas kelių pavasario animacijų valdymui tuo pačiu metuuseSpring
valdo vieną pavasario animaciją.
Norėdami geriau suprasti, kaip tai veikia, pažvelkime į skirtingus animacijos stilius, kuriuos galime pasiekti naudodami kiekvieną iš šių kabliukų.
„useSpring“ naudojimas animacijai kurti
The useSpring
hook in React Spring yra naudojamas kuriant animacijas naudojant pavasario fiziką. Tai leidžia mums apibrėžti animacijos pradžios ir pabaigos taškus ir naudoja savo biblioteką perėjimui tarp jų valdyti. Pavyzdžiui:
const props = useSpring({
opacity: 1,
from: { opacity: 0 }
});
Šiame pavyzdyje sukūrėme funkciją, kuri pakeičia elemento neskaidrumą nuo 0 iki 1. Šią funkciją galima iškviesti įvairiuose elementuose, atsižvelgiant į mūsų animacijos efektus. Pažvelkime į veiksmus, kurių reikia imtis naudojant useSpring
kabliukas animacijai kurti…
Pirmiausia importuokite animacijai reikalingas priklausomybes:
import { useSpring, animated } from "react-spring";
Tada turime apibrėžti komponentą ir naudoti useSpring
kabliukas animacinėms vertybėms kurti. The useSpring
Hook priima du pagrindinius argumentus:
Konfigūracijos objektas. Tai apibrėžia mūsų animacijos savybes, įskaitant:
- iš: pradinė animacinės reikšmės būsena (pvz., neskaidrumas: 0)
- į: tikslinė animacinės reikšmės būsena (pvz., neskaidrumas: 1)
- konfigūracija (neprivaloma): objektas, skirtas tiksliai sureguliuoti spyruoklės fizinį elgesį (pvz., masę, įtempimą, trintį)
Atgalinio skambinimo funkcija (neprivaloma). Galime naudoti funkciją, kad sukurtume dinaminę konfigūraciją, pagrįstą rekvizitais ar duomenimis.
Kuriant a useSpring
animaciją galima pasiekti naudojant du skirtingus metodus: naudojant objekto literalą ir naudojant funkcijos parametrą.
Naudojant objektinį literalą
Mes galime apibrėžti objektą su savybėmis, kurias norime pagyvinti, pvz opacity
arba color
ir perduokite jį į useSpring
kabliukas. Šis metodas leidžia mums tiesiogiai nurodyti tikslines animacijos reikšmes.
Norėdami paaiškinti, kaip tai veikia, sukurkime paprastą komponentą, kuris pagyvina elemento neskaidrumą:
import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';
function App() {
const [isVisible, setIsVisible] = useState(false);
const opacityAnimation = useSpring({
opacity: isVisible ? 1 : 0,
config: {
tension: 200,
friction: 20
}
});
const toggleVisibility = () => setIsVisible(!isVisible);
return (
<div>
<button onClick={toggleVisibility} aria-label={isVisible ? 'Hide' : 'Show'}>
{isVisible ? 'Hide' : 'Show'}
</button>
<animated.div style={opacityAnimation}>
This text will fade in and out with spring physics.
</animated.div>
</div>
);
}
export default App;
Šiame kodo fragmente sukuriame mygtuką, kuris spustelėjus perjungia tam tikro teksto matomumą. Tai daroma naudojant du kabliukus, useState
ir useSpring
.
Tai naudoja useState
Norėdami patikrinti, ar tekstas matomas, ar ne, ir sukuria animaciją, kuri keičia teksto neskaidrumą pagal sąlygą:
opacity: isVisible ? 1 : 0
Tai suteikia animacijos efektą, kai paspaudžiamas mygtukas, kuris iškviečia toggleVisibility()
funkcija paspaudžiama.
Funkcijos parametro naudojimas
Arba galime perduoti funkciją į useSpring
kabliukas. Ši funkcija gauna ankstesnes animacines reikšmes ir grąžina objektą su atnaujintomis animacijos reikšmėmis. Tai suteikia mums daugiau galimybių valdyti, kaip animacija elgiasi laikui bėgant:
const opacityConfig = {
tension: 300,
friction: 40,
};
const opacityAnimation = useSpring(() => ({
opacity: isVisible ? 1 : 0,
config: opacityConfig,
}));
Taikant šį metodą, konfigūracija (įtempimas ir trintis) išskiriama į atskirą objektą – opacityConfig
– ir tai suteikia daugiau lankstumo dinaminiam valdymui, pagrįstam būsena ar rekvizitais.
Sąrašo elementų animavimas naudojant useTransition
UseTransition
yra „React Spring“ kabliukas, kuris animuoja elementus masyvuose, kai jie pridedami arba pašalinami iš DOM. Tai ypač naudinga kuriant sklandžią animaciją sąrašuose ar modaluose. Norėdami tai padaryti, jis priima galimų konfigūracijų sąrašą:
from
apibrėžia pradinius elementų, patenkančių į DOM, stilius.enter
nurodo stilius, kuriuos reikia animuoti, kai pridedami elementai. Mes galime sukurti kelių žingsnių animaciją, pateikdami objektų masyvą.leave
nustato stilius, taikomus, kai elementai pašalinami iš DOM.update
valdo, kaip animuoti esamų elementų pakeitimus.key
leidžia mums aiškiai apibrėžti unikalų kiekvieno elemento raktą. Tai leidžia apibrėžti konkrečias atskirų elementų animacijas.from
irto
su perėjimais: juos galima naudoti vidujeenter
,leave
irupdate
sudėtingesnėms animacijoms su pradžios ir pabaigos būsenomis, apibrėžtomis atskirai.
Norėdami parodyti, kaip useTransition
veikia, sukurkime komponentą, kuris prideda ir pašalina elementus iš masyvo:
import React, { useState } from "react";
import { useTransition, animated } from "react-spring";
function App() {
const [items, setItems] = useState([]);
const addItem = () => {
const newItem = `Item ${items.length + 1}`;
setItems([...items, newItem]);
};
const removeItem = () => {
if (items.length === 0) return;
const newItems = items.slice(0, -1);
setItems(newItems);
};
const transitions = useTransition(items, {
from: { opacity: 0, transform: "translate3d(0, -40px, 0)" },
enter: { opacity: 1, transform: "translate3d(0, 0, 0)" },
leave: { opacity: 0, transform: "translate3d(0, -40px, 0)" },
});
return (
<div className="transitionDiv">
<div>
<button onClick={addItem}>Add Item</button>
<button onClick={removeItem}>Remove Item</button>
</div>
<div className="transitionItem">
{transitions((style, item) => (
<animated.div style={style} className ='list'>{item}</animated.div>
))}
</div>
</div>
);
}
export default App;
Šiame pavyzdyje mes turime App
komponentas, valdantis elementų sąrašą. Jame yra mygtukai, leidžiantys dinamiškai įtraukti arba pašalinti elementus iš sąrašo. Kai Pridėti daiktą Paspaudus mygtuką, į masyvą įtraukiamas naujas elementas, o kai Pašalinti daiktą Paspaudus mygtuką, paskutinis elementas pašalinamas iš masyvo.
The useTransition
kabliukas naudojamas masyvo elementų perėjimams valdyti. Kai masyvas pasikeičia (dėl elementų pridėjimo ar pašalinimo), useTransition
tvarko tų pakeitimų animacijas pagal nurodytą konfigūraciją (apibrėžia from
, enter
ir leave
savybės).
Animuoti masyvai be pakeitimų
Jei pačiame masyve nėra dinaminių pakeitimų, pvz., elementų pridėjimo ar pašalinimo, useTransition
vis tiek gali būti naudojamas kiekvienam masyvo elementui animuoti. Pavyzdžiui:
import { useTransition, animated } from "@react-spring/web";
import "./App.css";
const name = "Product1";
const name1 = "Product2";
const name2 = "Product3";
function App({ data = [name, name1, name2] }) {
const transitions = useTransition(data, {
from: { scale: 0 },
enter: { scale: 1 },
leave: { scale: 0.5 },
config: { duration: 2500 },
});
return transitions((style, item) => (
<div className="nameBody">
<animated.div style={style} className="nameDiv">
{item}
</animated.div>
</div>
));
}
export default App;
Šiame pavyzdyje App
komponentas pateikia elementų sąrašą ir pritaiko animaciją kiekvieną kartą, kai įkeliamas puslapis.
Nuosekliųjų animacijų kūrimas naudojant „useTrail“.
The useTrail
animacija naudojama kuriant animuotų perėjimų seriją UI elementų grupei arba sąrašui.
Skirtingai nuo tradicinių animacijos metodų, kurie animuoja elementus atskirai, useTrail
leidžia animuoti elementus vieną po kito ir taip sukurti „takų“ efektą. Paprastai tai naudojama kuriant dinaminius sąrašus, vaizdų galerijas, puslapių perėjimus ar bet kokį scenarijų, kai elementus reikia animuoti nuosekliai.
Štai pagrindinė sintaksės struktūra:
const trail = useTrail(numberOfItems, config, [trailOptions]);
Išskaidykime tai:
numberOfItems
. Tai yra būtinas skaičius, nurodantis, kiek elementų norime pagyvinti „takelyje“.config
. Tai objektas, apibrėžiantis animacijos ypatybes kiekvienam takelio elementui. Kiekvienas objekto raktas reiškia animacijos ypatybę ir jos vertė gali būti pagrįsta mūsų numatyta animacija. Pavyzdžiui:from: { opacity: 0, transform: 'translateX(50%)' }, to: { opacity: 1, transform: 'translateX(0)' }, transition: { duration: 500, easing: 'easeInOutCubic', },
trailOptions
(neprivaloma). Tai yra daugybė papildomų tako parinkčių. Kai kurios įprastos parinktys:trailKey
: funkcija, skirta generuoti unikalius raktus kiekvienam pėdsakų elementui (naudinga reagavimo suderinimui).reset
: funkcija, skirta iš naujo nustatyti visas pėdsako animacijas.
Pažiūrėkime, kaip tai veikia:
import React, { useState, useEffect } from "react";
import { useTrail, animated } from "react-spring";
function App() {
const [items, setItems] = useState([
{ id: 1, content: "This is a div illustrating a trail animation" },
{ id: 2, content: "This is a div illustrating a trail animation" },
{ id: 4, content: "This is a div illustrating a trail animation" },
{ id: 5, content: "This is a div illustrating a trail animation" },
]);
[]);
const trail = useTrail(items.length, {
from: { opacity: 1, transform: "translateY(0px)" },
to: { opacity: 0, transform: "translateY(100px)" },
delay: 400,
duration: 2000,
});
return (
<div className="container">
{trail.map((props, index) => (
<animated.div key={items[index].id} style={props} className="item">
{items[index].content}
</animated.div>
))}
</div>
);
}
export default App;
Aukščiau esančiame kodo fragmente sukuriame a CardCarousel
komponentas, kuris naudoja useTrail
kabliukas, kad sukurtumėte animacijų seką kiekvienai kortelių karuselei pagal masyvo elementų ilgį.
Pastaba: norėdami sužinoti daugiau apie useEffect
kabliukas, patikrink React useEffect supratimas.
const trail = useTrail(items.length, {
from: { opacity: 1, transform: "translateY(0px)" },
to: { opacity: 0, transform: "translateY(100px)" },
delay: 400,
duration: 2000,
});
Čia ji apibrėžia pradinę ir galutinę animacijos būsenas (nuo ir iki), taip pat perėjimo konfigūraciją (trukmė ir palengvinimas), kuri turi įtakos animacijos rodymo būdui.
Kiekvienos kortelės atvaizdavimas
Norėdami pateikti kiekvieną kortelę, komponentas grąžina a <div>
su klase card-carousel
ir žemėlapiai virš maršruto masyvo, kad būtų pateikta kiekviena animuota kortelė. Tada kiekviena kortelė suvyniojama į animated.div
komponentas, taikantis animuotus stilius (nepermatomumą ir transformaciją), apibrėžtus useTrail
kabliukas:
return (
<div className="container">
{trail.map((props, index) => (
<animated.div key={items[index].id} style={props} className="item">
{items[index].content}
</animated.div>
))}
</div>
);
Animacijos sekų įvaldymas naudojant „useChain“.
Skirtingai nuo atskirų animacijų, useChain
naudojamas susieti kelias animacijas ir nustato iš anksto nustatytų animacijų vykdymo seką. Tai ypač naudinga kuriant dinamines vartotojo sąsajas, kur elementus reikia animuoti vienas po kito.
Pažiūrėkime į sintaksę.
useChain
priima animacijos nuorodų masyvą ir pasirenkamą konfigūracijos objektą. Kiekviena animacijos nuoroda reiškia atskirą animaciją ir jos vykdomos tokia tvarka, kokia yra masyve. Taip pat galime nurodyti kiekvienos animacijos delsą, kad galėtume valdyti sekos laiką naudodami šią sintaksę:
useChain([ref1, ref2, ref3], { delay: 200 });
Norėdami parodyti, kaip tai veikia, sukurkime komponentą, kuris taiko dvi animacijas skirtingiems elementams ir valdo animacijas naudodami useChain
:
import "./App.css";
import React, { useRef } from "react";
import {
useTransition,
useSpring,
useChain,
animated,
useSpringRef,
} from "react-spring";
const data = ["", "", "", ""];
function App() {
const springRef = useSpringRef();
const springs = useSpring({
ref: springRef,
from: { size: "20%" },
to: { size: "100%" },
config: { duration: 2500 },
});
const transRef = useSpringRef();
const transitions = useTransition(data, {
ref: transRef,
from: { scale: 0, backgroundColor: "pink" },
enter: { scale: 1, backgroundColor: "plum" },
leave: { scale: 0, color: "pink" },
config: { duration: 3500 },
});
useChain([springRef, transRef]);
return (
<animated.div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "400px",
width: springs.size,
background: "white",
}}
>
{transitions((style, item) => (
<animated.div
style={{
width: "200px",
height: "200px",
display: "flex",
justifyContent: "center",
alignItems: "center",
textAlign: "center",
marginLeft: "50px",
color: "white",
fontSize: "35px",
borderRadius: "360px",
...style,
}}
className="products"
>
{item}
</animated.div>
))}
</animated.div>
);
}
export default App;
Aukščiau pateiktame kode kuriame dvi skirtingas animacijas, naudodami useString
ir useTransition
ir naudojant useChain
valdyti įvairias animacijas:
useChain([springRef, transRef]);
Kelių animacijų kūrimas naudojant useSprings Hook
Kaip minėjome anksčiau, useSprings
yra naudojamas kuriant kelias pavasario animacijas vienu metu, ir kiekviena iš šių animacijų turi savo konfigūracijas. Tai leidžia mums nepriklausomai animuoti kelis elementus ar savybes tame pačiame komponente. Pavyzdžiui:
import { useSprings, animated } from "@react-spring/web";
function App() {
const [springs, api] = useSprings(
3,
() => ({
from: { scale: 0, color: "blue" },
to: { scale: 1, color: "red" },
config: { duration: 2500 },
}),
[]
);
return (
<div>
{springs.map((props) => (
<animated.div style={props} className="springsText">
_______
</animated.div>
))}
</div>
);
}
export default App;
Šiame pavyzdyje useSprings
valdo pavasarinių animacijų masyvą, kurių kiekviena reprezentuoja vieno elemento animaciją elementų masyve. Kiekvienas sąrašo elementas yra susietas su spyruoklės konfigūracija, kuri apibrėžia pradines ir tikslines spalvų ir mastelio ypatybių reikšmes. Tada „React Spring“ suaktyvina kiekvieną elementą pagal atitinkamą konfigūraciją.
Išvada
„React Spring“ yra galinga animacijos biblioteka, kuri leidžia kurti nuostabias ir interaktyvias animacijas „React“ programose. Kaip matėme, šios animacijos gali būti pritaikytos įvairiems mūsų projektų elementams.
Išnaudodami „React Spring“ funkcijas, galime pasiekti sklandesnių perėjimų, natūralesnių efektų ir daugiau valdyti savo animacijas.