Kako stvoriti izvorne animacije bolje reakcije

Mobilne aplikacije često koriste animacije kako bi oživjele korisničko iskustvo. Ali stvaranje visokokvalitetnih animacija može biti izazov.

Srećom, postoje koncepti i tehnike pomoću kojih možete poboljšati svoje vještine animacije. Zatim ih možete primijeniti za stvaranje boljih, glatkijih animacija za vašu sljedeću mobilnu aplikaciju React Native.

React Native Animations

The React Native Animated knjižnica je najpopularniji način za stvaranje animacija u aplikaciji React Native.

Baš kao Reactova ugrađena biblioteka animacija, Animated API dio je animirane biblioteke temeljene na JavaScriptu. Animated pruža skup klasa i metoda koje vam omogućuju stvaranje glatkih i fluidnih animacija. Postoji nekoliko drugih sjajnih opcija za stvaranje React Native animacija, kao što je Reanimated.

Međutim, stvaranje dobrih animacija u React Nativeu nije samo korištenje prave biblioteke ili postavljanje pravih svojstava. Također se radi o razumijevanju principa animacije i kako ih primijeniti u kontekstu razvoja mobilnih aplikacija. Dakle, evo nekoliko ključnih principa koje treba razumjeti i uzeti u obzir prilikom izrade vaših animacija.

Podešavanje trajanja animacije

Animacije bi korisniku trebale biti glatke i prirodne. Postizanje toga može ovisiti o tome kako upravljate trajanjem određenih animacija koje stvarate.

Trajanje se odnosi na vrijeme koje je potrebno da se animacija u potpunosti pokrene. Prema zadanim postavkama, animacije u React Nativeu traju 500 milisekundi, ali ih možete prilagoditi da budu brže ili sporije.

Trebali biste prilagoditi trajanje animacije prema njezinoj složenosti. Jednostavna animacija, kao što je zatamnjenje, možda će trebati samo kratko trajanje, dok će složenija animacija, kao što je klizanje s efektom odbijanja, možda trebati trajati dulje, kako bi djelovala prirodno i glatko.

s Animation.timing() možete izraditi prilagođenu vremenski ograničenu animaciju koja odgovara vašim potrebama.

Evo primjera kako dodati prilagođeno trajanje jednostavnoj postepenoj animaciji:

uvoz Reagiraj, {useRef} iz'reagirati';
uvoz { Animirani, pogled } iz'react-native';
konst FadeInView = (rekviziti) => {
konst fadeAnim = useRef(novi Animirani. Vrijednost(0)).Trenutno; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 cijeniti: 1,
 trajanje: 2000, // postavljanje prilagođenog trajanja
 useNativeDriver: pravi,
 }
 ).početak();
 }, [fadeAnim]);
povratak (
 stil={{
 ...props.style,
 neprozirnost: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
izvozzadanofunkcijaaplikacija() {
povratak (
savijati: 1, alignItems: 'centar', justifyContent: 'centar'}}>
širina: 250, visina: 50, boja pozadine: 'powderblue'}}>
veličina fonta: 28, textAlign: 'centar', margina: 10}}>Blijedi u</Text>
 </FadeInView>
 </View>
 );
}

Prilikom odabira trajanja vaše animacije, važno je pronaći pravu ravnotežu između brzine i glatkoće.

Pokušajte započeti s duljim trajanjem kada prvi put eksperimentirate. Dulje trajanje dat će vam više vremena za prilagodbu funkcije ublažavanja i pročišćavanje vaše animacije. Uvijek možete skratiti trajanje kasnije kada budete zadovoljni ukupnim učinkom.

Koristite funkcije olakšavanja

Jednostavne animacije mogu imati konstantnu brzinu, ali variranje brzine može stvoriti prirodnije efekte. Funkcije olakšavanja kontroliraju brzinu promjene animacije tijekom vremena. Oni mogu učiniti da vaše animacije počnu polako, a zatim ubrzaju. Postavljanje različitih brzina kako animacija napreduje može stvoriti glatku i zanimljivu animaciju.

Uzmimo ovaj primjer upotrebe funkcije ublažavanja:

uvoz Reagiraj, {useRef} iz'reagirati';
uvoz { Animirani, pogled } iz'react-native';
konst FadeInView = (rekviziti) => {
konst fadeAnim = useRef(novi Animirani. Vrijednost(0)).Trenutno; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 cijeniti: 1,
 trajanje: 2000,
 easing: Animated.easeOut, // ovdje upotrijebite funkciju ublažavanja
 useNativeDriver: pravi,
 }
 ).početak();
 }, [fadeAnim]);
povratak (
 stil={{
 ...props.style,
 neprozirnost: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
izvozzadanofunkcijaaplikacija() {
povratak (
savijati: 1, alignItems: 'centar', justifyContent: 'centar'}}>
širina: 250, visina: 50, boja pozadine: 'powderblue'}}>
veličina fonta: 28, textAlign: 'centar', margina: 10}}>Blijeđenje</Text>
 </FadeInView>
 </View>
 );
}

Ovaj kod koristi Animirani.easeOut funkcija za kontrolu brzine promjene neprozirnosti animiranog Pogled. The Animated.timing() Metoda će koristiti funkciju ublažavanja za postupnu promjenu neprozirnosti od 0 do 1 u trajanju od dvije sekunde, kako bi izgledalo kao da se animacija usporava dok dolazi do kraja.

Možete koristiti različite vrste funkcija za ublažavanje kako bi vaše animacije izgledale glatkije, uključujući ublažavanje, usporavanje i usporavanje.

Odabir prave funkcije ublažavanja može značajno utjecati na percipiranu kvalitetu animacija vaše aplikacije. Vrijedno je odvojiti malo vremena da se poigrate s njima i vidite što najbolje funkcionira za vaše specifične slučajeve upotrebe.

Ključni okviri pomažu kod složenih animacija

Ključni okviri su markeri koji vam omogućuju da odredite trenutke u vašoj animaciji u kojima želite promijeniti svojstva kao što su položaj, mjerilo ili rotacija. To je kao označavanje točaka u vremenu za usmjeravanje animacije.

Možete koristiti set od ključne sličice za postavljanje specifičnih vrijednosti za bilo koje svojstvo želite animirati. To vam pomaže kontrolirati vrijeme i ponašanje, posebno za složene animacije poput onih koje uključuju kretanje likova.

Da biste stvorili osnovnu animaciju ključnih kadrova, morat ćete odrediti ključne kadrove između kojih želite animirati i ukupno trajanje.

Na primjer, recimo da želite animirati kvadrat od početne pozicije (0, 0) do krajnje pozicije (100, 100) u razdoblju od jedne sekunde.

Možete stvoriti niz ključnih okvira ovako:

konst ključne slike = [
 { x: 0, g: 0 },
 { x: 50, g: 50 },
 { x: 100, g: 100 },
];

U ovom slučaju postoje tri ključna kadra: jedan na početku animacije, jedan u sredini i jedan na kraju. Zatim možete proslijediti ovaj niz ključnih kadrova u svoju knjižnicu animacija, zajedno s trajanjem od 1000 milisekundi, kako biste stvorili glatku animaciju između ključnih kadrova.

U nekim bibliotekama također ćete morati navesti funkciju ublažavanja kako biste kontrolirali napredovanje animacije. Međutim, možete primijeniti osnovnu ideju određivanja ključnih kadrova i trajanja na većinu biblioteka animacija.

Iskoristite prednosti uređaja uz hardversko ubrzanje

Hardversko ubrzanje može biti moćan alat za optimiziranje performansi vaših React Native animacija. Iskorištavanjem grafičkog hardvera uređaja, možete rasteretiti dio obrade s CPU-a i, zauzvrat, postići glatkije animacije s boljim odzivom.

GPU uređaja tada će nativno obraditi animirane vrijednosti i stilove, umjesto da to mora učiniti JavaScript nit.

Hardversko ubrzanje možda neće biti dostupno na svim uređajima, stoga je važno testirati svoje animacije na različitim stvarnim uređajima kako biste osigurali najbolju izvedbu.