Darba sākšana ar animācijām programmā React Native

Animācijas var lietotnē iedvest dzīvību, padarot to lietotājam saistošāku un intuitīvāku. Taču, ja React Native animācijas esat iesācējs, sākšana var būt nedaudz biedējoša.

Izpētiet React Native animācijas un uzziniet, kā varat sākt veidot skaistas, gludas animācijas.

Kā darbojas Basic React vietējās animācijas?

Animācijas var radīt vienmērīgas pārejas starp dažādiem ekrāniem vai elementiem. Tie var izcelt informāciju vai sniegt atsauksmes par lietotāja darbībām. Animācijas var būt vienkāršas vai sarežģītas, un tajās var izmantot dažādas metodes, piemēram, 2D vai 3D kustības grafiku.

Pateicoties React Native pārnesamībai, ir vērts to izmantot ja atlasāt vairākas platformas. Viena no tās spēcīgākajām funkcijām ir iespēja izveidot skaistas animācijas mobilajām lietotnēm.

Varat animēt React Native objektu, vienkārši mainot vajadzīgā komponenta pozīcijas stāvokli.

Piemēram:

imports Reaģēt, { useState, useEffect } 





instagram viewer

no'reaģēt';
imports { Skats, stila lapa } no'react-native';
konst Lietotne = () => {
// Inicializēt stāvokli, lai izsekotu lodziņa pozīciju
konst [boxPosition, setBoxPosition] = useState(0);
// Izmantojiet useEffect āķi, lai atjauninātu kastes pozīciju ik pēc 1 sekundes
 useEffect(() => {
konst intervāls = setInterval(() => {
// Atjauniniet lodziņa pozīciju, pievienojot 10 pašreizējai pozīcijai
 setBoxPosition(iepriekseja pozīcija => prevPosition + 10);
 }, 1000);
// Atgriež tīrīšanas funkciju, lai notīrītu intervālu, kad komponents
// atmontē
atgriezties() => clearInterval (intervāls);
 }, []);
// Iestatiet lodziņa pozīciju, izmantojot stāvokļa mainīgo iekļautajā stilā
konst boxStyle = {
 pārveidot: [{ tulkotY: boxPosition }]
 };
atgriezties (


 </View>
 );
};
konst stili = StyleSheet.create({
 konteiners: {
 flex: 1,
 alignItems: 'centrs',
 justifyContent: 'centrs',
 },
 lodziņš: {
 platums: 100,
 augstums: 100,
 fona krāsa: 'zils',
 },
});
eksportētnoklusējuma Lietotne;

Šis kods atveido zilu lodziņu, kas katru sekundi pārvietojas uz leju. Animācija darbojas, izmantojot useEffect āķis, lai izveidotu taimeri, kas atjaunina kastes pozīcija stāvokļa mainīgais ik pēc 1 sekundes.

Lai gan dažās situācijās tas var darboties, tas nav labākais risinājums. Stāvokļa atjauninājumi programmā React Native darbojas asinhroni, taču animācijas paļaujas uz sinhroniem stāvokļa atjauninājumiem, lai darbotos pareizi. Asinhroni ieviešot animāciju, stāvokļa atjauninājumi nekavējoties netiks atspoguļoti komponenta renderētajā izvadē, tādējādi izjaucot animāciju laiku.

Tās ir vairākas animācijas bibliotēkas, piemēram, Animēts bibliotēka, reaģēt-native-reanimated, un reaģēt-native-animable performanču animāciju veidošanai programmā React Native. Katra no šīm animācijas bibliotēkām novērš asinhrono stāvokļa atjauninājumu problēmu un ir ideāli piemērota.

React Native Animated API

Animated ir API, ko nodrošina React Native. Varat to izmantot, lai izveidotu vienmērīgas animācijas, kas reaģē uz lietotāja mijiedarbību vai stāvokļa izmaiņām.

Animētā API ļauj izveidot animētas vērtības, kuras varat interpolēt un kartēt ar dažādiem jūsu komponentu stila rekvizītiem. Pēc tam varat atjaunināt šīs vērtības laika gaitā, izmantojot dažādas animācijas metodes. Komponentu stili tiks atjaunināti, mainoties animētajām vērtībām, kā rezultātā animācijas būs vienmērīgas.

Animācija ļoti labi darbojas ar React Native izkārtojuma sistēmu. Tādēļ jūsu animācijas tiks pareizi integrētas pārējā lietotāja saskarnē, lai iegūtu vēl labāku izskatu.

Lai sāktu izmantot Animated savā React Native projektā, jums ir jāimportē Animēts modulis no "reaģē-native” savā kodā:

imports { Animēts } no'react-native';

Importējot animāciju, varat sākt veidot animācijas. Lai to izdarītu, vispirms izveidojiet animētu vērtību, ar kuru manipulēsit visas animācijas laikā:

konst animatedValue = jauns Animēts. Vērtība(0);

The Animēts. Vērtība ir klase React Native Animated API, kas apzīmē mainīgu vērtību. Varat to inicializēt ar sākotnējo vērtību un pēc tam laika gaitā atjaunināt, izmantojot dažādas animācijas metodes, ko nodrošina animācijas API, piemēram, .laiks (), .pavasaris (), un .sabrukums (), norādot animācijas ilgumu, atvieglošanas funkciju un citus parametrus.

Animētā vērtība ir līdzīga React komponenta stāvokļa vērtībai.

Jūs varat inicializēt Animēts. Vērtība ar komponenta sākotnējā stāvokļa vērtību un pēc tam laika gaitā atjauniniet to, izmantojot setState metodi.

Piemēram, jums ir komponents, kuram ir stāvokļa vērtība skaitīt, kas norāda, cik reižu lietotājs ir noklikšķinājis uz šīs pogas.

Jūs varat izveidot an Animēts. Vērtība un inicializē to ar sākotnējā stāvokļa vērtību skaits:

konst Lietotne = () => {
konst [count, setCount] = useState(0);
konst animatedValue = jauns Animēts. Vērtība (skaits);
};

Tad ikreiz, kad skaitīt valsts vērtību atjauninājumus, varat atjaunināt animatedValue arī:

konst roktura pogaNoklikšķiniet = () => {
 setCounter (skaits + 1);
 Animated.timing (animatedValue, {
 toValue: skaits + 1,
 ilgums: 500,
 useNativeDriver: taisnība
 }).sākt();
};

Šis piemērs tiek atjaunināts animatedValue izmantojot Animated.timing() metodi ikreiz, kad lietotājs noklikšķina uz pogas. The animatedValue vada animāciju, un tā maina vērtību vairāk nekā 500 milisekundēs.

Sakarojot Animēts. Vērtība Šādā veidā uz stāvokļa vērtību varat izveidot animācijas, kas reaģē uz izmaiņām jūsu komponenta stāvoklī.

Tagad jūs saprotat, kā manipulēt ar animētu vērtību, un pēc tam varat pāriet uz interpolēt animēto vērtību un kartēt to uz sava komponenta stila rekvizītu, izmantojot Animated.interpolate() metodi.

Piemēram:

konst necaurredzamība = animatedValue.interpolate({
 inputRange: [0, 1],
 izvades diapazons: [0, 1]
});
atgriezties (

 {/* jūsu komponenta saturs */}
 </View>
);

Tādējādi tiks izveidota animācija, kas pakāpeniski izzūd Skatīt komponents, jo animētā vērtība mainās no 0 uz 1.

Izpratne par animācijas veidiem

Lai izveidotu labas animācijas, ir svarīgi saprast animācijas veidus un to darbību.

Izmantojot useNativeDriver opcija ar Animated uzlabo veiktspēju. Šī opcija ļauj izlādēt animācijas uz vietējo lietotāja interfeisa pavedienu. Tas var ievērojami uzlabot veiktspēju, samazinot nepieciešamās JavaScript apstrādes apjomu.

Tomēr ne visi animācijas veidi atbalsta vietējo draiveri. Mēģinot izmantot vietējo draiveri ar animācijām, kas ietver krāsas vai izkārtojuma izmaiņas, var rasties neparedzēta darbība.

Turklāt animācijas, kas ietver sarežģītas secības, var izraisīt ievērojamas veiktspējas problēmas ierīcēs ar ierobežotu apstrādes jaudu vai atmiņu. Šie veiktspējas trūkumi var būt arī pamanāmi, ja jūsu React Native projektā darbojas zemāka versija, kas nedarbojas atbalsta Hermes dzinēju.

Izpratne par dažādu animācijas veidu stiprajām pusēm un ierobežojumiem var palīdzēt jums izvēlēties pareizo pieeju jūsu lietošanas gadījumam.

Iejūtieties ērti, izmantojot React vietējās animācijas

Animācijas ir spēcīgs rīks saistošu un dinamisku lietotāja saskarņu izveidei React Native lietotnēs. Animētā API nodrošina elastīgu un veiktspējīgu veidu, kā izveidot gan vienkāršas, gan sarežģītas secības animācijas.

Tomēr ir svarīgi ņemt vērā animāciju ietekmi uz veiktspēju un izvēlēties savai situācijai piemērotu pieeju un bibliotēku.