Opi lisäämään yksinkertaisia animaatioita React-sovellukseesi vähäisellä koodaustyöllä.
Animaatio on tärkeä osa lähes jokaista nykyaikaista verkkosovellusta. Se on myös yksi vaikeimmista osista saada oikein.
Framer Motion on Reactille rakennettu kirjasto, jonka avulla komponenttien animointi on helppoa.
Kuinka Framer Motion toimii
Framer Motion käyttää liikekomponenttia animaatioissa. Jokaisella HTML/SVG-elementillä on vastaava liikekomponentti, jossa on rekvisiitta eleille ja animaatioille. Esimerkiksi tavallinen HTML-div näyttää tältä:
<div>div>
Vaikka Framer Motion -vastine näyttää tältä:
<motion.div>motion.div>
Liikekomponentit tukevat an animoida prop, joka käynnistää animaatioita, kun sen arvot muuttuvat. Käytä monimutkaisia animaatioita varten käytä Animate koukku tähtäimellä ref.
Animaatio Framer Motionissa
Ennen kuin käytät Framer Motionia projektissasi, sinulla on oltava Node.js-ajoaika ja tietokoneellesi asennettu lankapakettien hallinta ja ymmärtää mitä React on ja miten sitä käytetään.
Voit tarkastella ja ladata tämän projektin lähdekoodin sen osoitteesta GitHub-arkisto. Käytä aloitustiedostot haara aloitusmallina, jota seurataan tämän opetusohjelman mukana, tai lopulliset tiedostot haara koko demolle. Voit myös nähdä projektin toiminnassa tämän kautta live-demo.
Avaa terminaali ja suorita:
git-klooni [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
lanka
lanka dev
Kun avaat paikallinen isäntä: 5173 selaimessasi näet tämän:
Voit nyt luoda ensimmäisen yksinkertaisen animaatiosi, painikkeen, joka kasvaa hiiren päällä ja kutistuu, kun osoitin poistuu.
Avaa src/App.jsx tiedosto koodieditorissa. Tämä tiedosto sisältää toiminnallisen osan, joka palauttaa React-fragmentin. Tuo Painike komponentti, renderöi se sitten a teksti prop:
Animoitu painike</h4>
Näet tehosteen siirtämällä hiiren painikkeen päälle/div>
Muokkaa seuraavaksi Button.jsx tiedosto ja tuo liikettä hyödyllisyys alkaen framer-liikettä:
tuonti { liike } alkaen"framer-motion"
Vaihda nyt tavallinen -painiketta elementti kanssa liike.[element] komponentti. Käytä tässä tapauksessa liike.painike komponentti.
Lisää sitten a Hover-tilassa ele prop ja välittää arvoobjektin, joka Framer Motionin pitäisi animoida, kun käyttäjä vie hiiri painikkeen päälle.
mittakaavassa: 1.1 }}> {teksti}
</motion.button>
Painike animoituu nyt, kun siirrät hiiren osoittimen sen päälle tai pois siitä:
Saatat ihmetellä, miksi tämä demo ei käytä CSS-animaatiot sen sijaan. Framer Motionilla on etuja CSS: ään verrattuna, koska se integroituu React-tilaan ja johtaa yleensä puhtaampaan koodiin.
Kokeile seuraavaksi jotain monimutkaisempaa: modaalin animointia. Sisään Backdrop.jsx, tuo motion-apuohjelma ja luo toiminnallinen komponentti klikkaamalla ja lapset rekvisiitta. Paluu a motion.div komponentti luokan "tausta" ja klikkaamalla kuuntelija JSX: ssä.
viedäoletuksenatoimintoTausta() {
palata (<>
</motion.div>
</>)
}
Lisää sitten kolme rekvisiittaa, nimittäin: alkukirjain, animoida, ja poistu. Nämä rekvisiitta edustavat komponentin alkuperäistä tilaa, tilaa, johon komponentin tulee animoida, ja tilaa, jossa komponentin tulee olla animaation jälkeen.
Lisätä klikkaamalla ja lapset rekvisiitta motion.div ja aseta siirtymäkestoksi 0,34 sekuntia:
viedäoletuksenatoimintoTausta ({onClick, lapset}){
palata (<>
onClick={onClick}
luokannimi="tausta"
iniciaali={{ opasiteetti: 0, taustasuodatin:"sumennus (0px)" }}
animoida={{ opasiteetti: 1, taustasuodatin:"sumennus (3,4 kuvapistettä)" }}
exit={{ opasiteetti: 0, taustasuodatin:"sumennus (0px)"}}
siirtyminen={{
kesto: 0.34,
}}
>
{lapset}
</motion.div>
</>)
}
The Tausta komponentti on kääre Modaalinen komponentti. Taustan napsauttaminen sulkee modaalin. Sisään Modal.jsx, tuonti liikettä ja taustakomponentti. Toiminnallinen oletuskomponentti hyväksyy rekvisiitta: closeModal ja teksti. Luo muunnelmamuuttuja objektiksi.
konst muunnelmat = {
alkukirjain: {
v: "-200%",
opasiteetti: 1,
},
näkyvissä: {
v: "50%",
siirtymä: {
kesto: 0.1,
tyyppi: "kevät",
vaimennus: 32,
jäykkyys: 500
}
},
poistu: {
v: "200%",
}
}
Palauttaa motion.div-komponentin, joka on kääritty Backdrop-komponentilla, jossa on variantit-objektiin osoittava "variantit"-ehdotus. Variantit ovat joukko ennalta määritettyjä animaatiotiloja, joissa komponentti voi olla.
onClick={(e) => e.stopPropagation()}
luokannimi="modaalinen"
variantit={variantit}
ensimmäinen ='alkukirjain'
animoida ='näkyvä'
exit='poistu'
>
{teksti}
</motion.div>
</Backdrop>
Seuraavaksi sinun on lisättävä toiminto, joka näyttää modaalin, kun käyttäjä napsauttaa painiketta. Avaa App.jsx tiedosto ja tuo useState Reagoi koukku ja Modaalinen komponentti.
tuonti { useState } alkaen"reagoi";
tuonti Modaalinen alkaen"./components/Modal";
Luo sitten a modaaliAvoin tila, jonka oletusarvo on asetettu väärä.
konst [modalOpen, setModalOpen] = useState(väärä);
Määritä seuraavaksi funktio closeModal joka asettaa modaaliAvoin vääräksi.
toimintocloseModal() {
setModalOpen(väärä)
}
Piirrä React-fragmentin yläosassa ehdollisesti a Modaalinen komponentti ja läpäise asianmukainen teksti prop with closeModal prop.
{modalOpen && <Modaalinenteksti="Tämä on Framer Motionilla animoitu modaali"}
Sitten toisessa osio elementti, renderöi a -painiketta elementti onClick-tapahtumakäsittelijällä, joka asettaa modalOpenin arvoksi false.
Saatat huomata, että React irrottaa Modal-komponentin DOM: sta ilman poistumisanimaatiota. Korjataksesi sen, tarvitset AnimatePresence komponentti. Tuo AnimatePresence kohteesta framer-liikettä.
tuonti {AnimatePresence} alkaen"framer-motion";
Kääri nyt Modal-komponentti AnimatePresence-komponenttiin ja aseta alkukirjain prop vääriin ja -tilassa odottaa".
väärä} mode="odota">
{modalOpen && <Modaalinenteksti="Tämä on Framer Motionilla animoitu modaali"closeModal={closeModal} />}
</AnimatePresence> AnimatePresence-komponentti sallii poistumisanimaatioiden valmistumisen ennen kuin React irrottaa sen DOM: sta.
Framer Motion voi animoida komponentteja vierityksen aikana käyttämällä katselutilassa prop. Avaa ScrollElement.jsx, ja tuo liikettä apuohjelma. Muuttaa div to motion.div luokassa "scroll-element".
iniciaali={{ opasiteetti: 0, mittakaavassa: 0, kiertää: 14 }}
whileInView={{ opasiteetti: 1, mittakaavassa: 1, kiertää: 0 }}
siirtyminen={{ kesto: .8 }}
katseluportti={{ kerran: totta }}
luokannimi='scroll-element'
>
Vieritä elementtiä
</motion.div>
The näkymä prop osoittaa objektiin, joka asettaa kerran to totta. Seuraavaksi vuonna App.jsx tiedosto, tuo ScrollElement komponentti ja määritä muuttuja scrollElementCount, jolla on kokonaislukuarvo.
antaa scrollElementCount=14;
Viimeisessä osio elementtiä, luo taulukko, jolla on tietty pituus, jonka määrittelee scrollElementCount joka kartoittaa jokaisen taulukon elementin ja luo komponentin, jolla on yksilöllinen avain indeksin perusteella i.
{[...Matriisi (scrollElementCount)].map((x, i) =><ScrollElementavain={i} />)}
Palatakseni selaimeen elementtien pitäisi animoitua, kun vierität niitä näkyville.
Vaihtoehtoja Framer Motionille
Framer Motion ei ole markkinoiden ainoa animaatiokirjasto. Jos et pidä Framer Motionin tavasta, voit kokeilla muita kirjastoja, kuten Reagoi kevääseen.
Voit myös käyttää CSS-animaatioita, joita kaikki nykyaikaiset selaimet tukevat alkuperäisesti, mutta niihin liittyvät tekniikat voivat olla hankalia oppia ja asentaa.
Animaatioiden käyttökokemuksen parantaminen
Jokainen käyttäjä odottaa sujuvaa käyttökokemusta käyttäessään verkkosovellusta. Sivusto tai sovellus ilman animaatioita tuntuu staattiselta ja reagoimattomalta. Animaatiot parantavat käyttökokemusta, koska niiden avulla voit välittää palautetta käyttäjälle, kun hän suorittaa tietyn toiminnon.