Spring- og decay-animationer

Fornemmelsen af en spring-animation styres af to parametre: tension og friction. Tension styrer, hvor hurtigt springet trækker mod målet — højere tension betyder hurtigere og mere kontant bevægelse. Friction styrer, hvor hurtigt svingningerne dæmpes — lavere friction betyder mere opspring.

Standardværdien for tension er 40, og for friction er den 7. Prøv tension 100 og friction 10 for en hurtig og responsiv fornemmelse. Prøv tension 20 og friction 3 for en langsom og vaklende effekt. Eksperimentér for at finde den rette fornemmelse til din brugergrænseflade.

React Native understøtter også en mere fysisk nøjagtig fjeder-model ved hjælp af stivhed, masse og dæmpning. Disse svarer til de fysiske egenskaber ved et fjeder-system — stivhed er fjederkonstanten, masse er objektets vægt, og dæmpning er modstandskoefficienten.

Denne model er kompatibel med fjederanimationer i iOS UIKit og Framer Motion på nettet, hvilket gør det nemmere at matche animationer, der er designet i prototypingsværktøjer. Brug enten spændings-/friktionsmodellen eller stivheds-/masse-/dæmpningsmodellen — ikke begge på samme tid.

Et almindeligt mønster for fjederanimationer er at skalere en knap en smule ned ved tryk og tilbage til fuld størrelse ved slip, hvilket giver en tilfredsstillende taktil feedback. Brug Pressable sammen med onPressIn og onPressOut til at udløse fjederanimationer for skaleringsværdien.

Den hurtige nedskalering ved tryk og tilbagespringet ved slip får knapper til at føles fysiske og reagerende. Det er mere tilfredsstillende end en simpel ændring af gennemsigtigheden og bruges i vid udstrækning i gennemarbejdede mobilapps.

Animated.decay simulerer fremdrift: Den begynder at bevæge en værdi med en given hastighed og sænker den gradvist over tid, som om der virkede friktion på den. Der er ingen målværdi — animationen kører, indtil fremdriften er opbrugt.

Decay er det naturlige supplement til swipe-bevægelser. Når en bruger svirper et kort eller en liste, føres sliphastigheden fra bevægelsen direkte ind i en decay-animation, så elementet fortsætter med at bevæge sig og naturligt sænker farten — præcis som mobilapps fungerede før digitale brugergrænseflader.

Det typiske decay-mønster er at registrere fingerens position under en pan-bevægelse og ved slip sende den endelige hastighed fra bevægelsen til Animated.decay. Værdien deceleration (standardværdien er 0.997) styrer, hvor hurtigt elementet sænker farten — tættere på 1 betyder et længere glid, mens tættere på 0 betyder et hurtigt stop.

Når decay er færdig, fastlåser du typisk elementet til en sluttilstand ved hjælp af en fjederanimation, hvis det er nødvendigt (f.eks. ved at fastlåse et kort tilbage i midten eller til en afvist position).

Det er afgørende for en naturlig brugergrænseflade at forstå, hvornår du skal bruge hver animationstype:

• Animated.timing — forudsigelig med en fast varighed. Bedst til feedback i brugergrænsefladen, f.eks. ændringer af gennemsigtighed og statuslinjer, hvor den præcise timing er vigtig.
• Animated.spring — elastisk og overskyder målet. Bedst til reaktive interaktive elementer som knapper, kort og modaler, der vises.
• Animated.decay — baseret på fremdrift uden en fast slutning. Bedst til at fortsætte en bevægelse efter slip af en bevægelse, f.eks. swipes og svirp.

Fjedre har også parameteren velocity, som angiver fjederens begyndelseshastighed, så de naturligt kan forbindes med bevægelser fra brugerbevægelser. Når en bruger trækker i et kort og slipper, kan du starte en fjeder med bevægelsens hastighed, så bevægelsen fortsætter jævnt.

Det skaber en sømløs overgang mellem bevægelse og animation — kortet føles, som om det blev kastet af brugerens hånd, i stedet for at blive teleporteret til sin hvileposition.

Animated.ValueXY er en praktisk indpakning, der indeholder et par Animated.Values for x- og y-koordinater. Den forenkler 2D-animationer som trækning af kort. Både spring og decay fungerer med ValueXY, som også har hjælpemetoder som getTranslateTransform() til automatisk at oprette transformationsarrayet.

ValueXY reducerer standardkode, når du skal animere et elements position i et 2D-rum, fordi du ikke behøver at administrere to separate Animated.Values manuelt.

Du kan nulstille en Animated.Value til dens oprindelige tilstand ved at kalde .setValue(initialValue). Det er nyttigt, før du kører en animation igen — f.eks. når du nulstiller en skalering til 0, før du kører endnu en spring-animation, eller nulstiller positionen, før du afspiller en indgangsanimation igen.

Nulstil altid synkront, før du starter animationen, for at undgå et blink. Kald setValue i den samme hændelsesbehandler eller useEffect, umiddelbart efterfulgt af Animated.spring(...).start().

I denne lektion har du lært, at Animated.spring skaber fysikbaserede, hoppende bevægelser, der finjusteres med spænding og friktion, at Animated.decay simulerer en fremdriftsbaseret opbremsning fra en begyndelseshastighed, og at hver animationstype passer til forskellige interaktionsmønstre — spring til feedback ved tryk og decay, når en bevægelse slippes. Som det næste undersøger vi, hvordan du sammensætter flere animationer parallelt og i sekvens.