Kako ustvariti izvorne animacije z boljšim odzivom

Mobilne aplikacije pogosto uporabljajo animacijo za poživitev uporabniške izkušnje. Toda ustvarjanje visokokakovostnih animacij je lahko izziv.

Na srečo obstajajo koncepti in tehnike, s katerimi lahko izboljšate svoje sposobnosti animacije. Nato jih lahko uporabite za ustvarjanje boljših, bolj tekočih animacij za vašo naslednjo mobilno aplikacijo React Native.

React Native Animations

The React Native Animated knjižnica je najbolj priljubljen način za ustvarjanje animacij v aplikaciji React Native.

Tako kot Reactova vgrajena knjižnica animacij, je API Animated del knjižnice Animated, ki temelji na JavaScriptu. Animated ponuja niz razredov in metod, ki vam omogočajo ustvarjanje gladkih in tekočih animacij. Obstaja več drugih odličnih možnosti za ustvarjanje animacij React Native, kot je Reanimated.

Vendar ustvarjanje dobrih animacij v React Native ne pomeni le uporabe prave knjižnice ali nastavitve pravih lastnosti. Gre tudi za razumevanje principov animacije in kako jih uporabiti v kontekstu razvoja mobilnih aplikacij. Tukaj je torej nekaj ključnih načel, ki jih morate razumeti in upoštevati pri ustvarjanju svojih animacij.

Prilagoditev trajanja animacije

Animacije morajo biti uporabniku gladke in naravne. Doseganje tega je lahko odvisno od tega, kako ravnate s trajanjem posameznih animacij, ki jih ustvarite.

Trajanje se nanaša na čas, ki je potreben, da se animacija v celoti izvede. Animacije v React Native privzeto trajajo 500 milisekund, vendar jih lahko prilagodite tako, da gredo hitreje ali počasneje.

Trajanje animacije prilagodite njeni zahtevnosti. Preprosta animacija, kot je zatemnitev, bo morda potrebovala le kratek čas, medtem ko bo bolj zapletena animacija, kot je drsenje z učinkom odboja, morda morala trajati dlje, da bo delovala naravno in gladko.

z Animation.timing() način, lahko ustvarite časovno animacijo po meri, ki ustreza vašim potrebam.

Tukaj je primer, kako dodati trajanje po meri preprosti zatemnjeni animaciji:

uvoz Odziv, {useRef} od'reagirati';
uvoz { Animirano, pogled } od'react-native';
konst FadeInView = (rekviziti) => {
konst fadeAnim = useRef(novo Animirano. Vrednost (0)).trenutno; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 ceniti: 1,
 trajanje: 2000, // nastavite trajanje po meri
 useNativeDriver: prav,
 }
 ).start();
 }, [fadeAnim]);
vrnitev (
 style={{
 ...props.style,
 motnost: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
izvozprivzetofunkcijoaplikacija() {
vrnitev (
flex: 1, alignItems: 'center', justifyContent: 'center'}}>
premer: 250, višina: 50, Barva ozadja: 'powderblue'}}>
velikost pisave: 28, textAlign: 'center', marža: 10}}>Bledenje v</Text>
 </FadeInView>
 </View>
 );
}

Ko izbirate trajanje svoje animacije, je pomembno, da najdete pravo ravnovesje med hitrostjo in gladkostjo.

Ko prvič eksperimentirate, poskusite začeti z daljšim trajanjem. Daljše trajanje vam bo dalo več časa za prilagoditev funkcije popuščanja in izboljšanje vaše animacije. Trajanje lahko kadar koli skrajšate pozneje, ko ste zadovoljni s splošnim učinkom.

Uporabite funkcije sproščanja

Preproste animacije imajo lahko konstantno hitrost, vendar lahko spreminjanje hitrosti ustvari bolj naravne učinke. Funkcije sproščanja nadzirajo hitrost spreminjanja animacije skozi čas. Lahko poskrbijo, da se vaše animacije začnejo počasi in nato pospešijo. Z nastavitvijo različnih hitrosti med napredovanjem animacije lahko ustvarite gladko in privlačno animacijo.

Vzemite ta primer uporabe funkcije popuščanja:

uvoz Odziv, {useRef} od'reagirati';
uvoz { Animirano, pogled } od'react-native';
konst FadeInView = (rekviziti) => {
konst fadeAnim = useRef(novo Animirano. Vrednost (0)).trenutno; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 ceniti: 1,
 trajanje: 2000,
 popuščanje: Animated.easeOut, // tukaj uporabite funkcijo popuščanja
 useNativeDriver: prav,
 }
 ).start();
 }, [fadeAnim]);
vrnitev (
 style={{
 ...props.style,
 motnost: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
izvozprivzetofunkcijoaplikacija() {
vrnitev (
flex: 1, alignItems: 'center', justifyContent: 'center'}}>
premer: 250, višina: 50, Barva ozadja: 'powderblue'}}>
velikost pisave: 28, textAlign: 'center', marža: 10}}>Potekanje</Text>
 </FadeInView>
 </View>
 );
}

Ta koda uporablja Animated.easeOut funkcija za nadzor hitrosti spreminjanja motnosti animiranega Pogled. The Animated.timing() Metoda bo uporabila funkcijo poenostavitve za postopno spreminjanje motnosti z 0 na 1 v trajanju dveh sekund, da bo videti, kot da se animacija upočasni, ko doseže svoj konec.

Uporabite lahko različne vrste funkcij popuščanja, da bodo vaše animacije videti bolj gladke, vključno z umirjanjem, umirjanjem in umirjanjem.

Izbira prave funkcije sproščanja lahko močno vpliva na zaznano kakovost animacij vaše aplikacije. Vredno si je vzeti nekaj časa, se poigrati z njimi in videti, kaj je najboljše za vaše posebne primere uporabe.

Ključni okvirji pomagajo pri zapletenih animacijah

Ključni okvirji so označevalci, ki vam omogočajo natančno določitev trenutkov v vaši animaciji, kjer želite spremeniti lastnosti, kot so položaj, merilo ali vrtenje. To je kot označevanje točk v času za vodenje animacije.

Uporabite lahko komplet ključne sličice za nastavitev določenih vrednosti za katero koli lastnost želite animirati. To vam pomaga nadzorovati čas in vedenje, zlasti pri zapletenih animacijah, kot so tiste, ki vključujejo gibanje likov.

Če želite ustvariti osnovno animacijo ključnih sličic, morate določiti ključne sličice, med katerimi želite animirati, in skupno trajanje.

Recimo, da želite animirati kvadrat od začetnega položaja (0, 0) do končnega položaja (100, 100) v obdobju ene sekunde.

Ustvarite lahko niz ključnih sličic, kot je ta:

konst ključne sličice = [
 { x: 0, l: 0 },
 { x: 50, l: 50 },
 { x: 100, l: 100 },
];

V tem primeru so tri ključne sličice: ena na začetku animacije, ena na sredini in ena na koncu. Ta niz ključnih sličic lahko nato posredujete svoji knjižnici animacij skupaj s trajanjem 1000 milisekund, da ustvarite gladko animacijo med ključnimi sličicami.

V nekaterih knjižnicah boste morali določiti tudi funkcijo popuščanja za nadzor napredovanja animacije. Vendar pa lahko osnovno idejo o določanju ključnih sličic in trajanja uporabite za večino knjižnic animacij.

Izkoristite prednosti naprave s strojnim pospeševanjem

Strojno pospeševanje je lahko močno orodje za optimizacijo delovanja vaših animacij React Native. Z izkoriščanjem grafične strojne opreme naprave lahko del obdelave preložite na CPE in posledično dosežete bolj gladke in odzivne animacije.

GPU naprave bo nato izvorno obdelal animirane vrednosti in sloge, namesto da bi to morala storiti nit JavaScript.

Strojno pospeševanje morda ni na voljo v vseh napravah, zato je pomembno, da preizkusite svoje animacije na različnih resničnih napravah, da zagotovite najboljšo zmogljivost.