Kako začeti z animacijami v React Native

Animacije lahko aplikaciji vdahnejo življenje in jo naredijo bolj privlačno in intuitivno za uporabnika. Toda če ste novi v animacijah React Native, je začetek lahko nekoliko zastrašujoč.

Raziščite React Native animacije in ugotovite, kako lahko začnete ustvarjati čudovite, tekoče animacije.

Kako delujejo osnovne animacije React Native?

Animacije lahko ustvarijo gladke prehode med različnimi zasloni ali elementi. Lahko poudarijo informacije ali zagotovijo povratne informacije o dejanjih uporabnikov. Animacije so lahko preproste ali zapletene in lahko uporabljajo različne tehnike, kot je 2D ali 3D gibljiva grafika.

Zaradi prenosljivosti React Native se ga splača uporabljati če ciljate na več platform. Ena njegovih najmočnejših lastnosti je zmožnost ustvarjanja čudovitih animacij za mobilne aplikacije.

Objekt React Native lahko animirate preprosto tako, da spremenite stanje položaja želene komponente.

Na primer:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz {Pogled, StyleSheet} od'react-native';
konst Aplikacija = () => {
// Inicializiraj stanje za sledenje položaju polja
konst [boxPosition, setBoxPosition] = useState(0);
// Uporabite kljuko useEffect za posodobitev položaja polja vsako 1 sekundo
 useEffect(() => {
konst interval = setInterval(() => {
// Posodobite položaj polja z dodajanjem 10 trenutnemu položaju
 setBoxPosition(prevPosition => prevPosition + 10);
 }, 1000);
// Vrni funkcijo čiščenja, da počisti interval, ko komponenta
// odklopi
vrnitev() => clearInterval (interval);
 }, []);
// Nastavite položaj polja z uporabo spremenljivke stanja v vgrajenem slogu
konst boxStyle = {
 transformacija: [{ translateY: boxPosition }]
 };
vrnitev (


 </View>
 );
};
konst styles = StyleSheet.create({
 vsebnik: {
 upogib: 1,
 alignItems: 'center',
 justifyContent: 'center',
 },
 škatla: {
 premer: 100,
 višina: 100,
 Barva ozadja: 'modra',
 },
});
izvozprivzeto aplikacija;

Ta koda upodobi modro polje, ki se vsako sekundo premakne navzdol. Animacija deluje z uporabo useEffect kavelj, da ustvarite časovnik, ki posodablja boxPosition spremenljivko stanja vsako 1 sekundo.

Čeprav to lahko deluje v nekaterih situacijah, to ni najboljša možnost. Posodobitve stanja v React Native delujejo asinhrono, vendar so animacije za pravilno delovanje odvisne od sinhronih posodobitev stanja. Asinhrono izvajanje vaše animacije bo povzročilo, da se posodobitve stanja ne bodo takoj odrazile v upodobljenem izhodu komponente, kar bo pokvarilo čas vaših animacij.

Gre za več knjižnic animacij, kot je Animirano knjižnica, reagirati-native-reanimated, in react-native-animable za ustvarjanje učinkovitih animacij v React Native. Vsaka od teh animacijskih knjižnic odpravi težavo asinhronih posodobitev stanja in je popolnoma idealna.

React Native Animated API

Animated je API, ki ga ponuja React Native. Uporabite ga lahko za ustvarjanje tekočih animacij, ki se odzivajo na interakcije uporabnikov ali spremembe stanja.

Animirani API vam omogoča ustvarjanje animiranih vrednosti, ki jih lahko interpolirate in preslikate v različne slogovne lastnosti vaših komponent. Te vrednosti lahko nato sčasoma posodobite z različnimi metodami animacije. Slogi vaših komponent se bodo nato posodobili, ko se spremenijo animirane vrednosti, kar bo povzročilo gladke animacije.

Animirani zelo dobro deluje s sistemom postavitve React Native. Zaradi tega bodo vaše animacije pravilno integrirane s preostalim uporabniškim vmesnikom za še boljši videz.

Če želite začeti uporabljati Animated v svojem projektu React Native, morate uvoziti datoteko Animirano modul iz 'react-native' v vašo kodo:

uvoz { Animirano } od'react-native';

Ko je Animated uvožen, lahko začnete ustvarjati animacije. Če želite to narediti, najprej ustvarite animirano vrednost, s katero boste manipulirali skozi celotno animacijo:

konst animatedValue = novo Animirano. Vrednost (0);

The Animirano. Vrednost je razred v API-ju React Native Animated, ki predstavlja spremenljivo vrednost. Inicializirate ga lahko z začetno vrednostjo in ga nato sčasoma posodobite z različnimi metodami animacije, ki jih ponuja Animated API, kot je .čas(), .pomlad(), in .razpad (), tako da določite trajanje animacije, funkcijo sproščanja in druge parametre.

Animirana vrednost je podobna vrednosti stanja v komponenti React.

Inicializirate lahko Animirano. Vrednost z vrednostjo začetnega stanja komponente in jo nato čez čas posodobite z uporabo setState metoda.

Na primer, imate komponento, ki ima vrednost stanja štetje, ki predstavlja, kolikokrat je uporabnik kliknil ta gumb.

Ustvarite lahko Animirano. Vrednost in ga inicializirati z vrednostjo začetnega stanja štetje:

konst Aplikacija = () => {
konst [count, setCount] = useState(0);
konst animatedValue = novo Animirano. Vrednost (štetje);
};

Potem, kadar koli štetje stanje posodobitev vrednosti, lahko posodobite animatedValue tudi:

konst handlebuttonClick = () => {
 setCounter (štetje + 1);
 Animated.timing (animatedValue, {
 toValue: štetje + 1,
 trajanje: 500,
 useNativeDriver: prav
 }).start();
};

Ta primer posodablja animatedValue uporabljati Animated.timing() vsakič, ko uporabnik klikne gumb. The animatedValue poganja animacijo in spremeni vrednost v 500 milisekundah.

Z navezovanjem Animirano. Vrednost na vrednost stanja na ta način lahko ustvarite animacije, ki se odzivajo na spremembe v stanju vaše komponente.

Zdaj razumete, kako manipulirati z animirano vrednostjo, nato pa lahko nadaljujete z Interpolacijo animirane vrednosti in jo preslikate v lastnost sloga vaše komponente z uporabo Animated.interpolate() metoda.

Na primer:

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

 {/* vsebina vaše komponente */}
 </View>
);

To bo ustvarilo animacijo, ki postopoma zbledi v Pogled komponento, ko se animirana vrednost spremeni iz 0 v 1.

Razumevanje vrst animacij

Razumevanje vrst animacij in njihovega delovanja je pomembno za ustvarjanje dobrih animacij.

Uporabljati useNativeDriver možnost z animirano izboljša zmogljivost. Ta možnost vam omogoča prenos animacij v izvorno nit uporabniškega vmesnika. Z zmanjšanjem količine potrebne obdelave JavaScript lahko znatno izboljša delovanje.

Vendar vse vrste animacij ne podpirajo izvornega gonilnika. Poskus uporabe izvornega gonilnika z animacijami, ki vključujejo spremembe barv ali postavitve, lahko povzroči nepričakovano vedenje.

Poleg tega lahko animacije, ki vključujejo zapletene sekvence, povzročijo znatne težave pri delovanju na napravah z omejeno procesorsko močjo ali pomnilnikom. Ti primanjkljaji zmogljivosti so lahko opazni tudi, če vaš projekt React Native izvaja nižjo različico, ki je ne izvaja podpira motor Hermes.

Razumevanje prednosti in omejitev različnih vrst animacij vam lahko pomaga izbrati pravi pristop za vaš primer uporabe.

Poskrbite za udobje z domačimi animacijami React

Animacije so močno orodje za ustvarjanje privlačnih in dinamičnih uporabniških vmesnikov v aplikacijah React Native. Animirani API ponuja prilagodljiv in zmogljiv način za ustvarjanje enostavnih in zapletenih zaporednih animacij.

Kljub temu je pomembno upoštevati vpliv animacij na zmogljivost in izbrati ustrezen pristop in knjižnico za vašo situacijo.