Začíname s animáciami v React Native

Animácie môžu vdýchnuť aplikácii život, vďaka čomu je pre používateľa pútavejšia a intuitívnejšia. Ale ak ste v animáciách React Native nováčikom, začať môže byť trochu skľučujúce.

Preskúmajte animácie React Native a zistite, ako môžete začať vytvárať nádherné, plynulé animácie.

Ako fungujú animácie Basic React Native?

Animácie môžu vytvárať plynulé prechody medzi rôznymi obrazovkami alebo prvkami. Môžu zvýrazniť informácie alebo poskytnúť spätnú väzbu na akcie používateľov. Animácie môžu byť jednoduché alebo zložité a môžu využívať rôzne techniky, ako napríklad 2D alebo 3D pohyblivú grafiku.

Vďaka prenosnosti React Native sa oplatí používať ak zacieľujete na niekoľko platforiem. Jednou z jeho najsilnejších funkcií je schopnosť vytvárať nádherné animácie pre mobilné aplikácie.

Objekt React Native môžete animovať jednoducho zmenou stavu polohy požadovaného komponentu.

Napríklad:

importovať Reaguj, { useState, useEffect } 





instagram viewer

od'reagovať';
importovať { View, Style Sheet } od„react-native“;
konšt Aplikácia = () => {
// Inicializácia stavu na sledovanie polohy boxu
konšt [boxPosition, setBoxPosition] = useState(0);
// Pomocou háčika useEffect aktualizujte polohu poľa každú 1 sekundu
 useEffect(() => {
konšt interval = setInterval(() => {
// Aktualizujte pozíciu poľa pridaním 10 k aktuálnej pozícii
 setBoxPosition(prevPosition => predchádzajúca poloha + 10);
 }, 1000);
// Vráti funkciu čistenia na vymazanie intervalu, kedy komponent
// odpojí
vrátiť() => clearInterval (interval);
 }, []);
// Nastavte pozíciu boxu pomocou stavovej premennej v štýle inline
konšt boxStyle = {
 transformovať: [{ preložiťY: boxPosition }]
 };
vrátiť (


 </View>
 );
};
konšt styles = StyleSheet.create({
 kontajner: {
 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
 box: {
 šírka: 100,
 výška: 100,
 farba pozadia: 'Modrá',
 },
});
exportpredvolená App;

Tento kód vykreslí modrý rámček, ktorý sa každú sekundu pohybuje smerom nadol. Animácia funguje pomocou useEffect háčik na vytvorenie časovača, ktorý aktualizuje boxPosition stavová premenná každú 1 sekundu.

Aj keď to môže v niektorých situáciách fungovať, nie je to najlepšia možnosť. Aktualizácie stavu v React Native fungujú asynchrónne, ale animácie sa spoliehajú na správne fungovanie synchrónnych aktualizácií stavu. Asynchrónna implementácia vašej animácie spôsobí, že sa aktualizácie stavu okamžite neprejavia vo vykreslenom výstupe komponentu, čo naruší načasovanie vašich animácií.

Je to niekoľko knižníc animácií ako napr Animované knižnica, reaktívny-native-reanimated, a reakt-native-animable na vytváranie výkonných animácií v React Native. Každá z týchto knižníc animácií potláča problém asynchrónnych aktualizácií stavu a je úplne ideálna.

React Native Animated API

Animated je API, ktoré poskytuje React Native. Môžete ho použiť na vytváranie plynulých animácií, ktoré reagujú na interakcie používateľa alebo zmeny stavu.

Animované API vám umožňuje vytvárať animované hodnoty, ktoré môžete interpolovať a mapovať na rôzne štýlové vlastnosti vašich komponentov. Tieto hodnoty potom môžete aktualizovať v priebehu času pomocou rôznych metód animácie. Štýly vašich komponentov sa potom aktualizujú, keď sa menia animované hodnoty, výsledkom čoho sú plynulé animácie.

Animované fungujú naozaj dobre so systémom rozloženia React Native. Vďaka tomu budú vaše animácie správne integrované so zvyškom vášho používateľského rozhrania, aby vyzerali ešte lepšie.

Ak chcete začať používať Animated vo svojom projekte React Native, musíte importovať súbor Animované modul od „reaktantný' do vášho kódu:

importovať { Animované } od„react-native“;

Po importe Animated môžete začať vytvárať animácie. Ak to chcete urobiť, najprv vytvorte animovanú hodnotu, s ktorou budete počas animácie manipulovať:

konšt animovanáHodnota = Nový Animované. Hodnota(0);

The Animované. Hodnota je trieda v rozhraní React Native Animated API, ktorá predstavuje meniteľnú hodnotu. Môžete ho inicializovať s počiatočnou hodnotou a potom ho v priebehu času aktualizovať pomocou rôznych metód animácie poskytovaných rozhraním Animated API, napríklad .načasovanie (), .jar()a .rozpad()zadaním trvania animácie, funkcie nábehu a ďalších parametrov.

Animovaná hodnota je podobná hodnote stavu v komponente React.

Môžete inicializovať Animované. Hodnota s hodnotou počiatočného stavu komponentu a potom ju v priebehu času aktualizujte pomocou setState metóda.

Napríklad máte komponent, ktorý má hodnotu stavu počítať, ktorá predstavuje, koľkokrát používateľ klikol na toto tlačidlo.

Môžete vytvoriť Animované. Hodnota a inicializujte ho s hodnotou počiatočného stavu počítať:

konšt Aplikácia = () => {
konšt [count, setCount] = useState(0);
konšt animovanáHodnota = Nový Animované. Hodnota (počet);
};

Potom, kedykoľvek počítať aktualizácie hodnoty stavu, môžete aktualizovať animovanáHodnota tiež:

konšt držadloKliknutie = () => {
 setCounter (počet + 1);
 Animated.timing (animatedValue, {
 toValue: počet + 1,
 trvanie: 500,
 useNativeDriver: pravda
 }).start();
};

Tento príklad sa aktualizuje animovanáHodnota pomocou Animated.timing() vždy, keď používateľ klikne na tlačidlo. The animovanáHodnota riadi animáciu a mení hodnotu o viac ako 500 milisekúnd.

Vzťahovaním sa Animované. Hodnota na hodnotu stavu týmto spôsobom môžete vytvárať animácie, ktoré reagujú na zmeny stavu vášho komponentu.

Teraz už chápete, ako manipulovať s animovanou hodnotou, potom môžete prejsť na interpoláciu animovanej hodnoty a namapovať ju na vlastnosť štýlu vášho komponentu pomocou Animated.interpolate() metóda.

Napríklad:

konšt opacity = animatedValue.interpolate({
 vstupný rozsah: [0, 1],
 výstupný rozsah: [0, 1]
});
vrátiť (

 {/* obsah vášho komponentu */}
 </View>
);

Tým sa vytvorí animácia, ktorá postupne mizne vyhliadka komponent, keď sa animovaná hodnota zmení z 0 na 1.

Pochopenie typov animácií

Pochopenie typov animácií a ich fungovania je dôležité pre vytváranie dobrých animácií.

Pomocou použite NativeDriver možnosť s Animovaným zlepšuje výkon. Táto možnosť vám umožňuje presunúť animácie do natívneho vlákna používateľského rozhrania. Môže výrazne zlepšiť výkon znížením množstva potrebného spracovania JavaScriptu.

Nie všetky typy animácií však podporujú natívny ovládač. Pokus o použitie natívneho ovládača s animáciami, ktoré zahŕňajú zmeny farby alebo rozloženia, môže spôsobiť neočakávané správanie.

Navyše animácie zahŕňajúce zložité sekvencie môžu spôsobiť značné problémy s výkonom na zariadeniach s obmedzeným výpočtovým výkonom alebo pamäťou. Tieto výkonnostné deficity môžu byť tiež viditeľné, ak váš projekt React Native používa nižšiu verziu, ktorá nie podporovať motor Hermes.

Pochopenie silných stránok a obmedzení rôznych typov animácií vám môže pomôcť vybrať správny prístup pre váš prípad použitia.

Urobte si pohodlie s React Native animáciami

Animácie sú výkonným nástrojom na vytváranie pútavých a dynamických používateľských rozhraní v aplikáciách React Native. Animated API poskytuje flexibilný a výkonný spôsob vytvárania jednoduchých aj zložitých sekvenčných animácií.

Napriek tomu je dôležité zvážiť vplyv animácií na výkon a zvoliť vhodný prístup a knižnicu, ktorú použijete pre vašu situáciu.