Bruk av Animated.spring()-metoden for dynamiske animasjoner i React Native

React Natives animerte API-bibliotek kan hjelpe deg med å lage dynamiske, flytende animasjoner med liten innsats.

Lær hvordan du lager animasjoner med en fjærlignende effekt, og finn ut hvordan du kontrollerer varigheten og hastigheten, og bruker dem i virkelige scenarier.

Hva er dynamiske animasjoner?

Dynamiske animasjoner er animasjoner der bevegelsene til animerte objekter ikke er forhåndsprogrammert. Du kan starte dem som svar på brukerinteraksjon eller endringer i miljøet. Teknikken er mest populær i videospillanimasjon, sosiale medier-applikasjoner eller andre former for interaktive medier.

Dynamiske animasjoner kan gi en mer oppslukende og engasjerende opplevelse for brukere, da det gir mulighet for uforutsigbare og responsive bevegelser som kan endres basert på flere faktorer.

Animasjoner i mobilapper har med årene blitt mer og mer komplekse. React Natives standard Animated API har avansert for å imøtekomme disse kompleksitetene. De

Animated.spring() metoden som API gir kan animere React Native-objekter, og skape en dynamisk effekt.

Kontrollere animasjonen

Når du bruker Animated.spring() metoden, må du ha kontroll over animasjonen for å sikre at den oppfører seg slik du ønsker. Animert gir et sett med metoder for å manuelt kontrollere og manipulere React Native-animasjonene dine.

En av disse metodene er Stoppe(), noe som får animasjonen til å stoppe ved gjeldende verdi. Denne metoden er nyttig når du må avbryte en animasjon eller tilbakestille den til utgangstilstanden.

For eksempel:

konst stopAnimation = () => {
 posisjon.stopp(verdi => {
 position.setValue(0);
 });
};

Legg merke til hvordan du kan bruke setValue() metode for å tilbakestille posisjonsverdien til dens opprinnelige tilstand 0.

En annen metode tilgjengelig for deg er nullstille(), som returnerer animasjonen til sin opprinnelige tilstand. Denne metoden er nyttig når du trenger å starte en animasjon på nytt.

Real-World-applikasjoner

Du kan utforske en praktisk bruk av Animated.spring() metode ved å bygge en enkel animasjon. En rund ball vil falle til en overflate når en bruker samhandler med den, og deretter sprette rett tilbake i luften etterpå. Du bør allerede ha et react Native-prosjekt du kan jobbe med.

Lag først en tilstandsvariabel for å spore ballens posisjon:

import Reager, { useState } fra'reagere';
import { Animert } fra'reager-innfødt';
konst App = () => {
konst [posisjon, settposisjon] = brukState(ny Animert. Verdi(0));

komme tilbake (
forvandle: [{ oversettY: posisjon }] }}>
 {/* Ballkomponent her */}
 </Animated.View>
 );
};

Bruk Animert. Verdi å lage en tilstandsvariabel kalt posisjon som vil spore ballens vertikale posisjon. Pakk inn Utsikt komponent i Animert. Utsikt slik at du kan bruke animasjoner på den.

Deretter lager du animasjonsfunksjonen som får ballen til å falle og sprette opp:

konst startAnimasjon = () => {
 Animated.spring (posisjon, {
 å verdsette: 300,
 friksjon: 1,
 Spenninger: 10,
 useNativeDriver: ekte,
 }).start(() => {
 Animated.spring (posisjon, {
 å verdsette: 0,
 friksjon: 1,
 Spenninger: 10,
 useNativeDriver: ekte,
 }).start();
 });
};

Bruk Animated.spring() for å lage en animasjon som flytter ballen fra startposisjonen 0 til sluttposisjonen 300. Spesifiser friksjon og Spenninger verdier for å kontrollere spretteffekten til ballen mens du setter bruk NativeDriver til ekte å forbedre ytelsen.

Du kan deretter implementere koden for å utløse animasjonen når en bruker samhandler med ballen:

komme tilbake (

forvandle: [{ oversettY: posisjon }] }}>
 {/* Ballkomponent her */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Denne koden omslutter Animert. Utsikt komponent i BerørbarUten tilbakemelding slik at animasjonen utløses når brukeren trykker på ballen. Du kan også utløse animasjonen når komponenten monteres ved å ringe startAnimation() funksjon inne i Reacts useEffect() krok.

Med denne koden bør du ha en fallende ball-animasjon laget ved hjelp av Animated.spring().

Dynamiske animasjoner i React Native

Du har sett hvordan du implementerer en fallende ball-animasjon ved å bruke Animated.spring(), men det er mange andre måter du kan bruke den til å lage dynamiske animasjoner.

Du kan for eksempel bruke Animated.spring() til å lage animasjoner som simulerer andre fysikkbaserte bevegelser, for eksempel svingende eller roterende objekter.

Ved å kombinere Animated.spring() med andre animasjonsfunksjoner, for eksempel Animated.timing() eller Animated.sequence(), kan du lage komplekse og sømløse animasjoner som forbedrer brukeropplevelsen.