Hur man skapar Bättre React Native Animationer

Mobilappar använder ofta animering för att liva upp användarupplevelsen. Men att skapa animationer av hög kvalitet kan vara en utmaning.

Lyckligtvis finns det koncept och tekniker du kan använda för att förbättra dina animationsfärdigheter. Du kan sedan använda dem för att skapa bättre, smidigare animationer för din nästa React Native-mobilapplikation.

Reager Native Animationer

De Reager Native Animated bibliotek är det mest populära sättet att skapa animationer i en React Native-app.

Precis som Reacts inbyggda animationsbibliotek, är Animated API en del av det JavaScript-baserade Animated-biblioteket. Animated tillhandahåller en uppsättning klasser och metoder som låter dig skapa smidiga och flytande animationer. Det finns flera andra bra alternativ för att skapa React Native-animationer, som Reanimated.

Att skapa bra animationer i React Native handlar dock inte bara om att använda rätt bibliotek eller ställa in rätt egenskaper. Det handlar också om att förstå principerna för animering och hur man tillämpar dem i samband med utveckling av mobilappar. Så här är några viktiga principer att förstå och notera när du bygger dina animationer.

Justera animationslängd

Animationer ska kännas smidiga och naturliga för en användare. Att uppnå detta kan bero på hur du hanterar varaktigheten för särskilda animationer du skapar.

Varaktighet hänvisar till hur lång tid det tar för en animation att köras helt. Som standard har animationer i React Native en varaktighet på 500 millisekunder men du kan justera dem för att gå snabbare eller långsammare.

Du bör justera längden på animeringen efter dess komplexitet. En enkel animering, till exempel en intoning, kanske bara behöver en kort varaktighet, medan en mer komplex animering, som en slide-in med en studseffekt, kan behöva pågå längre för att kännas naturlig och smidig.

Med Animation.timing() metoden kan du skapa en anpassad tidsinställd animering som passar dina behov.

Här är ett exempel på hur du lägger till en anpassad varaktighet till en enkel intoningsanimation:

importera Reagera, { useRef } från'reagera';
importera { Animerad, Visa } från"reagera-native";
konst FadeInView = (rekvisita) => {
konst fadeAnim = useRef(ny Animerad. Värde(0)).nuvarande; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 att värdesätta: 1,
 varaktighet: 2000, // ställ in anpassad varaktighet
 useNativeDriver: Sann,
 }
 ).Start();
 }, [fadeAnim]);
lämna tillbaka (
 stil={{
 ...rekvisita.stil,
 opacitet: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
exporterastandardfungeraApp() {
lämna tillbaka (
böja: 1, alignItems: 'Centrum', motivera innehåll: 'Centrum'}}>
bredd: 250, höjd: 50, bakgrundsfärg: 'puderblå'}}>
textstorlek: 28, textJustera: 'Centrum', marginal: 10}}>Blekning i</Text>
 </FadeInView>
 </View>
 );
}

När du väljer en varaktighet för din animering är det viktigt att hitta rätt balans mellan hastighet och jämnhet.

Försök att börja med en längre varaktighet när du först experimenterar. En längre varaktighet ger dig mer tid att justera easing-funktionen och förfina din animation. Du kan alltid förkorta varaktigheten senare när du är nöjd med den totala effekten.

Använd lättnadsfunktioner

Enkla animationer kan ha en konstant hastighet, men att variera hastigheten kan skapa mer naturliga effekter. Lättnadsfunktioner styr förändringshastigheten för en animation över tid. De kan få dina animationer att starta långsamt och sedan snabba upp. Att ställa in olika hastigheter allt eftersom animeringen fortskrider kan skapa en smidig och engagerande animering.

Ta det här exemplet på att använda en lättnadsfunktion:

importera Reagera, { useRef } från'reagera';
importera { Animerad, Visa } från"reagera-native";
konst FadeInView = (rekvisita) => {
konst fadeAnim = useRef(ny Animerad. Värde(0)).nuvarande; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 att värdesätta: 1,
 varaktighet: 2000,
 easing: Animated.easeOut, // använd lättnadsfunktionen här
 useNativeDriver: Sann,
 }
 ).Start();
 }, [fadeAnim]);
lämna tillbaka (
 stil={{
 ...rekvisita.stil,
 opacitet: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
exporterastandardfungeraApp() {
lämna tillbaka (
böja: 1, alignItems: 'Centrum', motivera innehåll: 'Centrum'}}>
bredd: 250, höjd: 50, bakgrundsfärg: 'puderblå'}}>
textstorlek: 28, textJustera: 'Centrum', marginal: 10}}>Tona in</Text>
 </FadeInView>
 </View>
 );
}

Denna kod använder Animated.easeOut funktion för att kontrollera ändringshastigheten för opaciteten för en animerad Se. De Animated.timing() metoden kommer att använda ease-out-funktionen för att gradvis ändra opaciteten från 0 till 1 under en varaktighet på två sekunder, för att få animationen att verka sakta ner när den når slutet.

Du kan använda olika typer av lättnadsfunktioner för att få dina animationer att se smidigare ut, inklusive lätta in, lätta ut och lätta ut.

Att välja rätt lättnadsfunktion kan göra stor skillnad i den upplevda kvaliteten på din applikations animationer. Det är värt att ta lite tid att leka med dem och se vad som fungerar bäst för dina specifika användningsfall.

Keyframes hjälper till med komplexa animationer

Nyckelrutor är markörer som låter dig lokalisera ögonblick i din animation där du vill göra ändringar i egenskaper som position, skala eller rotation. Det är som att markera tidpunkter för att styra animeringen.

Du kan använda en uppsättning av nyckelbildrutor för att ställa in specifika värden för alla egenskaper du vill animera. Detta hjälper dig att kontrollera timing och beteende, särskilt för komplexa animationer som de som involverar karaktärsrörelser.

För att skapa en grundläggande nyckelbildsanimering måste du ange vilka nyckelbildrutor du vill animera mellan och den totala varaktigheten.

Låt oss till exempel säga att du vill animera en kvadrat från en startposition på (0, 0) till en slutposition på (100, 100) under en period av en sekund.

Du kan skapa en uppsättning nyckelbildrutor så här:

konst keyframes = [
 { x: 0, y: 0 },
 { x: 50, y: 50 },
 { x: 100, y: 100 },
];

I det här fallet finns det tre nyckelrutor: en i början av animeringen, en i mitten och en i slutet. Du kan sedan skicka denna uppsättning nyckelbildrutor till ditt animationsbibliotek, tillsammans med en varaktighet på 1 000 millisekunder, för att skapa en smidig animering mellan nyckelbildrutorna.

I vissa bibliotek måste du också ange en lättnadsfunktion för att styra hur animeringen fortskrider. Du kan dock tillämpa grundidén att ange nyckelbildrutor och varaktighet på de flesta animationsbibliotek.

Dra fördel av enheten med hårdvaruacceleration

Hårdvaruacceleration kan vara ett kraftfullt verktyg för att optimera prestandan för dina React Native-animationer. Genom att utnyttja enhetens grafikhårdvara kan du avlasta en del av bearbetningsarbetet från CPU: n och i sin tur uppnå smidigare och mer lyhörda animationer.

Enhetens GPU kommer då att bearbeta de animerade värdena och stilarna, snarare än att JavaScript-tråden måste göra det.

Maskinvaruacceleration kanske inte är tillgänglig på alla enheter, så det är viktigt att testa dina animationer på en mängd olika riktiga enheter för att säkerställa bästa prestanda.