Parallelle animationer og animationer i sekvens

Animated.sequence tager et array af animationer og kører dem én ad gangen — den næste animation starter først, når den forrige er færdig. Det er perfekt til koreografi i flere trin: først trykkes en knap ind, derefter vises en spinner, og til sidst springer et flueben ind.

Hvis en animation i en sekvens stoppes, kører de efterfølgende animationer ikke. Sekvenser kan indlejres i parallelle grupper og omvendt for at skabe kompleks koreografi.

Animated.delay gør ingenting i det angivne antal millisekunder. Den er kun nyttig i en sekvens, hvor den skaber en pause mellem animationstrin. Med delay kan du skabe et naturligt tempo i animationer i flere trin.

Du kan f.eks. vise en succesmeddelelse med en kort forsinkelse, efter en handling er fuldført, så brugeren får tid til at registrere, hvad der skete, før brugergrænsefladen ændres. Forsinkelser under 300 ms kan normalt ikke mærkes; 400-800 ms føles bevidst og velovervejet.

Animated.stagger minder om parallel, men med en tidsforskydning mellem starten på hver animation. Den første animation starter med det samme, den anden starter efter stagger-forsinkelsen, den tredje efter 2× forsinkelsen osv. Det skaber flotte kaskadeeffekter, når lister eller menuer vises.

Stagger er perfekt til at animere listeelementer, når de kommer ind på skærmen — hvert element fader eller glider ind lidt efter det forrige, så øjet får en tydelig vej gennem indholdet.

En gennemarbejdet modal kan vises sådan: (1) overlejringen fader ind, (2) modalens kort glider op og fader ind samtidig, (3) titelteksten vises. Denne koreografi i tre faser bruger en sekvens, hvor første trin er overlejringen, andet trin er en parallel animation for kortet, og tredje trin er titlen.

Hvis du pakker dette ind i en useEffect, der udløses, når modalen bliver synlig, får du den komplette indgangsanimation, som udløses af tilstanden.

Afslutningsanimationer kører i omvendt rækkefølge: først glider kortet væk og fader ud, derefter fader overlejringen ud, og til sidst opdaterer du tilstanden for at afmontere modalen. Udløs afslutningen i lukkehændelsen, vent på, at animationen bliver færdig i callbacken, og kald først derefter setVisible(false).

Det forhindrer modalen i pludseligt at forsvinde, før animationen er færdig — en almindelig fejl, der får apps til at virke billige.

Metoder til sammensætning kan frit indlejres. En parallel animation inde i en sekvens betyder, at flere ting sker samtidig på det pågældende trin. En sekvens inde i en parallel betyder, at én gren kører trin for trin, mens en anden gren kører med det samme parallelt.

Tænk på det som planlægning af en teaterforestilling: Nogle skuespillere er på scenen samtidig (parallel), nogle scener foregår lige efter hinanden (sekvens), og nogle specialeffekter sker med en bølgeforsinkelse (stagger).

Det objekt, som metoderne til sammensætning returnerer, har en .stop()-metode. Gem animationen i en ref, så du kan stoppe den udefra (f.eks. når en komponent afmonteres midt i en animation, eller når en ny animation skal afbryde den aktuelle).

Stop altid animationer i oprydningen af useEffect for at forhindre advarsler om 'setState on unmounted component' og hukommelseslækager, især for gentagne eller langvarige sekvenser.

En praktisk implementering af stagger initialiserer et array af Animated.Values (én pr. listeelement), alle med gennemsigtigheden 0, og kører derefter en stagger-animation i en useEffect, når data indlæses. Hvert element i den viste liste forbindes med sin animerede værdi via sit indeks.

Denne teknik får indholdstunge skærmbilleder til at føles mere dynamiske. Brugere oplever forskudt indlæsning som hurtigere end, at alt vises på én gang, selv om den samlede tid er længere.

Ved at sammensætte animationer med komponentens livscyklus sikrer du, at animationerne afspilles på det rigtige tidspunkt. Brug useEffect til animationer ved montering, effekter ved ændring af tilstand til betingede animationer og sammensætning via callbacks til afslutningsanimationer før afmontering.

Hold animationslogikken tæt på den komponent, der ejer de animerede værdier. Hvis animationslogikken bliver kompleks, kan du udtrække den til en tilpasset hook, der returnerer de animerede værdier og udløserfunktionerne, så JSX-laget forbliver rent.

I denne lektion har du lært, at Animated.parallel kører flere animationer samtidig, at Animated.sequence kæder animationer sammen, så hver animation starter, efter den forrige er færdig, og at Animated.stagger skaber kaskadeeffekter ved at forskyde starttidspunkterne i et array af animationer. Som det næste undersøger vi useNativeDriver for at opnå animationer ved 60 fps ved at flytte arbejdet til den native tråd.