Početak rada s animacijama u React Native

Animacije mogu udahnuti život aplikaciji, čineći je privlačnijom i intuitivnijom za korisnika. Ali ako ste novi u React Native animacijama, početak može biti pomalo zastrašujući.

Istražite React Native animacije i saznajte kako možete početi stvarati prekrasne, glatke animacije.

Kako funkcioniraju osnovne animacije Reacta?

Animacije mogu stvoriti glatke prijelaze između različitih zaslona ili elemenata. Mogu istaknuti informacije ili dati povratne informacije o radnjama korisnika. Animacije mogu biti jednostavne ili složene i mogu koristiti različite tehnike, poput 2D ili 3D grafike pokreta.

Prenosivost React Nativea čini ga vrijednim korištenja ako ciljate na nekoliko platformi. Jedna od njegovih najjačih značajki je mogućnost stvaranja prekrasnih animacija za mobilne aplikacije.

React Native objekt možete animirati jednostavnom promjenom položaja željene komponente.

Na primjer:

uvoz Reagiraj, {useState, useEffect} 

instagram viewer

iz'reagirati';
uvoz { Prikaz, Stilska tablica } iz'react-native';
konst Aplikacija = () => {
// Inicijaliziraj stanje za praćenje položaja okvira
konst [boxPosition, setBoxPosition] = useState(0);
// Upotrijebite kuku useEffect za ažuriranje položaja okvira svake 1 sekunde
 useEffect(() => {
konst interval = setInterval(() => {
// Ažuriraj poziciju okvira dodavanjem 10 trenutnoj poziciji
 setBoxPosition(prevPosition => prethodniPozicija + 10);
 }, 1000);
// Vrati funkciju čišćenja za brisanje intervala kada komponenta
// demontira
povratak() => clearInterval (interval);
 }, []);
// Postavite položaj okvira pomoću varijable stanja u inline stilu
konst boxStyle = {
 transformacija: [{ prevestiY: boxPosition }]
 };
povratak (


 </View>
 );
};
konst stilovi = StyleSheet.create({
 spremnik: {
 savijati: 1,
 poravnati stavke: 'centar',
 justifyContent: 'centar',
 },
 okvir: {
 širina: 100,
 visina: 100,
 boja pozadine: 'plavo',
 },
});
izvozzadano aplikacija;

Ovaj kod renderira plavi okvir koji se svake sekunde pomiče prema dolje. Animacija radi pomoću useEffect kuka za stvaranje mjerača vremena koji ažurira boxPosition varijabla stanja svake 1 sekunde.

Iako ovo može funkcionirati u nekim situacijama, ovo nije najbolja opcija. Ažuriranja stanja u React Native rade asinkrono, ali animacije se oslanjaju na sinkrona ažuriranja stanja da bi radile ispravno. Asinkrona implementacija vaše animacije uzrokovat će da se ažuriranja stanja neće odmah odraziti u renderiranom izlazu komponente, što će pokvariti vrijeme vaših animacija.

Postoji nekoliko biblioteka animacije poput Animirani knjižnica, reagirati-domaći-reanimirani, i reagirati-native-animable za izradu učinkovitih animacija u React Native. Svaka od ovih biblioteka animacija uklanja problem asinkronog ažuriranja stanja i savršeno je idealna.

React Native Animated API

Animated je API koji pruža React Native. Možete ga koristiti za stvaranje glatkih animacija koje reagiraju na interakcije korisnika ili promjene stanja.

Animirani API omogućuje vam stvaranje animiranih vrijednosti koje možete interpolirati i preslikati na različita stilska svojstva vaših komponenti. Zatim možete ažurirati te vrijednosti tijekom vremena koristeći različite metode animacije. Stilovi vaših komponenata tada će se ažurirati kako se mijenjaju animirane vrijednosti, što će rezultirati glatkim animacijama.

Animated jako dobro radi sa sustavom rasporeda React Native. Zbog toga će vaše animacije biti ispravno integrirane s ostatkom vašeg korisničkog sučelja za još bolji izgled.

Da biste počeli koristiti Animated u svom React Native projektu, trebate uvesti Animirani modul od 'reagirati izvorno' u vaš kod:

uvoz { Animirani } iz'react-native';

S uvezenim Animiranim, možete početi stvarati animacije. Da biste to učinili, prvo stvorite animiranu vrijednost kojom ćete manipulirati tijekom cijele animacije:

konst animatedValue = novi Animirani. Vrijednost(0);

The Animirani. Vrijednost je klasa u React Native Animated API-ju koja predstavlja promjenjivu vrijednost. Možete ga inicijalizirati početnom vrijednošću, a zatim ažurirati tijekom vremena koristeći različite metode animacije koje nudi Animated API, kao što je .vrijeme (), .Proljeće(), i .propadanje(), određivanjem trajanja animacije, funkcije ublažavanja i drugih parametara.

Animirana vrijednost slična je vrijednosti stanja u React komponenti.

Možete inicijalizirati Animirani. Vrijednost s početnom vrijednošću stanja komponente, a zatim je ažurirajte tijekom vremena pomoću setState metoda.

Na primjer, imate komponentu koja ima vrijednost stanja računati, što predstavlja koliko je puta korisnik kliknuo taj gumb.

Možete izraditi Animirani. Vrijednost i inicijalizirati ga početnom vrijednošću stanja od računati:

konst Aplikacija = () => {
konst [count, setCount] = useState(0);
konst animatedValue = novi Animirani. Vrijednost (count);
};

Zatim, kad god računati stanje ažuriranja vrijednosti, možete ažurirati animatedValue isto:

konst handlebuttonClick = () => {
 setCounter (broj + 1);
 Animated.timing (animatedValue, {
 toValue: brojati + 1,
 trajanje: 500,
 useNativeDriver: pravi
 }).početak();
};

Ovaj primjer ažurira animatedValue koristiti Animated.timing() svaki put kada korisnik klikne gumb. The animatedValue pokreće animaciju i mijenja vrijednost tijekom 500 milisekundi.

Odnoseći se Animirani. Vrijednost na vrijednost stanja na ovaj način možete kreirati animacije koje odgovaraju promjenama u stanju vaše komponente.

Sada znate kako manipulirati animiranom vrijednošću, a zatim možete interpolirati animiranu vrijednost i preslikati je na svojstvo stila vaše komponente pomoću Animated.interpolate() metoda.

Na primjer:

konst neprozirnost = animatedValue.interpolate({
 inputRange: [0, 1],
 outputRange: [0, 1]
});
povratak (

 {/* sadržaj vaše komponente */}
 </View>
);

Ovo će stvoriti animaciju koja postupno blijedi u Pogled komponentu dok se animirana vrijednost mijenja s 0 na 1.

Razumijevanje vrsta animacija

Razumijevanje vrsta animacija i načina na koji funkcioniraju važno je za stvaranje dobrih animacija.

Koristiti useNativeDriver opcija s animiranim poboljšava performanse. Ova vam opcija omogućuje prijenos animacija u nit izvornog korisničkog sučelja. Može značajno poboljšati performanse smanjenjem količine potrebne obrade JavaScripta.

Međutim, ne podržavaju sve vrste animacija izvorni upravljački program. Pokušaj korištenja izvornog upravljačkog programa s animacijama koje uključuju promjene boje ili izgleda može uzrokovati neočekivano ponašanje.

Osim toga, animacije koje uključuju složene sekvence mogu uzrokovati značajne probleme s performansama na uređajima s ograničenom procesorskom snagom ili memorijom. Ovi nedostaci izvedbe također mogu biti uočljivi ako vaš React Native projekt pokreće nižu verziju koja to ne radi podržavaju Hermesov motor.

Razumijevanje prednosti i ograničenja različitih vrsta animacije može vam pomoći da odaberete pravi pristup za svoj slučaj upotrebe.

Osjećajte se ugodno uz React Native Animations

Animacije su moćan alat za stvaranje zanimljivih i dinamičnih korisničkih sučelja u React Native aplikacijama. Animirani API pruža fleksibilan i učinkovit način za stvaranje jednostavnih i složenih sekvenci animacija.

Ipak, važno je razmotriti učinak animacija na izvedbu i odabrati odgovarajući pristup i biblioteku za svoju situaciju.