Kuinka käyttää reagoivaa jousi animoitiin komponentteja

Reagoi kevät voi auttaa sinua animaatioilla, jotka ovat tunnetusti hankalia toteuttamaan verkossa. CSS-animaatiot ovat paras valinta, mutta sileän tuloksen luominen edellyttää huolellista luokkien, kestojen ja tapahtumien juggling. Heittää a JavaScript Framework Kuten reagoi sekoitus vain vaikeuttaa asioita edelleen.

Animaatioille, jotka luottavat käyttäjän vuorovaikutukseen, arvot voidaan laskea JavaScriptin kautta ja levitetään suoraan elementtiin. Ottamalla tämä käsin lähestymistapa meidän pitäisi laskea ja soveltaa omaa keventämistä animaation näyttämiseksi luonnollisemmalta.

Reagoida kevät Onko kirjasto, joka on rakennettu käsittelemään paljon yhteisiä ripustuksia, kun on kyse animaatiosta verkossa. Se vie hieman erilainen lähestymistapa keskittymällä fysiikkaan suorissa kestoissa ja määrittämällä helpottavat toiminnot. Tämä auttaa pitämään asiat sileänä ja luonnollisena.

Vaikka suurimman osan ajasta tätä käytetään visuaalisiin vaikutuksiin, kirjasto siirtyy kahden arvon välillä riippumatta siitä, onko tämä arvo koskaan käytetty tyyliin vai ei. Esimerkiksi sitä voitaisiin käyttää luopumaan useita rekisteröitymiä korostamaan, kuinka suuri yhteisö on.

Tässä opetusohjelmassa tehdään kortin komponentti, jonka avulla käyttäjät voivat arvioida kuvia. Kortti kääntää Tähtiluokituksen paljastamiseksi ja käyttäjät voivat klikata lisätä oman. Käytämme REACE Springin uudempia koukkuja, jotka edellyttävät reagoivaa versiota 16.8 tai enemmän. Ennen kuin aloitat, Lataa opetustiedostot täältä (Ja takaisin ne sisään pilvivarasto ).

Jos haluat rakentaa sivuston ilman monimutkaisia ​​koodiprosesseja, käytä kunnon Verkkosivuston rakentaja . Ja muista tutkia sivujen ylläpito Myös vaihtoehdot.

01. Asenna riippuvuudet

Ladattujen tiedostojen avulla paketin riippuvuudet on asennettava ennen kuin voimme aloittaa. Tämä luo React App-pohjainen projekti sisältää reagoida Pakkaus ja kaikki tarvittavat paikalliset palvelin, joka on perustettu alkuun.

Etsi komentorivillä projektitiedostot ja asenna ja asenna ne sitten.

 & gt; lanka
& gt; Lanka alkaa 

02. Luo kuvia tilassa

Ensinnäkin tarvitsemme joitain kuvia. Tätä opetusohjelmaa aiomme kovaa joitakin kuvia sovellustilaan, mutta nämä tiedot voivat tulla mistä tahansa lähteestä. Avaa App.Js ja luo joitakin kuvia uutta koukku reagoivasta. Tämä antaa jokaiselle kuvan alkuperäisen luokituksen, jota voimme näyttää ja päivittää myöhemmin.

 Const [kortit] = Useat ([
Luomus (image1),
Luomus (image2),
Luomus (image3)
]); 

03. Näytä jokainen kuvakortti

Kun kuvat tallennetaan ryhmään, voimme silmukoida kyseisen tilan ja luoda erillisiä komponentteja kullekin. ANIMAATION LOGIC reagoi keväällä & lt; ratingscard / & gt; komponentti, jota voimme käyttää missä tahansa, tarvitsemme.

App.JS: n tekomenetelmän sisällä luo kopio kyseisestä komponentista jokaiselle valtion taulukon kortille. Se saa kaikki valtion arvon, mukaan lukien kuva ja alkuperäinen luokitus.

 {kortit.Map ((kortti, indeksi) = & gt;
& lt; ratingscard-näppäin = {index} {... kortti} / & gt;
))} 

04. Lisää kortin rakenne

Ennen kuin voimme lisätä animaation, kortti tarvitsee jonkin verran sisältöä. Jokaisella kortilla on edessä ja takana, joka toteutetaan erillisinä & lt; div & gt; elementit kerrostettu toistensa päälle.

Avata Artingscard / index.js ja lisää kortin rakenne. Meidän on sovellettava kuvaa taustakortin taustana, kun selkä on lopulta luokitus.

 & lt; div classname = "Ratingscard" & gt;
& lt; div
classname = "Ratingscard__front"
Style = {{
tausta: `URL ($ {{image})`
}}
/ & gt;
& lt; div classname = "Ratingscard__back" / & gt;
& lt; / div & gt; 

05. Käytä Hover-tyylejä

Kaikki tyylit, joita ei ole suoraan päivitetty animaatioidemme kautta, voidaan soveltaa CSS: n kautta. Tämä sisältää 3D-varjoefektin jokaiselle kortille, kun se leijuu. Sisällä Artingscard / style.css , lisää joitakin ylimääräisiä tyylejä, jotta kortti hypätä pois sivulta levittämällä suodattimen.

 .Ratscard: Hover {
Suodatin: Drop-Shadow (0 14PX 28PX
RGBA (0, 0, 0, 0.25))
pudota varjo (0 10px 10px
 RGBA (0, 0, 0, 0.1));
} 

06. Aseta varjo oletusarvoisesti

Äkillinen varjo lepo on jarring-kokemus. Meidän on siksi hitaasti siirtyminen valtioiden välillä pitää asiat sujuvasti. Lisää kortille subdler-pudotusvarjo, kun sitä ei ole levitetty. Käytä siirtyminen omaisuus animoida näiden kahden tilan välillä.

 .Ratingscard {
[...]
Suodatin: Drop-Shadow (0 3PX 6PX
RGBA (0, 0, 0, 0.16))
pudota varjo (0 3px 6px
RGBA (0, 0, 0, 0.1));
Siirtyminen: Suodatin 0,5s;
} 

07. Pidä valittu tila

Meidän on tallennettava ja päivitettävä tietoja kortin puolelta. Voimme käyttää reagoivaa sisäänrakennettua uutta Koukku määrittämään aloitusarvo ja se palauttaa nykyisen arvon ja menetelmän sen päivittämiseksi.

Alussa RATSINGSCARD Komponenttitoiminto, Luo tämä valittu osavaltio.

 Const [Valittu, SetSaletti]
 = Useat (väärä); 

08. Määritä Flip Animaatio

Reagoi jousi vastaa numeron siirtämisestä yhden arvon ja toisen välillä. Tämä voidaan tehdä keväällä ja käyttää koukku. Tarjoamme sille joitain asetustietoja, ja se palauttaa arvoja, jotka päivittävät fysiikan laskelmiensa mukaisesti.

Luo kevät kääntöanimaatiolle. Tämä haalistuu ja kiertää korttia riippuen siitä, onko kortti sen valittu osavaltio.

 Const {Opacity, Muunnelma}
 = käyttää ({
Opasiteetti: valittu? 1: 0,
Muunnos: "Kierrä (
$ {Valittu? 180: 0} deg) `
}); 

09. Muunna animoituun säiliöön

Objektit palauttivat käyttää Määritä niiden animaatio, mutta älä anna tarvitsemamme numeerisia arvoja. The animoitu Tehdastoiminto Digestii nämä tiedot ja toimittaa arvot numeroiksi komponenteiksi.

Muunna RATSINGSCARD elementti käyttää animoitu Toiminto. The Animated.Div Syntaksi kertoo toiminnon palauttaa & lt; div & gt; .

 & lt; animoitu.Div Classname = "Ratingscard" & gt;
& lt; animoitu.div
classname = "Ratingscard__front"
Style = {{
tausta: `URL ($ {{image})`
}}
/ & gt;
& lt; animoitu.Div Classname =
"Ratingscard__back" / & gt;
& lt; /animoitu.Div> 

10. Animoi etukortti

Reagoi keväällä vain arvot ja ei tee itse elementtejä animaatiota. Voimme yhdistää nämä arvot tyylille ja luomaan tämän animaation lennossa. Päivitä etukortti, jos haluat käyttää uutta peittävyys ja muuttaa arvot. Tässä tapauksessa meidän on interpoloida läpikuultavuusarvo, jota käsittelemme pian.

 & lt; animoitu.div
classname = "Ratingscard__front"
Style = {{
Taustakuva: `URL ($ {{image})",
OpaCity: Opacity.InterPolate (
Käsitys),
muuttaa
}}
/ & gt; 

11. Animoi takakortti

Kääntää korttia, mitä tahansa animaation me haemme yhtä kasvolle, on sovellettava toiselle päinvastaiseksi. Kun pelattiin yhdessä, he näyttävät siltä, ​​että ne liikkuvat yhtenä kappaleena.

Tällöin meidän on sovellettava samoja tyylejä takakorttiin, mutta tällä kertaa interpoloida muuttaa sen sijaan arvo.

 & lt; animoitu.div
ClassName = "RATSINGSCARD__BACK"
Style = {{
opasiteetti,
Muunnos: Muunna
.InterPolate (inversetransform)
}}
/ & gt; 

12. Interpoloida arvot

Sen sijaan, että suoraan CSS-ominaisuuksiin liittyvät arvot, voimme soveltaa heille jonkinlaista toimintaa, jotta ne voidaan kartoittaa eri toiseen. Tätä prosessia kutsutaan interpolointiin.

Määritä pari interpolointitoimintoa kohti Artingscard / index.js . Nämä soveltavat sekä läpinäkymättömien että animaatioiden käänteistä valittaessa tai valittaessa.

const inversetopacity = O = & gt; 1 - O;
const inversetransform = t = & gt;
 `$ {t} rotatey (180deg)`; 

13. Vaihda tila napsauttamalla

Kortin kääntäminen on sidottava napsautukselle. Kuten valittu Valtion arvo määrittää, mitkä kasvot ovat näkyvissä, meidän pitäisi vaihtaa tätä tilaa, kun napsautat korttia.

Lisää napsauta kuuntelija ulompaan RATSINGSCARD elementti. Kun näin tapahtuu, se vaihtaa boolean arvoa pidetään tilassa.

 & lt; animoitu.div
Classname = "Ratingscard"
Onclick = {() = & gt;
SetSaletti (! Valittu)}
& gt; 

14. Säädä kortti Fysiikka

Juuri nyt animaatio toimii, mutta se näyttää enemmän kelluista kuin flip. Voimme muuttaa joitakin arvoja kussakin keväällä muuttaakseen, miten se toimii. Sisään asetusobjektin sisällä luo a konfiguroida esine vähentää kitkaa ja lisätä jännitystä. Tämä antaa animaatiolle snappier-tunnelman.

 käyttää ({
config: {
Kitka: 22,
Jännitys: 500
},
[...]
}); 

15. Luo kevään kallistusvaikutus

Vaikka CSS-powered hover -vaikutus aikaisemmin antaa palautetta, voimme parantaa sitä edelleen kallistusanimaation, joka reagoi kohdistimen asentoon. Kun päivitetään keväällä korkealla taajuudella, kuten hiiren liikkeen, voimme parantaa suorituskykyä käyttämällä aseta Toiminto, joka palautetaan kunkin kevät. Luo uusi kevät tämä animaatio ja pidä palautettu toiminto.

 Const [rekvisiitta, asetettu] = käyttötarkoitus (() = & gt; ({
Valtio: [0, 0, 1]
}
)); 

16. Käytä Tilt-tyylejä

Reagoi jousi voi animoida monia erilaisia ​​arvoja, jotka sisältävät järjestelmiä. Arvojen säilyttäminen yhdessä ryhmässä antaa meille mahdollisuuden interpoloida ne kaikki muuttaa omaisuus yhdellä passilla.

Luo muunnoskortti interpolointitoiminto ja soveltaa tyylejä päähenkilölle RATSINGSCARD elementti.

 const transformcard = (x, y, asteikko) = & gt;
 `Perspective (1000px) Rotax ($ {x} deg)
Rotaty ($ {Y} deg) Scale ($ {Scale}) `;
[...]
& lt; animoitu.div
 ClassName = "Ratingscard"
 Onclick = {() = & gt; SetSaletti (! Valittu)}
 Style = {{transform :! Valittu & amp; & amp;
props.state.interpolaatti (
Muunnoskortti)}} & gt; 

17. Aseta arvot hiiren liikkeellä

Hiiren tapahtumat tarjoavat koordinaatit kohdistimen tuolloin. Olemme kiinnostuneita asiakkaiden koordinaateista saadaksesi kohdistimen sijainnin näkymäporttiin. Lisää hiiren siirto ja jätä tapahtumia ulompiin & lt; div & gt; . Kuljetamme koordinaatit toiminnon siirtämiseen ja palauttamaan oletusarvoihin, kun kohdistin jättää & lt; div & gt; .

 Onmouseleave = {() = & gt; aseta({
 Valtio: [0, 0, 1]})}
Onmousemove = {({clientx: x,
 Asiakas: Y}) = & gt; aseta({
 Valtio: LaskentaValues ​​(x, y)})
} 

18. Laske animaatioarvot

Haluamme vain pienen kallistuksen välttämiseksi liikaa liikkuu liikaa, kun käyttäjä toimii vuorovaikutuksessa sen kanssa. The laskentaarvot Toiminto toimittaa näytön sivua kohdistin on päällä ja kallistaa sen suuntaan.

Luo toiminto täyttää nämä arvot. Jakaminen 40 vähentää kallistusvaikutus, jotta se olisi hyödyllistä. Lopullinen arvo nostavat visuaalisesti kortin näytöltä.

 const calculatules = (x, y) = & gt; [
- (Y - Window.innerHeight / 2) / 40,
(x - window.innerwidth / 2) / 40,
1.1]; 

19. Näytä tähtiluokitus

Jokaisella kuvalla on luokitus, jonka meidän on näytettävä tähdissä kortin takana. Tämä logiikka pidetään oman komponentinsa sisällä, mutta sitä on ensin levitettävä takaisin kasvoihin.

Ensinnäkin luo uusi valtion, jolla voit pitää luokitus ja luo sitten & lt; tähti & gt; komponentti takana & lt; div & gt; .

 Const [Täytä, sarkaaminen]
 = Useat (luokitus);
[...]
{Valittu & amp; & amp; (
 & lt; tähtiä luokitus = {DEVIREPRATING}
SETRATING = {SETRATING} / & GT;
)} 

20. Luo tähti animaatio

Star-luokitukset haalistuvat, kun kortti on kääntynyt. Käyttämällä ustrail Koukku reagoivasta jousi, voimme soveltaa jousia useisiin komponentteihin, yksi toisensa jälkeen.

Avata Tartu / index.js ja lisää koukku sisään. Ensimmäinen argumentti määrittelee jousien määrän.

 Const AnimatedStars = UseetRail (5, {
config: {
Kitka: 22,
Jännitys: 500
},
alkaen: {Opacity: 0,
Muunna: "Scale (0,8)"},
opasiteetti: 1,
Muutos: "Scale (1)"
}); 

21. Käytä tähtiä komponenttiin

Viimeinen asia, jota meidän on tehtävä, on todella näyttää nämä tähdet. The animoituja Muuttuja sisältää nyt joukko jouset, joita voimme italistaa ja hakea korttia.

Näytä jokaiselle tähdelle & lt; animatedstar & gt; komponentti Tähtiluokitus div. Levitä tyyli rekvisiitta, jotta kaikki vaikutukset voidaan soveltaa jokaiseen osaan. Kun napsautti, lähetä uusi luokitus vanhempaan & lt; Arvostelukortti & GT; komponentti.

 {AnimatedStars.Map ((rekvisiitta, indeksi) = & gt; (
& lt; animoituja
Active = {index + 1 & lt; = luokitus}
Onclick = {e = & gt; {
e.stopropagointi ();
sarstraating (indeksi + 1);
}}
KEY = {Index}
Style = {{... Props}}
/ & gt;
))} 

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Nettisivujen suunnittelija . Osta numero 288 tai tilata .

Lue lisää:

• Kehittää uudelleenkäytettävät reagoivat komponentit
• Paras kannettavat ohjelmointiin vuonna 2019
• 35 Web-suunnittelutyökalut, joiden avulla voit työskennellä älykkäämpiä