Hvordan lage Native-animasjoner med bedre reaksjoner

Mobilapper bruker ofte animasjon for å live opp brukeropplevelsen. Men å lage animasjoner av høy kvalitet kan være en utfordring.

Heldigvis finnes det konsepter og teknikker du kan bruke for å forbedre animasjonsferdighetene dine. Du kan deretter bruke dem for å lage bedre, jevnere animasjoner for din neste React Native-mobilapplikasjon.

Reager innfødte animasjoner

De Reager Native Animated bibliotek er den mest populære måten å lage animasjoner på i en React Native-app.

Akkurat som Reacts innebygde animasjonsbibliotek, er Animated API en del av det JavaScript-baserte animerte biblioteket. Animert gir et sett med klasser og metoder som lar deg lage jevne og flytende animasjoner. Det er flere andre gode alternativer for å lage React Native-animasjoner, for eksempel Reanimated.

Å lage gode animasjoner i React Native handler imidlertid ikke bare om å bruke riktig bibliotek eller angi de riktige egenskapene. Det handler også om å forstå prinsippene for animasjon og hvordan man bruker dem i sammenheng med utvikling av mobilapper. Så her er noen viktige prinsipper du bør forstå og merke deg når du bygger animasjonene dine.

Justere animasjonens varighet

Animasjoner skal føles jevne og naturlige for en bruker. Å oppnå dette kan avhenge av hvordan du håndterer varigheten for bestemte animasjoner du lager.

Varighet refererer til hvor lang tid det tar for en animasjon å kjøre fullstendig. Som standard har animasjoner i React Native en varighet på 500 millisekunder, men du kan justere dem for å gå raskere eller saktere.

Du bør justere varigheten av animasjonen i henhold til kompleksiteten. En enkel animasjon, for eksempel en fade-in, trenger kanskje bare en kort varighet, mens en mer kompleks animasjon, for eksempel en slide-in med en spretteffekt, kan trenge å vare lenger, for å føles naturlig og jevn.

Med Animation.timing() metoden, kan du lage en tilpasset tidsbestemt animasjon som passer dine behov.

Her er et eksempel på hvordan du legger til en egendefinert varighet til en enkel inntoningsanimasjon:

import Reager, { useRef } fra'reagere';
import { Animert, se } fra'reager-innfødt';
konst FadeInView = (Rekvisitter) => {
konst fadeAnim = brukRef(ny Animert. Verdi(0)).nåværende; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 å verdsette: 1,
 varighet: 2000, // angi egendefinert varighet
 useNativeDriver: ekte,
 }
 ).start();
 }, [fadeAnim]);
komme tilbake (
 stil={{
 ...rekvisitter.stil,
 opasitet: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
eksportmisligholdefunksjonApp() {
komme tilbake (
bøye seg: 1, alignItems: 'senter', begrunn innholdet: 'senter'}}>
bredde: 250, høyde: 50, bakgrunnsfarge: 'pulver blå'}}>
skriftstørrelse: 28, tekstJuster: 'senter', margin: 10}}>Fasing i</Text>
 </FadeInView>
 </View>
 );
}

Når du velger en varighet for animasjonen din, er det viktig å finne den rette balansen mellom hastighet og jevnhet.

Prøv å starte med en lengre varighet når du først eksperimenterer. En lengre varighet vil gi deg mer tid til å justere lettelsesfunksjonen og avgrense animasjonen. Du kan alltid forkorte varigheten senere når du er fornøyd med den totale effekten.

Bruk lettelsesfunksjoner

Enkle animasjoner kan ha konstant hastighet, men å variere hastigheten kan skape mer naturlige effekter. Forenklingsfunksjoner kontrollerer endringshastigheten til en animasjon over tid. De kan få animasjonene til å starte sakte, og deretter øke hastigheten. Ved å angi forskjellige hastigheter etter hvert som animasjonen skrider frem, kan du skape en jevn og engasjerende animasjon.

Ta dette eksempelet på bruk av en lettelsesfunksjon:

import Reager, { useRef } fra'reagere';
import { Animert, se } fra'reager-innfødt';
konst FadeInView = (Rekvisitter) => {
konst fadeAnim = brukRef(ny Animert. Verdi(0)).nåværende; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 å verdsette: 1,
 varighet: 2000,
 lettelser: Animated.easeOut, // bruk lettelsesfunksjonen her
 useNativeDriver: ekte,
 }
 ).start();
 }, [fadeAnim]);
komme tilbake (
 stil={{
 ...rekvisitter.stil,
 opasitet: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
eksportmisligholdefunksjonApp() {
komme tilbake (
bøye seg: 1, alignItems: 'senter', begrunn innholdet: 'senter'}}>
bredde: 250, høyde: 50, bakgrunnsfarge: 'pulver blå'}}>
skriftstørrelse: 28, tekstJuster: 'senter', margin: 10}}>Fade inn</Text>
 </FadeInView>
 </View>
 );
}

Denne koden bruker Animated.easeOut funksjon for å kontrollere endringshastigheten til opasiteten til en animert Utsikt. De Animated.timing() metoden vil bruke ease-out-funksjonen til å gradvis endre opasiteten fra 0 til 1 over en varighet på to sekunder, for å få animasjonen til å se ut til å avta når den når slutten.

Du kan bruke forskjellige typer lettelsesfunksjoner for å få animasjonene dine til å se jevnere ut, inkludert lett-inn, lett-ut og lett-inn-ut.

Å velge riktig lettelsesfunksjon kan utgjøre en stor forskjell i den opplevde kvaliteten på applikasjonens animasjoner. Det er verdt å bruke litt tid på å leke med dem og se hva som fungerer best for dine spesifikke brukstilfeller.

Keyframes hjelper med komplekse animasjoner

Keyframes er markører som lar deg finne øyeblikk i animasjonen din der du vil gjøre endringer i egenskaper som posisjon, skala eller rotasjon. Det er som å markere punkter i tid for å veilede animasjonen.

Du kan bruke et sett med keyframes for å angi spesifikke verdier for en hvilken som helst egenskap du vil animere. Dette hjelper deg med å kontrollere timing og oppførsel, spesielt for komplekse animasjoner som de som involverer karakterbevegelser.

For å lage en grunnleggende keyframe-animasjon, må du spesifisere keyframes du vil animere mellom og den totale varigheten.

La oss for eksempel si at du vil animere en firkant fra en startposisjon på (0, 0) til en sluttposisjon på (100, 100) over en periode på ett sekund.

Du kan lage en rekke nøkkelrammer som dette:

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

I dette tilfellet er det tre nøkkelbilder: en i starten av animasjonen, en i midten og en på slutten. Du kan deretter sende dette utvalget av nøkkelbilder til animasjonsbiblioteket ditt, sammen med en varighet på 1000 millisekunder, for å lage en jevn animasjon mellom nøkkelbildene.

I noen biblioteker må du også spesifisere en lettelsesfunksjon for å kontrollere hvordan animasjonen utvikler seg. Du kan imidlertid bruke den grunnleggende ideen om å spesifisere nøkkelbilder og varighet på de fleste animasjonsbiblioteker.

Dra nytte av enheten med maskinvareakselerasjon

Maskinvareakselerasjon kan være et kraftig verktøy for å optimalisere ytelsen til dine React Native-animasjoner. Ved å utnytte enhetens grafikkmaskinvare kan du laste ned noe av prosesseringsarbeidet fra CPU-en og på sin side oppnå jevnere, mer responsive animasjoner.

Enhetens GPU vil da naturlig behandle de animerte verdiene og stilene, i stedet for at JavaScript-tråden må gjøre det.

Maskinvareakselerasjon er kanskje ikke tilgjengelig på alle enheter, så det er viktig å teste animasjonene dine på en rekke ekte enheter for å sikre best mulig ytelse.