Ako vytvoriť lepšie natívne animácie React

Mobilné aplikácie často využívajú animáciu na oživenie používateľského zážitku. Vytváranie vysokokvalitných animácií však môže byť výzvou.

Našťastie existujú koncepty a techniky, ktoré môžete použiť na zlepšenie svojich animačných schopností. Potom ich môžete použiť na vytvorenie lepších a plynulejších animácií pre vašu ďalšiu mobilnú aplikáciu React Native.

React Native Animations

The Reagovať Native Animated knižnica je najobľúbenejší spôsob vytvárania animácií v aplikácii React Native.

Rovnako ako Vstavaná knižnica animácií React, Animated API je súčasťou animovanej knižnice založenej na JavaScripte. Animated poskytuje sadu tried a metód, ktoré vám umožňujú vytvárať plynulé a plynulé animácie. Existuje niekoľko ďalších skvelých možností na vytváranie animácií React Native, ako je napríklad Reanimated.

Vytváranie dobrých animácií v React Native však nie je len o použití správnej knižnice alebo nastavení správnych vlastností. Ide aj o pochopenie princípov animácie a ich uplatnenie v kontexte vývoja mobilných aplikácií. Tu je niekoľko kľúčových princípov, ktoré je potrebné pochopiť a zohľadniť pri vytváraní animácií.

Úprava trvania animácie

Animácie by mali byť pre používateľa plynulé a prirodzené. Dosiahnutie tohto môže závisieť od toho, ako narábate s trvaním konkrétnych animácií, ktoré vytvoríte.

Trvanie sa vzťahuje na čas potrebný na úplné spustenie animácie. V predvolenom nastavení majú animácie v React Native trvanie 500 milisekúnd, ale môžete ich upraviť tak, aby išli rýchlejšie alebo pomalšie.

Trvanie animácie by ste mali upraviť podľa jej zložitosti. Jednoduchá animácia, ako je prechod, môže potrebovať iba krátke trvanie, zatiaľ čo zložitejšia animácia, ako napríklad zasunutie s efektom odrazu, môže trvať dlhšie, aby pôsobila prirodzene a plynulo.

S Animation.timing() môžete vytvoriť vlastnú časovanú animáciu, ktorá vyhovuje vašim potrebám.

Tu je príklad, ako pridať vlastné trvanie do jednoduchej animácie prechodu:

importovať Reagovať, { useRef } od'reagovať';
importovať { Animované, Zobraziť } od„react-native“;
konšt FadeInView = (rekvizity) => {
konšt fadeAnim = useRef(Nový Animované. Hodnota(0)).aktuálne; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 ohodnotiť: 1,
 trvanie: 2000, // nastavenie vlastného trvania
 useNativeDriver: pravda,
 }
 ).start();
 }, [fadeAnim]);
vrátiť (
 štýl={{
 ...štýl rekvizít,
 nepriehľadnosť: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
exportpredvolenáfunkciuApp() {
vrátiť (
flex: 1, alignItems: 'centrum', justifyContent: 'centrum'}}>
šírka: 250, výška: 50, farba pozadia: "powderblue"}}>
veľkosť písma: 28, textAlign: 'centrum', marža: 10}}>Mizne v</Text>
 </FadeInView>
 </View>
 );
}

Pri výbere trvania animácie je dôležité nájsť správnu rovnováhu medzi rýchlosťou a plynulosťou.

Pri prvom experimentovaní skúste začať s dlhším trvaním. Dlhšie trvanie vám poskytne viac času na úpravu funkcie easing a vylepšenie animácie. Vždy môžete skrátiť trvanie neskôr, keď budete spokojní s celkovým efektom.

Použite funkcie uvoľnenia

Jednoduché animácie môžu mať konštantnú rýchlosť, ale zmena rýchlosti môže vytvoriť prirodzenejšie efekty. Funkcie uľahčenia ovládajú rýchlosť zmeny animácie v priebehu času. Môžu spôsobiť, že vaše animácie začnú pomaly a potom sa zrýchlia. Nastavenie rôznych rýchlostí v priebehu animácie môže vytvoriť hladkú a pútavú animáciu.

Vezmite si tento príklad použitia funkcie easing:

importovať Reagovať, { useRef } od'reagovať';
importovať { Animované, Zobraziť } od„react-native“;
konšt FadeInView = (rekvizity) => {
konšt fadeAnim = useRef(Nový Animované. Hodnota(0)).aktuálne; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 ohodnotiť: 1,
 trvanie: 2000,
 easing: Animated.easeOut, // tu použite funkciu easing
 useNativeDriver: pravda,
 }
 ).start();
 }, [fadeAnim]);
vrátiť (
 štýl={{
 ...štýl rekvizít,
 nepriehľadnosť: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
exportpredvolenáfunkciuApp() {
vrátiť (
flex: 1, alignItems: 'centrum', justifyContent: 'centrum'}}>
šírka: 250, výška: 50, farba pozadia: "powderblue"}}>
veľkosť písma: 28, textAlign: 'centrum', marža: 10}}>Fade In</Text>
 </FadeInView>
 </View>
 );
}

Tento kód používa Animated.easeOut funkcia na ovládanie rýchlosti zmeny nepriehľadnosti animovaného filmu vyhliadka. The Animated.timing() metóda použije funkciu uvoľnenia na postupnú zmenu nepriehľadnosti z 0 na 1 v priebehu dvoch sekúnd, aby sa animácia zdala byť spomalená, keď dosiahne svoj koniec.

Môžete použiť rôzne typy funkcií nábehu, aby vaše animácie vyzerali hladšie, vrátane nábehu, nábehu a nábehu.

Výber správnej funkcie easing môže mať veľký rozdiel vo vnímanej kvalite animácií vašej aplikácie. Stojí za to nájsť si čas, pohrať sa s nimi a zistiť, čo najlepšie funguje pre vaše konkrétne prípady použitia.

Kľúčové snímky pomáhajú pri zložitých animáciách

Kľúčové snímky sú značky, ktoré vám umožňujú určiť momenty v animácii, kde chcete vykonať zmeny vlastností, ako je poloha, mierka alebo rotácia. Je to ako označovanie bodov v čase na vedenie animácie.

Môžete použiť sadu kľúčové snímky na nastavenie konkrétnych hodnôt pre akúkoľvek vlastnosť chcete animovať. To vám pomáha kontrolovať načasovanie a správanie, najmä pri zložitých animáciách, ako sú tie, ktoré zahŕňajú pohyb postavy.

Ak chcete vytvoriť základnú animáciu kľúčových snímok, budete musieť určiť kľúčové snímky, medzi ktorými chcete animovať, a celkové trvanie.

Povedzme napríklad, že chcete animovať štvorec z počiatočnej pozície (0, 0) do koncovej pozície (100, 100) v priebehu jednej sekundy.

Môžete vytvoriť pole kľúčových snímok takto:

konšt kľúčové snímky = [
 { X: 0, r: 0 },
 { X: 50, r: 50 },
 { X: 100, r: 100 },
];

V tomto prípade existujú tri kľúčové snímky: jedna na začiatku animácie, jedna v strede a jedna na konci. Toto pole kľúčových snímok potom môžete odovzdať do svojej knižnice animácií spolu s trvaním 1 000 milisekúnd, aby ste vytvorili hladkú animáciu medzi kľúčovými snímkami.

V niektorých knižniciach budete musieť zadať aj funkciu easing, aby ste mohli ovládať priebeh animácie. Základnú myšlienku určenia kľúčových snímok a trvania však môžete aplikovať na väčšinu knižníc animácií.

Využite výhody zariadenia s hardvérovou akceleráciou

Hardvérová akcelerácia môže byť výkonným nástrojom na optimalizáciu výkonu vašich animácií React Native. Využitím grafického hardvéru zariadenia môžete znížiť časť spracovateľskej práce z procesora a následne dosiahnuť plynulejšie a citlivejšie animácie.

GPU zariadenia potom natívne spracuje animované hodnoty a štýly, namiesto toho, aby to muselo robiť vlákno JavaScriptu.

Hardvérová akcelerácia nemusí byť dostupná na všetkých zariadeniach, preto je dôležité otestovať svoje animácie na rôznych skutočných zariadeniach, aby ste zaistili čo najlepší výkon.