Korištenje metode Animated.spring() za dinamičke animacije u React Native

React Native's Animated API biblioteka može vam pomoći da stvorite dinamične, fluidne animacije uz malo truda.

Naučite kako izraditi animacije s efektom proljeća, zatim saznajte kako kontrolirati njihovo trajanje i brzinu te ih primijeniti u scenarijima stvarnog svijeta.

Što su dinamičke animacije?

Dinamičke animacije su animacije u kojima pokreti animiranih objekata nisu unaprijed programirani. Možete ih pokrenuti kao odgovor na interakciju korisnika ili promjene u okruženju. Tehnika je najpopularnija u animacija video igrica, aplikacije društvenih medija ili drugi oblici interaktivnih medija.

Dinamičke animacije mogu pružiti impresivnije i privlačnije iskustvo za korisnike, jer dopuštaju nepredvidive i osjetljive pokrete koji se mogu promijeniti na temelju nekoliko čimbenika.

Animacije u mobilnim aplikacijama s godinama postaju sve složenije. Zadani animirani API React Native napredovao je kako bi se prilagodio ovim složenostima. The

Animated.spring() metoda koju API pruža može animirati React Native objekte, stvarajući dinamički učinak.

Upravljanje animacijom

Prilikom korištenja Animated.spring() način, morat ćete imati kontrolu nad animacijom kako biste bili sigurni da se ponaša kako želite. Animated pruža skup metoda za ručnu kontrolu i manipuliranje vašim React Native animacijama.

Jedna od tih metoda je Stop(), što uzrokuje zaustavljanje animacije na trenutnoj vrijednosti. Ova je metoda korisna kada trebate poništiti animaciju ili je vratiti na početno stanje.

Na primjer:

konst stopAnimation = () => {
 position.stop(vrijednost => {
 position.setValue(0);
 });
};

Napomena kako možete koristiti setValue() metoda za vraćanje vrijednosti položaja na početno stanje 0.

Druga metoda koja vam je dostupna je reset(), koji vraća animaciju u početno stanje. Ova je metoda korisna kada trebate ponovno pokrenuti animaciju.

Aplikacije iz stvarnog svijeta

Možete istražiti praktičnu upotrebu Animated.spring() metoda izgradnjom jednostavne animacije. Okrugla lopta će pasti na površinu kada korisnik stupi u interakciju s njom, a potom će se odbiti natrag u zrak. Već biste trebali imati React Native projekt s kojim možete raditi.

Prvo stvorite varijablu stanja za praćenje položaja lopte:

uvoz Reagiraj, {useState} iz'reagirati';
uvoz { Animirani } iz'react-native';
konst Aplikacija = () => {
konst [položaj, setPosition] = useState(novi Animirani. Vrijednost(0));

povratak (
transformirati: [{ prevestiY: položaj }] }}>
 {/* Komponenta lopte ovdje */}
 </Animated.View>
 );
};

Koristiti Animirani. Vrijednost za stvaranje varijable stanja tzv položaj koji će pratiti vertikalni položaj lopte. Zamotajte Pogled komponenta u Animirani. Pogled tako da na njega možete primijeniti animacije.

Zatim izradite funkciju animacije koja će natjerati loptu da padne i odskoči uvis:

konst startAnimation = () => {
 Animated.spring (pozicija, {
 cijeniti: 300,
 trenje: 1,
 napetost: 10,
 useNativeDriver: pravi,
 }).početak(() => {
 Animated.spring (pozicija, {
 cijeniti: 0,
 trenje: 1,
 napetost: 10,
 useNativeDriver: pravi,
 }).početak();
 });
};

Koristiti Animated.spring() za stvaranje animacije koja će pomaknuti lopticu s početne pozicije 0 na konačnu poziciju 300. Navedite trenje i napetost vrijednosti za kontrolu učinka odbijanja lopte tijekom postavljanja useNativeDriver do pravi za poboljšanje performansi.

Zatim možete implementirati kod za pokretanje animacije kada korisnik stupi u interakciju s loptom:

povratak (

transformirati: [{ prevestiY: položaj }] }}>
 {/* Komponenta lopte ovdje */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Ovaj kod obavija Animirani. Pogled komponenta u Dodirljivo bez povratne informacije tako da se animacija aktivira kada korisnik pritisne loptu. Također možete pokrenuti animaciju kada se komponenta montira pozivom startAnimation() funkcija unutar React-a useEffect() kuka.

S ovim kodom trebali biste imati animaciju padajuće lopte kreiranu pomoću Animated.spring().

Dinamičke animacije u React Native

Vidjeli ste kako implementirati animaciju padajuće lopte pomoću Animated.spring(), ali postoji mnogo drugih načina na koje je možete koristiti za stvaranje dinamičkih animacija.

Na primjer, možete koristiti Animated.spring() za stvaranje animacija koje simuliraju druge pokrete temeljene na fizici, kao što je njihanje ili rotiranje objekata.

Kombiniranjem Animated.spring() s drugim funkcijama animacije, kao što su Animated.timing() ili Animated.sequence(), možete stvoriti složene i besprijekorne animacije koje poboljšavaju korisničko iskustvo.