Leer hoe u eenvoudige animaties aan uw React-app kunt toevoegen met een minimum aan codeerinspanning.
Animatie is een cruciaal onderdeel van bijna elke moderne webapplicatie. Het is ook een van de moeilijkste onderdelen om goed te krijgen.
Framer Motion is een bibliotheek gebouwd voor React waarmee het eenvoudig is om componenten te animeren.
Hoe Framer Motion werkt
Framer Motion gebruikt de bewegingscomponent voor animaties. Elk HTML/SVG-element heeft een equivalente bewegingscomponent met rekwisieten voor gebaren en animaties. Een gewone HTML-div ziet er bijvoorbeeld zo uit:
<div>div>
Terwijl het Framer Motion-equivalent er zo uitziet:
<beweging.div>beweging.div>
Bewegingscomponenten ondersteunen een animeren prop die animaties activeert wanneer de waarden veranderen. Gebruik voor complexe animaties de gebruik Animeren haak met een scoped ref.
Animatie in Framer Motion
Voordat u Framer Motion in uw project kunt gebruiken, moet u het Node.js-runtime en de Yarn-pakketbeheerder op uw computer geïnstalleerd en begrijpen wat React is en hoe het te gebruiken.
U kunt de broncode van dit project bekijken en downloaden van zijn GitHub-opslagplaats. Gebruik de starter-bestanden branch als startsjabloon om samen met deze tutorial te volgen, of de definitieve bestanden filiaal voor de volledige demo. Via deze link kunt u het project ook in actie zien live demonstratie.
Open uw terminal en voer uit:
git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
garen
garen ontwikkelaar
Wanneer je opent lokale host: 5173 in je browser zie je dit:
U kunt nu uw eerste eenvoudige animatie maken, een knop die groeit bij het zweven en krimpt wanneer de cursor weggaat.
Open de src/App.jsx bestand in een code-editor. Dit bestand bevat een functionele component die een React-fragment retourneert. Importeer de Knop component, geef het dan weer en geef het door in a tekst steun:
Geanimeerde knop</h4>
Beweeg uw muis over de knop om het effect te zien</div>
Bewerk vervolgens de Knop.jsx bestand en importeer het beweging nut van framer-beweging:
importeren { beweging } van"framer-beweging"
Vervang nu de gewone knop onderdeel met de beweging.[element] bestanddeel. Gebruik in dit geval de bewegingsknop bestanddeel.
Voeg dan een toe terwijlHover gebaar prop en passeert een object met waarden waarnaar Framer Motion moet animeren wanneer een gebruiker de muisaanwijzer op de knop houdt.
schaal: 1.1 }}> {tekst}
</motion.button>
De knop wordt nu geanimeerd wanneer u uw muisaanwijzer eroverheen of eruit beweegt:
Je vraagt je misschien af waarom deze demo geen gebruik maakt CSS-animaties in plaats van. Framer Motion heeft voordelen ten opzichte van CSS omdat het integreert met React-status en over het algemeen resulteert in schonere code.
Probeer vervolgens iets complexers: een modaal animeren. In Achtergrond.jsx, importeer het bewegingshulpprogramma en maak een functionele component met bij klikken En kinderen rekwisieten. Retourneer een beweging.div component met klasse "backdrop" en bij klikken luisteraar in de JSX.
exporterenstandaardfunctieAchtergrond() {
opbrengst (<>
</motion.div>
</>)
}
Voeg dan drie rekwisieten toe namelijk: voorletter, animeren, En Uitgang. Deze rekwisieten vertegenwoordigen respectievelijk de oorspronkelijke staat van de component, de staat waarnaar de component moet animeren en de staat waarin de component zich na de animatie moet bevinden.
Toevoegen bij klikken En kinderen rekwisieten aan de beweging.div en stel de overgangsduur in op 0,34 seconden:
exporterenstandaardfunctieAchtergrond ({onClick, kinderen}){
opbrengst (<>
onClick={onClick}
classNaam="achtergrond"
initiaal={{ ondoorzichtigheid: 0, achtergrondFilter:"vervagen (0px)" }}
animeren={{ ondoorzichtigheid: 1, achtergrondFilter:"vervagen (3.4px)" }}
uitgang={{ ondoorzichtigheid: 0, achtergrondFilter:"vervagen (0px)"}}
overgang={{
duur: 0.34,
}}
>
{kinderen}
</motion.div>
</>)
}
De Achtergrond component is een verpakking voor de Modaal bestanddeel. Als u op de achtergrond klikt, wordt de modal gesloten. In Modaal.jsx, importeren beweging en de achtergrondcomponent. De standaard functionele component accepteert rekwisieten: closeModal En tekst. Maak een variantvariabele als een object.
const varianten = {
voorletter: {
j: "-200%",
ondoorzichtigheid: 1,
},
zichtbaar: {
j: "50%",
overgang: {
duur: 0.1,
type: "lente",
demping: 32,
stijfheid: 500
}
},
Uitgang: {
j: "200%",
}
}
Retourneert een motion.div-component verpakt door een Backdrop-component met een "varianten"-prop die naar het varianten-object wijst. Varianten zijn een reeks vooraf gedefinieerde animatiestatussen waarin de component zich zou kunnen bevinden.
onClick={(e) => e.stopPropagation()}
classNaam="modaal"
varianten={varianten}
begin='voorletter'
animeren='zichtbaar'
uitgang='Uitgang'
>
{tekst}
</motion.div>
</Backdrop>
Vervolgens moet u de functionaliteit toevoegen om de modal weer te geven wanneer een gebruiker op de knop klikt. Open de App.jsx bestand en importeer het gebruikState Reageer haak en de Modaal bestanddeel.
importeren { useState } van"Reageer";
importeren Modaal van"./componenten/Modal";
Maak dan een modaalOpenen staat met de standaardwaarde ingesteld op vals.
const [modalOpen, setModalOpen] = useState(vals);
Definieer vervolgens een functie closeModal dat stelt de modaalOpenen tot vals.
functiecloseModal() {
setModaalOpen(vals)
}
Geef boven aan het React-fragment voorwaardelijk a weer Modaal onderdeel en passeer de juiste tekst prop met de closeModal prop.
{modaalOpenen && <Modaaltekst="Dit is een modale animatie met Framer Motion"}
Dan, in de tweede sectie element, geef een weer knop element met een onClick-gebeurtenishandler die modalOpen instelt op false.
U merkt misschien dat React de Modal-component ontkoppelt van de DOM zonder een exit-animatie. Om dat op te lossen, heb je een Aanwezigheid animeren bestanddeel. Importeer AnimatePresence uit framer-beweging.
importeren {AnimatePresence} van'framer-beweging';
Wikkel nu de Modal-component in de AnimatePresence-component en stel de voorletter prop naar false en de modus wachten".
vals} modus="wachten">
{modaalOpenen && <Modaaltekst="Dit is een modale animatie met Framer Motion"closeModal={closeModal} />}
</AnimatePresence> Met de AnimatePresence-component kunnen exit-animaties worden voltooid voordat React deze ontkoppelt van de DOM.
Framer Motion kan componenten tijdens het scrollen animeren met behulp van de terwijlInView prop. Open de ScrollElement.jsxen importeer de beweging nutsvoorziening. Wijziging div naar beweging.div met klasse "scroll-element".
initiaal={{ ondoorzichtigheid: 0, schaal: 0, draaien: 14 }}
terwijlInView={{ ondoorzichtigheid: 1, schaal: 1, draaien: 0 }}
overgang={{ duur: .8 }}
kijkvenster={{ eenmaal: WAAR }}
classNaam='scroll-element'
>
Scroll-element
</motion.div>
De uitkijk postje prop wijst naar een object dat ondergaat eenmaal naar WAAR. Vervolgens in de App.jsx bestand, importeer het ScrollElement component en definieer een variabele scrollElementCount die een geheel getal bevat.
laten scrollElementCount=14;
Als laatste sectie element, maak een array met een specifieke lengte gedefinieerd door scrollElementCount die elk element van de array in kaart brengt en een component genereert met een unieke sleutel op basis van de index i.
{[...Array (scrollElementCount)].map((x, ik) =><ScrollElementsleutel={i} />)}
Nu, terugkerend naar de browser, zouden elementen moeten animeren wanneer u ze in beeld scrolt.
Alternatieven voor Framer Motion
Framer Motion is niet de enige animatiebibliotheek op de markt. Als je de manier waarop Framer Motion dingen doet niet leuk vindt, kun je andere bibliotheken uitproberen, zoals Reageer lente.
U kunt ook CSS-animaties gebruiken, die standaard door alle moderne browsers worden ondersteund, maar de betrokken technieken kunnen lastig zijn om te leren en in te stellen.
Gebruikerservaring verbeteren met animaties
Elke gebruiker verwacht een boterzachte ervaring bij het gebruik van een webapplicatie. Een website of applicatie zonder animaties voelt statisch aan en reageert niet. Animaties verbeteren de gebruikerservaring omdat je ze kunt gebruiken om feedback te communiceren naar de gebruiker wanneer deze een bepaalde actie uitvoert.
