Uporaba metode Animated.spring() za dinamične animacije v React Native

React Native's Animated API knjižnica vam lahko pomaga ustvariti dinamične, tekoče animacije z malo truda.

Naučite se ustvariti animacije z učinkom pomladi, nato ugotovite, kako nadzorovati njihovo trajanje in hitrost ter jih uporabiti v realnih scenarijih.

Kaj so dinamične animacije?

Dinamične animacije so animacije, pri katerih premiki animiranih predmetov niso vnaprej programirani. Zaženete jih lahko kot odgovor na interakcijo uporabnika ali spremembe okolja. Tehnika je najbolj priljubljena v animacija video iger, aplikacije družbenih medijev ali druge oblike interaktivnih medijev.

Dinamične animacije lahko zagotovijo bolj poglobljeno in privlačno izkušnjo za uporabnike, saj omogočajo nepredvidljive in odzivne gibe, ki se lahko spremenijo na podlagi več dejavnikov.

Animacije v mobilnih aplikacijah so z leti postajale vse bolj zapletene. Privzeti animirani API React Native je napredoval, da se prilagodi tem zapletenostim. The

Animated.spring() Metoda, ki jo ponuja API, lahko animira objekte React Native in ustvari dinamičen učinek.

Nadzor nad animacijo

Pri uporabi Animated.spring() način, boste morali imeti nadzor nad animacijo, da zagotovite, da se obnaša, kot želite. Animated ponuja nabor metod za ročni nadzor in manipulacijo vaših animacij React Native.

Ena od teh metod je stop(), kar povzroči, da se animacija ustavi pri trenutni vrednosti. Ta metoda je uporabna, ko morate preklicati animacijo ali jo ponastaviti na začetno stanje.

Na primer:

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

Upoštevajte, kako lahko uporabite setValue() metoda za ponastavitev vrednosti položaja na začetno stanje 0.

Druga metoda, ki vam je na voljo, je ponastaviti(), ki vrne animacijo v začetno stanje. Ta metoda je uporabna, ko morate znova zagnati animacijo.

Aplikacije iz resničnega sveta

Lahko raziščete praktično uporabo Animated.spring() metodo z izdelavo preproste animacije. Okrogla žoga bo padla na površino, ko bo uporabnik z njo sodeloval, nato pa se bo odbila nazaj v zrak. Morali bi že imeti projekt React Native, s katerim lahko delate.

Najprej ustvarite spremenljivko stanja za sledenje položaju žoge:

uvoz Odziv, {useState} od'reagirati';
uvoz { Animirano } od'react-native';
konst Aplikacija = () => {
konst [položaj, setPosition] = useState(novo Animirano. Vrednost (0));

vrnitev (
transformirati: [{ translateY: položaj }] }}>
 {/* Komponenta žoge tukaj */}
 </Animated.View>
 );
};

Uporaba Animirano. Vrednost da ustvarite spremenljivko stanja, imenovano položaj ki bo sledil navpičnemu položaju žoge. Zavijte Pogled komponenta v Animirano. Pogled tako da lahko nanj uporabite animacije.

Nato ustvarite animacijsko funkcijo, zaradi katere bo žoga padla in odskočila navzgor:

konst startAnimation = () => {
 Animated.spring (položaj, {
 ceniti: 300,
 trenje: 1,
 napetost: 10,
 useNativeDriver: prav,
 }).start(() => {
 Animated.spring (položaj, {
 ceniti: 0,
 trenje: 1,
 napetost: 10,
 useNativeDriver: prav,
 }).start();
 });
};

Uporaba Animated.spring() da ustvarite animacijo, ki bo žogo premaknila iz začetnega položaja 0 na končni položaj 300. Navedite trenje in napetost vrednosti za nadzor učinka odbijanja žoge med nastavljanjem useNativeDriver do prav za izboljšanje delovanja.

Nato lahko implementirate kodo za sprožitev animacije, ko uporabnik komunicira z žogo:

vrnitev (

transformirati: [{ translateY: položaj }] }}>
 {/* Komponenta žoge tukaj */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Ta koda ovije Animirano. Pogled komponenta v Na dotik brez povratnih informacij tako da se animacija sproži, ko uporabnik pritisne žogo. Animacijo lahko sprožite tudi, ko se komponenta namesti, tako da pokličete startAnimation() funkcijo znotraj React-a useEffect() kavelj.

S to kodo bi morali imeti animacijo padajoče žoge, ustvarjeno z uporabo Animated.spring().

Dinamične animacije v React Native

Videli ste, kako implementirati animacijo padajoče žoge s funkcijo Animated.spring(), vendar obstaja veliko drugih načinov, kako jo lahko uporabite za ustvarjanje dinamičnih animacij.

Na primer, lahko uporabite Animated.spring() za ustvarjanje animacij, ki simulirajo druga gibanja, ki temeljijo na fiziki, kot je nihanje ali vrtenje predmetov.

S kombiniranjem Animated.spring() z drugimi funkcijami za animacijo, kot sta Animated.timing() ali Animated.sequence(), lahko ustvarite zapletene in brezšivne animacije, ki izboljšajo uporabniško izkušnjo.