Använder metoden Animated.spring() för dynamiska animationer i React Native

React Natives Animated API-bibliotek kan hjälpa dig att skapa dynamiska, flytande animationer med liten ansträngning.

Lär dig hur du skapar animationer med en fjäderliknande effekt, ta reda på hur du kontrollerar deras varaktighet och hastighet och tillämpar dem i verkliga scenarier.

Vad är dynamiska animationer?

Dynamiska animationer är animeringar där rörelserna av animerade objekt inte är förprogrammerade. Du kan starta dem som svar på användarinteraktion eller förändringar i miljön. Tekniken är mest populär i videospelsanimation, sociala medieapplikationer eller andra former av interaktiva medier.

Dynamiska animationer kan ge en mer uppslukande och engagerande upplevelse för användarna, eftersom det möjliggör oförutsägbara och lyhörda rörelser som kan förändras baserat på flera faktorer.

Animationer i mobilappar har med åren blivit mer och mer komplexa. React Natives standard Animated API har avancerat för att klara dessa komplexiteter. De

Animated.spring() metod som API tillhandahåller kan animera React Native-objekt, vilket skapar en dynamisk effekt.

Styr animeringen

När du använder Animated.spring() metod måste du ha kontroll över animeringen för att säkerställa att den beter sig som du önskar. Animated tillhandahåller en uppsättning metoder för att manuellt styra och manipulera dina React Native-animationer.

En av dessa metoder är sluta(), vilket gör att animeringen stannar vid sitt nuvarande värde. Den här metoden är användbar när du behöver avbryta en animering eller återställa den till dess ursprungliga tillstånd.

Till exempel:

konst stopAnimation = () => {
 position.stop(värde => {
 position.setValue(0);
 });
};

Notera hur du kan använda satt värde() metod för att återställa positionsvärdet till dess ursprungliga tillstånd av 0.

En annan metod tillgänglig för dig är återställa(), som återställer animationen till dess ursprungliga tillstånd. Den här metoden är användbar när du behöver starta om en animation.

Verkliga applikationer

Du kan utforska en praktisk användning av Animated.spring() metod genom att bygga en enkel animation. En rund boll kommer att falla till en yta när en användare interagerar med den och studsar sedan direkt tillbaka i luften efteråt. Du bör redan ha ett react Native-projekt som du kan arbeta med.

Skapa först en tillståndsvariabel för att spåra bollens position:

importera Reagera, { useState } från'reagera';
importera { Animerad } från"reagera-native";
konst App = () => {
konst [position, setPosition] = useState(ny Animerad. Värde(0));

lämna tillbaka (
omvandla: [{ översättY: position }] }}>
 {/* Bollkomponent här */}
 </Animated.View>
 );
};

Använda sig av Animerad. Värde för att skapa en tillståndsvariabel som kallas placera som kommer att spåra bollens vertikala position. Linda in Se komponent i Animerad. Se så att du kan använda animationer på den.

Skapa sedan animationsfunktionen som får bollen att falla och studsa upp:

konst startAnimation = () => {
 Animated.spring (position, {
 att värdesätta: 300,
 friktion: 1,
 spänning: 10,
 useNativeDriver: Sann,
 }).Start(() => {
 Animated.spring (position, {
 att värdesätta: 0,
 friktion: 1,
 spänning: 10,
 useNativeDriver: Sann,
 }).Start();
 });
};

Använda sig av Animated.spring() för att skapa en animation som flyttar bollen från dess initiala position 0 till en slutposition på 300. Specificera friktion och spänning värden för att kontrollera bollens studseffekt under inställning använd NativeDriver till Sann för att förbättra prestandan.

Du kan sedan implementera koden för att utlösa animeringen när en användare interagerar med bollen:

lämna tillbaka (

omvandla: [{ översättY: position }] }}>
 {/* Bollkomponent här */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Denna kod omsluter Animerad. Se komponent i Berörbar Utan feedback så att animeringen utlöses när användaren trycker på bollen. Du kan också utlösa animeringen när komponenten monteras genom att anropa startAnimation() fungera inuti Reacts useEffect() krok.

Med den här koden bör du ha en fallande boll-animation skapad med hjälp av Animated.spring().

Dynamiska animationer i React Native

Du har sett hur du implementerar en fallande boll-animation med Animated.spring(), men det finns många andra sätt du kan använda den för att skapa dynamiska animationer.

Du kan till exempel använda Animated.spring() för att skapa animationer som simulerar andra fysikbaserade rörelser, till exempel svängande eller roterande objekt.

Genom att kombinera Animated.spring() med andra animationsfunktioner, som Animated.timing() eller Animated.sequence(), kan du skapa komplexa och sömlösa animeringar som förbättrar användarupplevelsen.