Metodes Animated.spring() izmantošana dinamiskām animācijām programmā React Native

React Native Animated API bibliotēka var palīdzēt jums izveidot dinamiskas, plūstošas ​​animācijas ar nelielu piepūli.

Uzziniet, kā izveidot animācijas ar atsperei līdzīgu efektu, pēc tam uzziniet, kā kontrolēt to ilgumu un ātrumu, kā arī izmantot tos reālos scenārijos.

Kas ir dinamiskās animācijas?

Dinamiskās animācijas ir animācijas, kurās animēto objektu kustības nav iepriekš ieprogrammētas. Varat tos sākt, reaģējot uz lietotāja mijiedarbību vai izmaiņām vidē. Tehnika ir vispopulārākā videospēļu animācija, sociālo mediju lietojumprogrammas vai citi interaktīvie mediji.

Dinamiskās animācijas var nodrošināt lietotājiem aizraujošāku un saistošāku pieredzi, jo tās ļauj veikt neparedzamas un atsaucīgas kustības, kuras var mainīties, pamatojoties uz vairākiem faktoriem.

Animācijas mobilajās lietotnēs gadu gaitā ir kļuvušas arvien sarežģītākas. React Native noklusējuma animētā API ir pilnveidota, lai pielāgotos šīm sarežģītībām. The

Animated.spring() API nodrošinātā metode var animēt React Native objektus, radot dinamisku efektu.

Animācijas kontrole

Lietojot Animated.spring() metodi, jums būs jākontrolē animācija, lai nodrošinātu, ka tā darbojas, kā vēlaties. Animated nodrošina metožu kopumu, lai manuāli kontrolētu un apstrādātu jūsu React Native animācijas.

Viena no šīm metodēm ir stop (), kas izraisa animācijas apturēšanu tās pašreizējā vērtībā. Šī metode ir noderīga, ja nepieciešams atcelt animāciju vai atiestatīt to sākotnējā stāvoklī.

Piemēram:

konst stopAnimācija = () => {
 position.stop(vērtību => {
 position.setValue(0);
 });
};

Ņemiet vērā, kā varat izmantot setValue() metode pozīcijas vērtības atiestatīšanai sākotnējā stāvoklī 0.

Vēl viena jums pieejama metode ir atiestatīt (), kas atgriež animāciju tās sākotnējā stāvoklī. Šī metode ir noderīga, ja nepieciešams restartēt animāciju.

Reālās pasaules lietojumprogrammas

Jūs varat izpētīt, kā praktiski izmantot Animated.spring() metodi, izveidojot vienkāršu animāciju. Apaļa bumbiņa nokritīs uz virsmas, kad lietotājs ar to mijiedarbojas, un pēc tam atlēks atpakaļ gaisā. Jums jau vajadzētu būt react Native projektam, ar kuru varat strādāt.

Vispirms izveidojiet stāvokļa mainīgo, lai izsekotu bumbiņas stāvokli:

imports Reaģēt, { useState } no'reaģēt';
imports { Animēts } no'react-native';
konst Lietotne = () => {
konst [pozīcija, setPosition] = useState(jauns Animēts. Vērtība(0));

atgriezties (
pārveidot: [{ tulkotY: pozīcija }] }}>
 {/* Bumbas sastāvdaļa šeit */}
 </Animated.View>
 );
};

Izmantot Animēts. Vērtība lai izveidotu stāvokļa mainīgo, ko sauc pozīciju kas izsekos bumbiņas vertikālo stāvokli. Aptiniet Skatīt sastāvdaļa iekšā Animēts. Skatīt lai tajā varētu lietot animācijas.

Pēc tam izveidojiet animācijas funkciju, kas liks bumbiņai nokrist un atlēkt uz augšu:

konst startAnimation = () => {
 Animated.spring (pozīcija, {
 novērtēt: 300,
 berze: 1,
 spriedze: 10,
 useNativeDriver: taisnība,
 }).sākt(() => {
 Animated.spring (pozīcija, {
 novērtēt: 0,
 berze: 1,
 spriedze: 10,
 useNativeDriver: taisnība,
 }).sākt();
 });
};

Izmantot Animated.spring() lai izveidotu animāciju, kas pārvietos bumbu no sākotnējās pozīcijas 0 uz galīgo pozīciju 300. Norādiet berze un spriedze vērtības, lai kontrolētu bumbas atlēcienu efektu iestatīšanas laikā useNativeDriver uz taisnība lai uzlabotu veiktspēju.

Pēc tam varat ieviest kodu, lai aktivizētu animāciju, kad lietotājs mijiedarbojas ar bumbu.

atgriezties (

pārveidot: [{ tulkotY: pozīcija }] }}>
 {/* Bumbas sastāvdaļa šeit */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Šis kods iesaiņo Animēts. Skatīt sastāvdaļa iekšā PieskaramsBezAtsauksmes lai animācija tiktu aktivizēta, kad lietotājs nospiež bumbu. Varat arī aktivizēt animāciju, kad komponents tiek piestiprināts, izsaucot startAnimation() funkciju React iekšpusē useEffect() āķis.

Izmantojot šo kodu, jums vajadzētu izveidot krītošas ​​bumbas animāciju, izmantojot Animated.spring().

Dinamiskās animācijas programmā React Native

Jūs esat redzējis, kā īstenot krītošas ​​bumbas animāciju, izmantojot Animated.spring(), taču ir daudz citu veidu, kā to izmantot, lai izveidotu dinamiskas animācijas.

Piemēram, varat izmantot Animated.spring(), lai izveidotu animācijas, kas simulē citas uz fiziku balstītas kustības, piemēram, šūpošanos vai rotējošus objektus.

Apvienojot Animated.spring() ar citām animācijas funkcijām, piemēram, Animated.timing() vai Animated.sequence(), varat izveidot sarežģītas un viengabalainas animācijas, kas uzlabo lietotāja pieredzi.