Hogyan kell használni a React Rugót az összetevők animálásához

React Spring segíthet animációkban, amelyek hírhedten trükkösek az interneten való megvalósításhoz. CSS animációk A legjobb választás, de zökkenőmentes eredményt hoz létre, óvatos zsonglőrködik az osztályok, a sorozatok és az események. Dobott a JavaScript keretrendszer Mint a keverékbe való reagálás csak bonyolítja a dolgokat.

A felhasználói interakcióra támaszkodó animációkhoz az értékeket a JavaScript segítségével lehet kiszámítani, és közvetlenül egy elemre kell alkalmazni. Ezzel a kézi megközelítéssel ki kell számolnunk és alkalmaznánk saját lazításunkat, hogy az animáció természetesebbé váljon.

Reagál vkinek Olyan könyvtár, amely arra épül, hogy megoldja a sok közös tárcsát, amikor az animáció az interneten. Enyhén eltérő megközelítést igényel, a fizikára összpontosítva az egyenes időtartamra és a meghatározott lazítási funkciókra. Ez segít megőrizni a dolgokat sima és természetes.

Míg a legtöbb időt ezt használják a vizuális hatások, a könyvtár átmenet két érték között, függetlenül attól, hogy az érték már használják a stílus, vagy sem. Például felhasználható számos feliratkozás számítására, hogy hangsúlyozzák, milyen nagy a közösség.

Ebben a bemutatóban egy kártyaösszetevőt fogunk létrehozni, amely lehetővé teszi a felhasználók számára, hogy értékeljék a képeket. A kártya feltárja a csillag minősítést, és a felhasználók a saját hozzáadásához kattinthatnak. A React Spring újabb horgok megvalósítását használjuk, amely 16,8 vagy annál magasabb verziót igényel. Mielőtt elkezded, Töltse le a bemutató fájlokat itt (és vissza őket felhő tároló ).

Ha összetett kódfolyamatok nélküli webhelyet szeretne építeni, akkor tisztességes weboldal építője . És győződjön meg róla, hogy felfedezi web hosting Opciók is.

01. Telepítse a függőséget

A letöltött fájlok segítségével a csomag függőségeit telepíteni kell, mielőtt elkezdhetnénk. Ez a létrehozása React App-alapú projekt magában foglalja a reagálórugó A csomag és az összes szükséges helyi kiszolgáló, amely az induláshoz szükséges.

A parancssorban keresse meg a projektfájlokat és telepítse, majd futtassa őket.

 & gt; fonal
& gt; fonal indítása 

02. Képek létrehozása az államban

Először is szükségünk van néhány képre. Ehhez a bemutatóhoz keményen kódolunk néhány képet az alkalmazási állapotba, de ezek az adatok bármilyen forrásból származhatnak. Nyissa meg az App.js-t, és hozzon létre néhány képet a átad Hook a reakcióból. Ez az egyes képeket egy kezdeti minősítéssel fogja megjeleníteni és frissíthetjük később.

 CONST [kártyák] = usestate ([
createimage (image1),
CreateImage (Image2),
CreateImage (Image3)
]); 

03. Minden képkártya megjelenítése

Mivel a képek egy tömbben tárolódnak, akkor az adott állapot föléha, és külön komponenseket hozhatunk létre. A React Spring animációs logikája a & lt; ratingscard / & gt; összetevő, amit bárhol használhatunk.

Az App.js renderelési módján belül hozzon létre egy összetevő másolatát az egyes kártyákhoz az állami tömbben. Minden értéket kap az államban, beleértve a képet és a kezdeti minősítést.

 {CARDS.MAP ((kártya, index) = & gt; (
& lt; ratingscard kulcs = {index} {... kártya} / & gt;
)))} 

04. Kártya szerkezet hozzáadása

Mielőtt hozzáadnánk az animációt, a kártyanak szüksége van néhány tartalomra. Minden kártya rendelkezik egy elülső és hátul, amelyek különállóak & lt; div & gt; az egymás tetejére rétegelt elemek.

Nyisd ki RATINGSCARD / INDEX.JS , és adja hozzá a kártya szerkezetét. A képet az elülső kártyához tartozó háttérként kell alkalmazni, a hátul végül a minősítést tartalmazza.

 & lt; div osztálynév = "RatingsCard" & gt;
& lt; div
CLASSNAME = "RATINGSCARD__FRONT"
Stílus = {{
Háttérképek: `URL ($ {image})`
}}
/ & gt;
& lt; div classname = "ratingscard__back" / & gt;
& lt; / div & gt; 

05. Hover stílusok alkalmazása

Bármely olyan stílus, amely nem közvetlenül az animációinkon keresztül frissíthető CSS-en keresztül. Ez magában foglalja az egyes kártyák alapvető 3D árnyékhatását, ha lebegett. Belül RATINGSCARD / STYLE.CSS , Adjon hozzá néhány extra stílusot, hogy a kártya kiugrjon az oldalról a szűrő alkalmazásával.

 .RatingsCard: Hover {
Szűrő: Drop-Shadow (0 14px 28px
RGBA (0, 0, 0, 0.25))))
Drop-Shadow (0 10px 10px
 RGBA (0, 0, 0, 0.1);
} 

06. Állítsa be az árnyékot alapértelmezés szerint

A hover hirtelen árnyéka egy őrrök élmény. Ezért lassan átállnunk az államok között, hogy a dolgokat sima. Adjon hozzá egy altler drop-árnyékot a kártyához, ha nem lebegett. Használja a átmenet a két állam között animálni.

 .Ratingscard {
[...]
Szűrő: Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0.16)))
Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0.1);
Átmenet: 0,5-es szűrő;
} 

07. Tartsa lenyomva a kiválasztott állapotot

Tárolnunk kell és frissítenünk az információkat arról, hogy a kártya melyik oldala felé néz. Használhatjuk a reakciók beépített átad Hook, hogy meghatározza a start értéket, és visszaállítja az aktuális értéket és egy módot, hogy frissítse.

A Ratingscard Komponens funkció, hozzon létre ezt kiválasztott állapot.

 CONST [Kiválasztott, SetSelected]
 = usestate (FALSE); 

08. Határozza meg a flip animációt

React Ruge felelős az egyérték és a másik közötti számok átállásért. Ezt tavasszal és a tavasszal lehet elvégezni felhasználás horog. Bizonyos beállítási információkat adunk meg, és visszaadja a Fizikai számítások szerint frissített értékeket.

Hozzon létre egy rugót a flip animációhoz. Ez elhalványul és elforgatja a kártyát attól függően, hogy a kártya van-e kiválasztott állapot.

 CONST {Opacity, Transform}
 = felhasználás ({
Opacity: Kiválasztott? 1: 0,
Átalakítás: `Rotatey (
$ {kiválasztott? 180: 0} Deg) `
}); 

09. Konvertálja az animált tartályba

Az objektumok visszatértek felhasználás Határozza meg animációjukat, de ne adja meg a szükséges számértékeket. A élénk A gyári funkció megemészti ezt az információt, majd az értékeket a komponensekhez adja.

Konvertálja a Ratingscard Elem a élénk funkció. A Animated.div A Syntax elmondja a funkciót, hogy visszatérjen a & lt; div & gt; .

 & lt; animated.div classname = "RatingsCard" & gt;
& lt; animated.div
CLASSNAME = "RATINGSCARD__FRONT"
Stílus = {{
Háttérképek: `URL ($ {image})`
}}
/ & gt;
& lt; animated.div classname =
"Ratingscard__back" / & gt;
& lt; /animated.div> 

10. Az elülső kártya animálása

React rugó csak animálja az értékeket, és nem tesz semmilyen elem elemét. Ezeket az értékeket egy stílushoz kapcsolódhatjuk, és létrehozhatjuk az animációt a repülés során. Frissítse az első kártyát az új használatához átlátszatlanság és átalakít értékek. Ebben az esetben meg kell vetnünk az átlátszatlanság értékét, amelyet hamarosan fogunk foglalkozni.

 & lt; animated.div
CLASSNAME = "RATINGSCARD__FRONT"
Stílus = {{
Háttérkép: `URL ($ {image})`,
Opacity: Opacity.interPolate (
verseSopacity),
átalakít
}}
/ & gt; 

11. A hátlap animálása

A kártya megfordításakor bármilyen animációt alkalmazunk, amelyet egy arcra alkalmazunk, vissza kell fordítani a másikra. Amikor együtt játszanak, úgy néz ki, mintha egy darabként mozognak.

Ebben az esetben ugyanazokat a stílusokat kell alkalmaznunk a hátsó kártyára, de ezúttal interpoláljuk a átalakít érték helyett.

 & lt; animated.div
classname = "ratingscard__back"
Stílus = {{
átlátszatlanság,
Átalakítás: átalakítás
.interpolate (Inversetransform)
}}
/ & gt; 

12. Interpolálja az értékeket

Ahelyett, hogy közvetlenül alkalmaznánk az értékeket a CSS tulajdonságaihoz, akkor valamilyen funkciót alkalmazhatunk számukra, annak érdekében, hogy értéküket egy másikra térképezzük. Ezt a folyamatot interpolációnak nevezik.

Határozza meg néhány interpolációs funkciót a tetején RATINGSCARD / INDEX.JS . Ezek mind az átirányítás, mind az animációk visszirányát alkalmazzák, amikor kiválasztják vagy megszüntetik.

konstruktúra = o = & gt; 1 - O;
CONST INVERSETRANSFORM = T = & GT;
 `$ {t} rotatey (180deg)`; 

13. Átkapcsolás állapotra kattintva

A kártyát a kattintáshoz kell kötni. Mint a kiválasztott Az állami érték meghatározza, hogy melyik arc látható, átkapcsolunk ezt az állapotot a kártya kattintásakor.

Adjon hozzá egy kattintási hallgatót a külsőre Ratingscard elem. Amikor ez megtörténik, átkapcsolja az államban tartott logikai értéket.

 & lt; animated.div
CLASSNAME = "RETINGSCARD"
onclick = {() = & gt;
SetSelected (! kiválasztott)}
& gt; 

14. Állítsa be a kártya flip fizikáját

Most az animációnk működik, de inkább úszónak tűnik, mint egy flip. Minden tavasszal megváltoztathatunk néhány értéket, hogy megváltoztassunk, hogyan viselkedik. A tavaszi beállítási objektum belsejében hozzon létre egy config a súrlódás csökkentése és a feszültség növelése. Ez adja az animációt egy snappiernek.

 felhasználás ({
config: {
súrlódás: 22,
feszültség: 500
},
[...]
}); 

15. Hozzon létre tavaszt a döntési hatáshoz

Míg a Korábban a CSS-tápellátás hatása néhány visszajelzést biztosít, növelhetjük azt, hogy tovább fokozhatjuk a kurzor pozíciójára reagáló billenő animációt. Ha egy rugót nagyfrekvencián frissítünk, például egy egér mozgást, akkor jobb teljesítményt kaphatunk a készlet funkció, amelyet minden tavasszal visszaküldik. Hozzon létre egy új tavaszt erre az animációra, és tartsa meg a visszatért funkciót.

 CONST [kellékek, set] = felhasználás (() = & gt; ({
Állam: [0, 0, 1]
}
)); 

16. Alkalmazza a Tilt stílusokat

React rugó tud animálni sok különböző típusú értéket, amely tartalmaz tömböket. Értékeink tárolása egy tömbben lehetővé teszi számunkra, hogy interpoláljuk őket az összesre a átalakít ingatlan egy átadásban.

Hozzon létre egy átalakítás Interpolációs funkció és alkalmazza a stílusokat a főre Ratingscard elem.

 CONSTR transzformációs kártya = (x, y, skála) = & gt;
 `perspective (1000px) rotatex ($ {x} deg)
Rotatey ($ {Y} DEG) skála ($ {Scale}) `;
[...]
& lt; animated.div
 CLASSNAME = "RETINGSCARD"
 onclick = {() = & gt; SetSelected (! kiválasztott)}
 Stílus = {{Transform :! Kiválasztott & amp; & amp;
props.state.interpolate.interpolate (
TransformCard)}}} & gt; 

17. Állítsa be az egér mozgását

Az egér rendezvények akkor adják meg a kurzor koordinátáit. Érdekel az ügyfél koordinátái, hogy megkapjuk a kurzor pozíciót a nézetablakban. Add hozzá az egeret, és hagyja az eseményeket a külsőre & lt; div & gt; . Átadjuk a koordinátákat egy függvényhez, és visszaállítjuk az alapértelmezett értékekre, amikor a kurzor elhagyja a & lt; div & gt; .

 Onmouseleave = {() = & gt; készlet({
 Állam: [0, 0, 1]})}}
onmousemove = {({clientx: x,
 Ügyfél: Y}) = & gt; készlet({
 Állam: számítási értékek (x, y)})
} 

18. Számítsa ki az animációs értékeket

Csak egy kis dőlt akarunk, hogy elkerüljék a kártyát, amely túl sokat mozog, amikor a felhasználó kölcsönhatásba lép vele. A számítási értékek A funkció kidolgozza a képernyő oldalát, a kurzor be van kapcsolva, és az irány felé dönt.

Hozzon létre a funkciót az értékek kitöltéséhez. 40-ig osztva csökkenti a dönthető hatást, hogy jobban használható legyen. A végső érték vizuálisan emeli a kártyát a képernyőn.

 CONST CALCIDEVALUES = (x, y) = & gt; [
- (y - window.innerheight / 2) / 40,
(x - window.innerwidth / 2) / 40,
1.1]; 

19. Csillagok megjelenítése

Minden képnek van egy értékelése, amelyet a kártyán lévő csillagokban kell megjeleníteni. Ezt a logikát saját komponensen belül tartják, de először a hátsó arcra kell alkalmazni.

Először, hozzon létre egy új államot, hogy tartsa a minősítést, majd hozzon létre egy & lt; starrating & gt; a hátsó felületen belüli komponens & lt; div & gt; .

 CONST [CHREAMRATING, SETRATING]
 = usestate (minősítés);
[...]
{Kiválasztott & amp; & amp; (
 & lt; starrating minősítés = {currentration}
Setration = {setration} / & gt;
)} 

20. Star Animáció létrehozása

A csillagértékek elhalványulnak, amint a kártya megfordult. A uszótag Hook a React Spring-ről, alkalmazhatunk rugókat több komponensre, egymás után.

Nyit Starrating / Index.js és add hozzá a kampót. Az első argumentum meghatározza a rugók számát.

 CONST AnimatedStars = usetrail (5, {
config: {
súrlódás: 22,
feszültség: 500
},
Tól: {Opacity: 0,
Átalakítása: "Scale (0,8)"},
Opacity: 1,
Átalakítás: "skála (1)"
}); 

21. Csillagok alkalmazása az összetevőre

Az utolsó dolog, amit meg kell tennünk, valójában megjelenítik ezeket a csillagokat. A AnimatedStars A változó most tartalmaz egy sor rugót, amelyet újra lehet iterálni és alkalmazni a kártyára.

Minden csillag esetében mutasd meg a & lt; animatedstar & gt; komponens a főben Starratáló div. Terjessze a stílus kellékeit, hogy minden egyes komponensre gyakorolt ​​hatást alkalmazzon. Ha rákattint, küldje el az új minősítést a szülőnek & lt; minősítéskártya & gt; összetevő.

 {animatedstars.map ((kellékek, index) = & gt; (
& lt; animatedstar
Aktív = {index + 1 és lt; = értékelés}
onclick = {e = & gt; {
e.StopPropagation ();
setring (index + 1);
}}
KEY = {INDEX}
Stílus = {{... props}}
/ & gt;
)))} 

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer . Vásároljon ki kérdezni 288 vagy Iratkozz fel .

Olvass tovább:

• Újrahasználható reagálható komponensek kifejlesztése
• A legjobb laptopok a programozáshoz 2019-ben
• 35 Webes design eszközök, amelyek segítenek az okosabb munkához