Meetodi Animated.spring() kasutamine dünaamiliste animatsioonide jaoks rakenduses React Native

React Native'i animeeritud API teek aitab teil vähese vaevaga luua dünaamilisi ja sujuvaid animatsioone.

Õppige looma vedruefektiga animatsioone, seejärel uurige, kuidas juhtida nende kestust ja kiirust ning rakendada neid reaalsetes stsenaariumides.

Mis on dünaamilised animatsioonid?

Dünaamilised animatsioonid on animatsioonid, kus animeeritud objektide liikumine ei ole eelprogrammeeritud. Saate neid käivitada vastusena kasutaja interaktsioonile või keskkonnamuutustele. Tehnika on kõige populaarsem videomängude animatsioon, sotsiaalmeediarakendused või muud interaktiivse meedia vormid.

Dünaamilised animatsioonid võivad pakkuda kasutajatele kaasahaaravamat ja kaasahaaravamat kogemust, kuna need võimaldavad ettearvamatuid ja reageerivaid liigutusi, mis võivad mitme teguri tõttu muutuda.

Animatsioonid mobiilirakendustes on aastate jooksul muutunud üha keerukamaks. React Native'i animeeritud vaike-API on nende keerukustega toimetulemiseks edasi arenenud. The

Animeeritud.kevad() API pakutav meetod võib animeerida React Native objekte, luues dünaamilise efekti.

Animatsiooni juhtimine

Kui kasutate Animeeritud.kevad() meetodil, peate omama kontrolli animatsiooni üle, et tagada selle käitumine soovitud viisil. Animated pakub meetodite komplekti React Native animatsioonide käsitsi juhtimiseks ja manipuleerimiseks.

Üks neist meetoditest on stop (), mis põhjustab animatsiooni seiskumise praegusel väärtusel. See meetod on kasulik, kui peate animatsiooni tühistama või lähtestama selle algolekusse.

Näiteks:

konst stopAnimatsioon = () => {
 position.stop(väärtus => {
 position.setValue(0);
 });
};

Pange tähele, kuidas saate kasutada setValue() meetod positsiooni väärtuse lähtestamiseks algolekusse 0.

Teine teile kättesaadav meetod on reset(), mis tagastab animatsiooni algolekusse. See meetod on kasulik, kui peate animatsiooni taaskäivitama.

Reaalmaailma rakendused

Saate uurida selle praktilist kasutamist Animeeritud.kevad() meetodit, ehitades lihtsa animatsiooni. Ümmargune pall kukub pinnale, kui kasutaja sellega suhtleb, ja põrkab seejärel otse õhku tagasi. Teil peaks juba olema react Native projekt, millega saate töötada.

Esiteks looge olekumuutuja, et jälgida palli asukohta:

importida Reageerige, { useState } alates'reageeri';
importida { Animeeritud } alates'react-native';
konst Rakendus = () => {
konst [positsioon, setPosition] = useState(uus Animeeritud. Väärtus(0));

tagasi (
teisendada: [{ tõlkidaY: positsioon }] }}>
 {/* Palli komponent siin */}
 </Animated.View>
 );
};

Kasuta Animeeritud. Väärtus olekumuutuja loomiseks nimega positsiooni mis jälgib palli vertikaalset asendit. Pakkige Vaade komponent sisse Animeeritud. Vaade et saaksite sellele animatsioone rakendada.

Järgmisena looge animatsioonifunktsioon, mis paneb palli kukkuma ja üles hüppama:

konst startAnimatsioon = () => {
 Animated.spring (positsioon, {
 hindama: 300,
 hõõrdumine: 1,
 pinge: 10,
 useNativeDriver: tõsi,
 }).start(() => {
 Animated.spring (positsioon, {
 hindama: 0,
 hõõrdumine: 1,
 pinge: 10,
 useNativeDriver: tõsi,
 }).start();
 });
};

Kasuta Animeeritud.kevad() et luua animatsioon, mis liigutab palli algsest positsioonist 0 lõppasendisse 300. Täpsustage hõõrdumine ja pinget väärtused palli põrkeefekti reguleerimiseks seadistamise ajal kasutage NativeDriveri juurde tõsi jõudluse parandamiseks.

Seejärel saate koodi rakendada, et käivitada animatsioon, kui kasutaja palliga suhtleb.

tagasi (

teisendada: [{ tõlkidaY: positsioon }] }}>
 {/* Palli komponent siin */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

See kood ümbritseb Animeeritud. Vaade komponent sisse Puudutatav, ilma tagasisideta nii et animatsioon käivitub, kui kasutaja palli vajutab. Animatsiooni saate käivitada ka komponendi paigaldamisel, helistades numbrile startAnimation() funktsiooni Reacti sees useEffect() konks.

Selle koodiga peaksite laskma luua langeva palli animatsiooni Animeeritud.kevad().

Dünaamilised animatsioonid React Native'is

Olete näinud, kuidas animatsiooni Animated.spring() abil realiseerida kukkuva palliga animatsioon, kuid dünaamiliste animatsioonide loomiseks on ka palju muid võimalusi.

Näiteks saate Animated.spring() abil luua animatsioone, mis simuleerivad muid füüsikapõhiseid liikumisi, nagu objektide kõikumine või pöörlemine.

Kombineerides Animated.spring() teiste animatsioonifunktsioonidega, nagu Animated.timing() või Animated.sequence(), saate luua keerukaid ja sujuvaid animatsioone, mis parandavad kasutajakogemust.