Kuidas luua paremini reageerivaid kohalikke animatsioone

Mobiilirakendused kasutavad kasutajakogemuse elavdamiseks sageli animatsioone. Kuid kvaliteetsete animatsioonide loomine võib olla väljakutse.

Õnneks on olemas kontseptsioonid ja tehnikad, mida saate kasutada oma animatsioonioskuste parandamiseks. Seejärel saate neid rakendada, et luua järgmise React Native mobiilirakenduse jaoks paremaid ja sujuvamaid animatsioone.

Reageerige omaanimatsioonid

The Animeeritud reageerimine teek on kõige populaarsem viis animatsioonide loomiseks rakenduses React Native.

Just nagu Reacti sisseehitatud animatsiooniteek, on animeeritud API osa JavaScripti-põhisest animeeritud teegist. Animated pakub klasside ja meetodite komplekti, mis võimaldavad teil luua sujuvaid ja sujuvaid animatsioone. React Native animatsioonide loomiseks on veel mitmeid suurepäraseid võimalusi, näiteks Reanimated.

Heade animatsioonide loomine React Native'is ei tähenda aga ainult õige teegi kasutamist või õigete atribuutide seadistamist. See puudutab ka animatsiooni põhimõtete mõistmist ja nende rakendamist mobiilirakenduste arendamise kontekstis. Siin on mõned põhiprintsiibid, mida animatsioonide loomisel mõista ja tähele panna.

Animatsiooni kestuse reguleerimine

Animatsioonid peaksid kasutajale tunduma sujuvad ja loomulikud. Selle saavutamine võib sõltuda sellest, kuidas käsitlete konkreetsete loodud animatsioonide kestust.

Kestus viitab ajale, mis kulub animatsiooni täielikuks käitamiseks. Vaikimisi on React Native'i animatsioonide kestus 500 millisekundit, kuid saate neid kiiremaks või aeglasemaks muutmiseks kohandada.

Peaksite kohandama animatsiooni kestust vastavalt selle keerukusele. Lihtne animatsioon, nagu sisselülitamine, võib vajada vaid lühikest kestust, samas kui keerulisem animatsioon, nagu põrkeefektiga sisseslaid, võib kesta kauem, et tunduda loomulik ja sujuv.

Koos Animation.timing() meetodil saate luua kohandatud ajastatud animatsiooni, mis sobib teie vajadustega.

Siin on näide, kuidas lisada lihtsale sumbuvale animatsioonile kohandatud kestus.

importida Reageeri, { useRef } alates'reageeri';
importida { Animeeritud, vaade } alates'react-native';
konst FadeInView = (rekvisiidid) => {
konst fadeAnim = useRef(uus Animeeritud. Väärtus(0)).vool; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 hindama: 1,
 kestus: 2000, // määrake kohandatud kestus
 useNativeDriver: tõsi,
 }
 ).start();
 }, [fadeAnim]);
tagasi (
 style={{
 ...rekvisiidid.stiil,
 läbipaistmatus: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
eksportidavaikimisifunktsiooniRakendus() {
tagasi (
painduv: 1, joondadaItems: 'Keskus', õigustaSisu: 'Keskus'}}>
laius: 250, kõrgus: 50, taustavärv: 'puudersinine'}}>
fondi suurus: 28, textAlign: 'Keskus', marginaal: 10}}>Tuleb sisse</Text>
 </FadeInView>
 </View>
 );
}

Animatsiooni kestuse valimisel on oluline leida õige tasakaal kiiruse ja sujuvuse vahel.

Proovige esmakordsel katsetamisel alustada pikema kestusega. Pikem kestus annab teile rohkem aega kergendusfunktsiooni reguleerimiseks ja animatsiooni viimistlemiseks. Saate kestust hiljem alati lühendada, kui olete üldmõjuga rahul.

Kasutage kergendamisfunktsioone

Lihtsate animatsioonide kiirus võib olla püsiv, kuid kiiruse muutmine võib luua loomulikumaid efekte. Kergendusfunktsioonid juhivad animatsiooni muutumise kiirust aja jooksul. Need võivad panna teie animatsioonid aeglaselt käima, seejärel kiirendada. Animatsiooni edenedes erinevate kiiruste määramine võib luua sujuva ja kaasahaarava animatsiooni.

Võtke see näide kergendusfunktsiooni kasutamisest:

importida Reageeri, { useRef } alates'reageeri';
importida { Animeeritud, vaade } alates'react-native';
konst FadeInView = (rekvisiidid) => {
konst fadeAnim = useRef(uus Animeeritud. Väärtus(0)).vool; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 hindama: 1,
 kestus: 2000,
 leevendamine: Animated.easeOut, // kasutage siin kergendamisfunktsiooni
 useNativeDriver: tõsi,
 }
 ).start();
 }, [fadeAnim]);
tagasi (
 style={{
 ...rekvisiidid.stiil,
 läbipaistmatus: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
eksportidavaikimisifunktsiooniRakendus() {
tagasi (
painduv: 1, joondadaItems: 'Keskus', õigustaSisu: 'Keskus'}}>
laius: 250, kõrgus: 50, taustavärv: 'puudersinine'}}>
fondi suurus: 28, textAlign: 'Keskus', marginaal: 10}}>Tuleneb sisse</Text>
 </FadeInView>
 </View>
 );
}

See kood kasutab Animated.easeOut funktsioon animeeritud filmi läbipaistmatuse muutumise määra reguleerimiseks Vaade. The Animated.timing() meetod kasutab kergendusfunktsiooni, et muuta kahe sekundi jooksul järk-järgult läbipaistmatust 0-lt 1-le, et animatsioon tunduks aeglustuvat, kui see lõppu jõuab.

Saate kasutada erinevat tüüpi kergendamisfunktsioone, et muuta oma animatsioonid sujuvamaks, sealhulgas sisse-, välja- ja väljatõmbefunktsioonid.

Õige kergendusfunktsiooni valimine võib teie rakenduse animatsioonide tajutavas kvaliteedis oluliselt muuta. Tasub võtta aega, et nendega mängida ja vaadata, mis sobib teie konkreetsete kasutusjuhtude jaoks kõige paremini.

Võtmekaadrid aitavad keeruliste animatsioonide puhul

Võtmekaadrid on markerid, mis võimaldavad teil animatsioonis täpselt määrata hetked, kus soovite muuta omadusi, nagu asukoht, skaala või pööramine. See on nagu animatsiooni suunamiseks ajapunktide märkimine.

Võite kasutada komplekti võtmekaadrid, et määrata mis tahes atribuudile konkreetsed väärtused soovite animeerida. See aitab teil kontrollida ajastust ja käitumist, eriti keeruliste animatsioonide puhul, nagu need, mis hõlmavad tegelaste liikumist.

Põhilise võtmekaadri animatsiooni loomiseks peate määrama võtmekaadrid, mille vahel soovite animeerida, ja kogukestuse.

Oletame näiteks, et soovite animeerida ruutu ühe sekundi jooksul lähtepositsioonist (0, 0) lõppasendisse (100, 100).

Saate luua sellise võtmekaadrite massiivi:

konst võtmekaadrid = [
 { x: 0, y: 0 },
 { x: 50, y: 50 },
 { x: 100, y: 100 },
];

Sel juhul on kolm võtmekaadrit: üks animatsiooni alguses, üks keskel ja üks lõpus. Seejärel saate selle võtmekaadrite massiivi koos 1000 millisekundilise kestusega oma animatsiooniteeki edastada, et luua võtmekaadrite vahel sujuv animatsioon.

Mõnes teegis peate animatsiooni edenemise juhtimiseks määrama ka kergendusfunktsiooni. Siiski saate enamiku animatsiooniteekide puhul rakendada võtmekaadrite ja kestuse määramise põhiideed.

Kasutage seadet riistvarakiirendusega

Riistvaraline kiirendus võib olla võimas tööriist React Native'i animatsioonide toimivuse optimeerimiseks. Seadme graafika riistvara võimendamisega saate osa töötlemistööst CPU-lt maha laadida ja seeläbi saavutada sujuvamaid ja tundlikumaid animatsioone.

Seadme GPU töötleb seejärel algselt animeeritud väärtusi ja stiile, mitte ei pea seda tegema JavaScripti lõim.

Riistvaraline kiirendus ei pruugi kõigis seadmetes saadaval olla, seega on oluline parima jõudluse tagamiseks testida oma animatsioone mitmesugustes pärisseadmetes.