Spring- og decay-animasjoner

Hvordan en fjæranimasjon føles, styres av to parametere: tension og friction. Tension styrer hvor raskt fjæren trekkes mot målverdien — høyere tension gir raskere og mer kontant bevegelse. Friction styrer hvor raskt svingningene dempes — lavere friction gir mer sprett.

Standardverdien for tension er 40, og for friction er den 7. Prøv tension 100 og friction 10 for en rask og responsiv følelse. Prøv tension 20 og friction 3 for en langsom og ustødig effekt. Eksperimenter for å finne riktig følelse for brukergrensesnittet.

React Native støtter også en mer fysikkorrekt fjærmodell ved hjelp av stivhet, masse og demping. Disse tilsvarer fysiske egenskaper ved et fjærsystem – stivhet er fjærkonstanten, masse er objektets vekt, og demping er luftmotstandskoeffisienten.

Denne modellen er kompatibel med fjæranimasjoner i iOS UIKit og Framer Motion på nettet, noe som gjør det enklere å gjenskape animasjoner som er utformet i prototypingsverktøy. Bruk enten spennings-/friksjonsmodellen eller stivhets-/masse-/dempingsmodellen – ikke begge samtidig.

Et vanlig mønster for fjæranimasjoner er å skalere en knapp litt ned når den trykkes på, og tilbake til full størrelse når trykket slippes, slik at brukeren får en tilfredsstillende taktil tilbakemelding. Bruk Pressable med onPressIn og onPressOut for å utløse fjæranimasjoner på skaleringsverdien.

Den raske fjærbevegelsen ned ved trykk og tilbake ved slipp får knappene til å føles fysiske og responsive. Dette er mer tilfredsstillende enn en enkel endring av gjennomsiktighet og brukes ofte i gjennomarbeidede mobilapper.

Animated.decay simulerer bevegelsesmengde: Den begynner å bevege en verdi med en angitt hastighet og bremser den gradvis over tid, som om friksjon virket på den. Det finnes ingen målverdi – animasjonen kjører til bevegelsesmengden er brukt opp.

Decay er det naturlige supplementet til sveipebevegelser. Når brukeren sveiper raskt over et kort eller en liste, sendes hastigheten ved slipp direkte inn i en decay-animasjon. Da fortsetter elementet å bevege seg og bremser naturlig – akkurat slik mobilapper oppførte seg før digitale brukergrensesnitt.

Det typiske decay-mønsteret er å spore fingerens posisjon under en pan-bevegelse og sende den endelige hastigheten fra bevegelsen til Animated.decay når fingeren løftes. Verdien for deceleration (standardverdi 0.997) styrer hvor raskt elementet bremser – en verdi nærmere 1 gir lengre glidning, mens en verdi nærmere 0 gir en rask stopp.

Når decay-animasjonen er ferdig, fester du vanligvis elementet til en sluttposisjon ved hjelp av en fjæranimasjon dersom det er nødvendig, for eksempel ved å feste et kort tilbake til midten eller til en posisjon som viser at det er avvist.

Det er viktig å forstå når de ulike animasjonstypene bør brukes, for å få et naturlig brukergrensesnitt:

• Animated.timing – forutsigbar og har fast varighet. Egner seg best for tilbakemeldinger i brukergrensesnittet, som endringer i gjennomsiktighet og fremdriftsindikatorer, der nøyaktig timing er viktig.
• Animated.spring – elastisk og går forbi målverdien. Egner seg best for responsive interaktive elementer som knapper, kort og visning av modaler.
• Animated.decay – basert på bevegelsesmengde og uten fast sluttpunkt. Egner seg best for å fortsette en bevegelse etter at en bevegelse er sluppet, for eksempel ved sveiping.

Fjærer har også parameteren velocity, som angir fjærens starthastighet og gjør at de kobles naturlig til bevegelse fra en gest. Når brukeren drar i et kort og slipper, kan du starte en fjær med hastigheten fra gesten, slik at bevegelsen fortsetter jevnt.

Dette skaper en sømløs overgang mellom gest og animasjon – kortet føles som om det ble kastet med brukerens hånd, i stedet for å bli flyttet brått til hvileposisjonen.

Animated.ValueXY er en praktisk omslagsklasse som inneholder et par Animated.Values for x- og y-koordinater. Den forenkler 2D-animasjoner, for eksempel når kort skal dras. Både spring og decay fungerer med ValueXY, som også har hjelpemetoder som getTranslateTransform() for automatisk å generere transformasjonsmatrisen.

ValueXY reduserer mengden standardkode når du må animere et elements posisjon i et 2D-område, fordi du slipper å håndtere to separate Animated.Values manuelt.

Du kan tilbakestille en Animated.Value til starttilstanden ved å kalle .setValue(initialValue). Dette er nyttig før du kjører en animasjon på nytt – for eksempel ved å tilbakestille en skalering til 0 før du kjører en ny innfjæringsanimasjon, eller ved å tilbakestille posisjonen før du spiller av en innledende animasjon på nytt.

Tilbakestill alltid synkront før du starter animasjonen, slik at du unngår et synlig blink. Kall setValue i den samme hendelsesbehandleren eller i useEffect, umiddelbart etterfulgt av Animated.spring(...).start().

I denne leksjonen lærte De at Animated.spring oppretter fysikkbasert, sprettende bevegelse som justeres med tension og friction, at Animated.decay simulerer bevegelsesmengdebasert bremsing fra en starthastighet, og at hver animasjonstype passer til ulike interaksjonsmønstre – spring for tilbakemelding ved trykk og decay når en gest slippes. Deretter skal vi se på hvordan flere animasjoner kan settes sammen parallelt og i sekvens.