De Framer Motion-bibliotheek brengt een hele reeks animatiefunctionaliteit naar uw React-apps.

Het animeren van een React-component wanneer deze het scherm binnenkomt of verlaat, kan een uitdaging zijn. Dit komt omdat, wanneer u een component verbergt, React deze uit de DOM verwijdert, waardoor deze niet beschikbaar is voor animatie. Wanneer u de component opnieuw laat zien, voegt React deze opnieuw toe aan de DOM, wat kan resulteren in een abrupte weergave zonder animatie.

U kunt dit probleem oplossen met een animatiebibliotheek zoals Framer Motion.

Wat is framerbeweging?

Framer Motion is een productieklare animatiebibliotheek voor React. Het biedt een reeks componenten, hooks, keyframes en aangepaste easing-functies voor het maken en besturen van animaties.

Een voordeel van Framer Motion is dat het gemakkelijk is om vloeiende en vloeiende animaties te maken zonder dat je veel JavaScript-code hoeft te schrijven of berekeningen hoeft uit te voeren voor elke overgang.

Het heeft ook een evenementensysteem, dat u kunt gebruiken om animaties te activeren op basis van gebruikersinvoer, zoals klikken op knoppen en gebaren, waardoor interactieve en dynamische interfaces ontstaan ​​die responsief aanvoelen.

instagram viewer

Om te demonstreren hoe u Framer Motion in React kunt gebruiken, animeert u een component die het scherm binnenkomt en verlaat wanneer u op een knop klikt.

Een React-project maken

Om een ​​React-project te maken, moet u dat doen installeer Node.js en npm (Node Package Manager) op uw computer als je dat niet hebt gedaan.

Zodra u deze afhankelijkheden hebt geïnstalleerd, kunt u maak een nieuw React-project met Vite door de opdracht garen vite in uw terminal uit te voeren.

garen vite

Met deze opdracht wordt een nieuwe map gemaakt met alle benodigde bestanden en afhankelijkheden vooraf geïnstalleerd. Navigeer naar de map en start de ontwikkelserver met het garenstartcommando.

garen beginnen

Framer Motion installeren in React

Installeer Framer Motion door deze opdracht uit te voeren:

npm install framer-motion

Met deze opdracht wordt Framer Motion als een afhankelijkheid aan uw project toegevoegd.

Een component animeren

Om een ​​component te animeren wanneer deze het scherm binnenkomt en verlaat in React met behulp van Framer Motion, moet u deze in de bewegingscomponent wikkelen.

De bewegingscomponent biedt een reeks eigenschappen voor het animeren van de in- en uitgang van de component. Je kunt de initiële, animerende en exit-props gebruiken om de zichtbaarheid en positie ervan te bepalen.

Om het in actie te zien, voegt u de volgende code toe bovenaan App.jsx om de bewegingscomponent van framer-motion te importeren.

importeren { beweging } van"framer-beweging";

Maak vervolgens de component die u wilt animeren door deze te omwikkelen met de bewegingscomponent. Dit voorbeeld gebruikt een div-element, maar u kunt elk ander element gebruiken dat u wilt, zoals onder andere button, li en p.

importeren { beweging, AnimatePresence } van"framer-beweging"
functieapp() {
opbrengst (
 <>

 initiaal={{ X: -100, ondoorzichtigheid: 0 }}
 animeren={{ X: 0, ondoorzichtigheid: 1 }}
 uitgang={{ X: -100, ondoorzichtigheid: 0 }}
 >
Verzonden!</p>
 </motion.div>

 </>
 )
}

Met de bewegingscomponent kunt u het div-element met de tekst "Verzonden!" animeren.

De voorletter, animeren, En Uitgang eigenschappen van de bewegingscomponent definiëren de ingangs- en uitgangsanimaties van de component. Wanneer de component voor het eerst wordt weergegeven, begint deze met een x-positie van -100 (buiten het scherm aan de linkerkant) en een dekking van 0 en wordt hij onzichtbaar.

De eigenschap animate definieert hoe de component moet animeren wanneer deze het scherm betreedt, in dit geval vanuit een x positie van -100 naar een x-positie van 0 (van links naar binnen schuiven) en geleidelijk vervagen naar een dekking van 1 en volledig worden zichtbaar.

Ten slotte definieert de exit-eigenschap hoe de component moet worden geanimeerd wanneer u deze van het scherm verwijdert. In dit geval schuift de component van het scherm naar links met een x-positie van -100 en vervaagt geleidelijk naar een dekking van 0.

U moet ook de bewegingscomponent omwikkelen met de AnimatePresence-component van framer-motion om componenten te animeren wanneer u ze uit de React DOM-structuur verwijdert.

Nu je de in- en uitstapanimaties hebt gedefinieerd, kun je een knop toevoegen om de animatie te activeren. Hier is het gewijzigde onderdeel met de knop:

importeren { AnimatePresence, beweging } van"framer-beweging";
importeren { useState } van"Reageer";
functieapp() {
const [isVisible, setIsVisible] = useState(WAAR);


const toggleZichtbaarheid = () => {
 setIsVisible(!isVisible);
 };


opbrengst (
 <>

 {is zichtbaar && ( <beweging.div
 initiaal={{ X: -100, ondoorzichtigheid: 0 }}
 animeren={{ X: 0, ondoorzichtigheid: 1 }}
 uitgang={{ X: -100, ondoorzichtigheid: 0 }}
 >
Verzonden!</p>
 </motion.div>)}
 </AnimatePresence>

Deze bijgewerkte code voegt een statusvariabele toe met de naam isVisible met behulp van de useState-hook. Deze variabele houdt bij of het onderdeel zichtbaar moet zijn. De functie toggleVisibility schakelt de waarde van isVisible tussen waar en onwaar wanneer u op de knop klikt.

Jij bent nu de component voorwaardelijk weergeven afhankelijk van de waarde van isVisible. Als isVisible waar is, wordt de bewegingscomponent weergegeven met de ingangsanimatie.

Voeg ten slotte een onClick-gebeurtenishandler toe aan de knop die de toggleVisibility-functie aanroept, de status van isVisible bijwerkt en de ingangs- of uitgangsanimatie van de bewegingscomponent activeert.

Een versoepelingsfunctie toevoegen

Een versoepelingsfunctie regelt de mate van verandering van animatie in de loop van de tijd. Het definieert de timing van een animatie door te specificeren hoe de animatie moet versnellen of vertragen naarmate deze vordert. Zonder een versoepelingsfunctie kan de animatie te snel worden weergegeven.

Framer Motion biedt verschillende versoepelingsfuncties om uit te kiezen, waaronder EaseInOut. Importeer het bovenaan App.jsx vanuit framer-motion om het te gebruiken.

importeren { beweging, gemakInOut} van"framer-beweging";

Voeg het vervolgens toe aan het overgangsobject in de bewegingscomponent:

 initiaal={{ X: -100, ondoorzichtigheid: 0 }}
 animeren={{ X: 0, ondoorzichtigheid: 1, overgang: { duur: 0.5, gemak: gemakInUit } }}
 uitgang={{ X: -100, ondoorzichtigheid: 0, overgang: { duur: 0.5, gemak: gemakInUit } }}
>
Verzonden!</p>
</motion.div>

De eigenschap duration geeft aan hoe lang de animatie moet worden uitgevoerd.

Gebruik gewone CSS voor eenvoudige animaties

U kunt zoveel meer doen met Framer Motion, inclusief 3D-animatie. U hebt echter niet altijd een bibliotheek nodig om animaties te maken. Voor eenvoudige animaties zoals zweefovergangen kunt u altijd gewone CSS gebruiken.