Sådan opretter du bedre reagerende indfødte animationer

Mobilapps bruger ofte animation til at sætte liv i brugeroplevelsen. Men at skabe animationer af høj kvalitet kan være en udfordring.

Heldigvis er der koncepter og teknikker, du kan bruge til at forbedre dine animationsevner. Du kan derefter anvende dem til at skabe bedre, jævnere animationer til din næste React Native-mobilapplikation.

Reager indfødte animationer

Det React Native Animated bibliotek er den mest populære måde at skabe animationer i en React Native-app.

Ligesom Reacts indbyggede animationsbibliotek, er den animerede API en del af det JavaScript-baserede animerede bibliotek. Animeret giver et sæt klasser og metoder, der lader dig skabe jævne og flydende animationer. Der er flere andre gode muligheder for at skabe React Native-animationer, såsom Reanimated.

At skabe gode animationer i React Native handler dog ikke kun om at bruge det rigtige bibliotek eller at indstille de rigtige egenskaber. Det handler også om at forstå principperne for animation, og hvordan man anvender dem i forbindelse med udvikling af mobilapps. Så her er et par nøgleprincipper, du skal forstå og bemærke, når du bygger dine animationer.

Justering af animationsvarighed

Animationer skal føles glatte og naturlige for en bruger. At opnå dette kan afhænge af, hvordan du håndterer varigheden for bestemte animationer, du opretter.

Varighed refererer til den tid, det tager for en animation at køre helt. Som standard har animationer i React Native en varighed på 500 millisekunder, men du kan justere dem til at gå hurtigere eller langsommere.

Du bør justere varigheden af ​​animationen i henhold til dens kompleksitet. En simpel animation, såsom en fade-in, behøver muligvis kun en kort varighed, mens en mere kompleks animation, såsom en slide-in med en bounce-effekt, måske skal vare længere for at føles naturlig og glat.

Med Animation.timing() metode, kan du oprette en tilpasset timet animation, der passer til dine behov.

Her er et eksempel på, hvordan du tilføjer en brugerdefineret varighed til en simpel indtoningsanimation:

importere Reager, { useRef } fra'reagere';
importere { Animeret, se } fra'reager-native';
konst FadeInView = (rekvisitter) => {
konst fadeAnim = brugRef(ny Animeret. Værdi(0)).nuværende; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 At værdsætte: 1,
 varighed: 2000, // indstil brugerdefineret varighed
 useNativeDriver: rigtigt,
 }
 ).Start();
 }, [fadeAnim]);
Vend tilbage (
 stil={{
 ...rekvisitter.stil,
 opacitet: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
eksportStandardfungereApp() {
Vend tilbage (
bøje: 1, alignItems: 'centrum', retfærdig indhold: 'centrum'}}>
bredde: 250, højde: 50, baggrundsfarve: 'pulverblå'}}>
skriftstørrelse: 28, tekstJuster: 'centrum', margen: 10}}>Fadning i</Text>
 </FadeInView>
 </View>
 );
}

Når du vælger en varighed for din animation, er det vigtigt at finde den rette balance mellem hastighed og jævnhed.

Prøv at starte med en længere varighed, når du først eksperimenterer. En længere varighed vil give dig mere tid til at justere easing-funktionen og forfine din animation. Du kan altid forkorte varigheden senere, når du er tilfreds med den samlede effekt.

Brug lettelsesfunktioner

Simple animationer kan have en konstant hastighed, men at variere hastigheden kan skabe mere naturlige effekter. Lempelsesfunktioner styrer ændringshastigheden af ​​en animation over tid. De kan få dine animationer til at starte langsomt og derefter fremskynde. Indstilling af forskellige hastigheder, efterhånden som animationen skrider frem, kan skabe en jævn og engagerende animation.

Tag dette eksempel på brug af en lempelsesfunktion:

importere Reager, { useRef } fra'reagere';
importere { Animeret, se } fra'reager-native';
konst FadeInView = (rekvisitter) => {
konst fadeAnim = brugRef(ny Animeret. Værdi(0)).nuværende; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 At værdsætte: 1,
 varighed: 2000,
 easing: Animated.easeOut, // brug easing-funktionen her
 useNativeDriver: rigtigt,
 }
 ).Start();
 }, [fadeAnim]);
Vend tilbage (
 stil={{
 ...rekvisitter.stil,
 opacitet: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
eksportStandardfungereApp() {
Vend tilbage (
bøje: 1, alignItems: 'centrum', retfærdig indhold: 'centrum'}}>
bredde: 250, højde: 50, baggrundsfarve: 'pulverblå'}}>
skriftstørrelse: 28, tekstJuster: 'centrum', margen: 10}}>Fade ind</Text>
 </FadeInView>
 </View>
 );
}

Denne kode bruger Animated.easeOut funktion til at kontrollere ændringshastigheden af ​​opaciteten af ​​en animeret Udsigt. Det Animated.timing() metoden vil bruge ease-out-funktionen til gradvist at ændre opaciteten fra 0 til 1 over en varighed på to sekunder, for at få animationen til at blive langsommere, når den når sin afslutning.

Du kan bruge forskellige typer easing-funktioner til at få dine animationer til at se mere jævne ud, herunder ease-in, ease-out og ease-in-out.

At vælge den rigtige easing-funktion kan gøre en stor forskel i den oplevede kvalitet af din applikations animationer. Det er værd at bruge lidt tid på at lege med dem og se, hvad der fungerer bedst til dine specifikke brugstilfælde.

Keyframes hjælper med komplekse animationer

Keyframes er markører, der lader dig lokalisere øjeblikke i din animation, hvor du vil foretage ændringer i egenskaber som position, skala eller rotation. Det er som at markere tidspunkter for at guide animationen.

Du kan bruge et sæt af keyframes til at angive specifikke værdier for enhver ejendom du ønsker at animere. Dette hjælper dig med at kontrollere timing og adfærd, især for komplekse animationer som dem, der involverer karakterbevægelser.

For at oprette en grundlæggende keyframe-animation skal du angive de keyframes, du vil animere mellem, og den samlede varighed.

Lad os f.eks. sige, at du vil animere et kvadrat fra en startposition på (0, 0) til en slutposition på (100, 100) over en periode på et sekund.

Du kan oprette en række keyframes som dette:

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

I dette tilfælde er der tre keyframes: en i starten af ​​animationen, en i midten og en i slutningen. Du kan derefter videregive denne række af keyframes til dit animationsbibliotek sammen med en varighed på 1.000 millisekunder for at skabe en jævn animation mellem keyframes.

I nogle biblioteker skal du også angive en lempelsesfunktion for at kontrollere, hvordan animationen skrider frem. Du kan dog anvende den grundlæggende idé om at angive keyframes og varighed på de fleste animationsbiblioteker.

Udnyt enheden med hardwareacceleration

Hardwareacceleration kan være et kraftfuldt værktøj til at optimere ydeevnen af ​​dine React Native-animationer. Ved at udnytte enhedens grafikhardware kan du aflaste noget af bearbejdningsarbejdet fra CPU'en og til gengæld opnå jævnere, mere responsive animationer.

Enhedens GPU vil derefter indbygget behandle de animerede værdier og stilarter, i stedet for at JavaScript-tråden skal gøre det.

Hardwareacceleration er muligvis ikke tilgængelig på alle enheder, så det er vigtigt at teste dine animationer på en række rigtige enheder for at sikre den bedste ydeevne.