Brug af Animated.spring()-metoden til dynamiske animationer i React Native

React Natives Animated API-bibliotek kan hjælpe dig med at skabe dynamiske, flydende animationer med en lille indsats.

Lær, hvordan du opretter animationer med en fjederlignende effekt, og find derefter ud af, hvordan du kontrollerer deres varighed og hastighed, og anvender dem i scenarier i den virkelige verden.

Hvad er dynamiske animationer?

Dynamiske animationer er animationer, hvor bevægelserne af animerede objekter ikke er forprogrammeret. Du kan starte dem som reaktion på brugerinteraktion eller ændringer i miljøet. Teknikken er mest populær i videospil animation, sociale medieapplikationer eller andre former for interaktive medier.

Dynamiske animationer kan give en mere fordybende og engagerende oplevelse for brugerne, da det giver mulighed for uforudsigelige og responsive bevægelser, der kan ændre sig baseret på flere faktorer.

Animationer i mobilapps er gennem årene blevet mere og mere komplekse. React Natives standard Animated API er avanceret for at imødekomme disse kompleksiteter. Det

Animated.spring() metode, som API'en giver, kan animere React Native-objekter, hvilket skaber en dynamisk effekt.

Styring af animationen

Ved brug af Animated.spring() metode, skal du have kontrol over animationen for at sikre, at den opfører sig, som du ønsker. Animeret giver et sæt metoder til manuelt at kontrollere og manipulere dine React Native-animationer.

En af de metoder er hold op(), hvilket får animationen til at stoppe ved dens aktuelle værdi. Denne metode er nyttig, når du skal annullere en animation eller nulstille den til dens oprindelige tilstand.

For eksempel:

konst stopAnimation = () => {
 position.stop(værdi => {
 position.setValue(0);
 });
};

Bemærk, hvordan du kan bruge setValue() metode til at nulstille positionsværdien til dens oprindelige tilstand 0.

En anden metode til rådighed for dig er Nulstil(), som returnerer animationen til dens oprindelige tilstand. Denne metode er nyttig, når du skal genstarte en animation.

Real-World-applikationer

Du kan udforske en praktisk brug af Animated.spring() metode ved at bygge en simpel animation. En rund bold vil falde til en overflade, når en bruger interagerer med den, og derefter hoppe direkte tilbage i luften bagefter. Du burde allerede have et react Native-projekt, du kan arbejde med.

Først skal du oprette en tilstandsvariabel for at spore boldens position:

importere Reager, { useState } fra'reagere';
importere { Animeret } fra'reager-native';
konst App = () => {
konst [position, setPosition] = useState(ny Animeret. Værdi(0));

Vend tilbage (
transformere: [{ oversætY: position }] }}>
 {/* Boldkomponent her */}
 </Animated.View>
 );
};

Brug Animeret. Værdi at oprette en tilstandsvariabel kaldet position der vil spore boldens lodrette position. Indpak den Udsigt komponent i Animeret. Udsigt så du kan anvende animationer til det.

Opret derefter animationsfunktionen, der får bolden til at falde og hoppe op:

konst startAnimation = () => {
 Animated.spring (position, {
 At værdsætte: 300,
 friktion: 1,
 spænding: 10,
 useNativeDriver: rigtigt,
 }).Start(() => {
 Animated.spring (position, {
 At værdsætte: 0,
 friktion: 1,
 spænding: 10,
 useNativeDriver: rigtigt,
 }).Start();
 });
};

Brug Animated.spring() at skabe en animation, der flytter bolden fra dens oprindelige position på 0 til en endelig position på 300. Angiv friktion og spænding værdier for at kontrollere boldens hoppeeffekt under indstilling brug NativeDriver til rigtigt at forbedre ydeevnen.

Du kan derefter implementere koden for at udløse animationen, når en bruger interagerer med bolden:

Vend tilbage (

transformere: [{ oversætY: position }] }}>
 {/* Boldkomponent her */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Denne kode omslutter Animeret. Udsigt komponent i BerørbarUdenFeedback så animationen udløses, når brugeren trykker på bolden. Du kan også udløse animationen, når komponenten monteres ved at kalde startAnimation() fungere inde i Reacts useEffect() krog.

Med denne kode bør du have en faldende bold-animation oprettet ved hjælp af Animated.spring().

Dynamiske animationer i React Native

Du har set, hvordan du implementerer en faldende bold-animation ved hjælp af Animated.spring(), men der er mange andre måder, du kan bruge det til at skabe dynamiske animationer.

For eksempel kan du bruge Animated.spring() til at oprette animationer, der simulerer andre fysikbaserede bevægelser, såsom svingende eller roterende objekter.

Ved at kombinere Animated.spring() med andre animationsfunktioner, såsom Animated.timing() eller Animated.sequence(), kan du skabe komplekse og sømløse animationer, der forbedrer brugeroplevelsen.