Meerdere eigenschappen parallel en sequentieel animeren

Animated.sequence neemt een array met animaties en voert deze één voor één uit: de volgende animatie start pas wanneer de vorige is voltooid. Dit is ideaal voor choreografieën met meerdere stappen: eerst wordt een knop ingedrukt, daarna verschijnt een laadindicator en vervolgens springt een vinkje naar binnen.

Als een animatie in een reeks wordt gestopt, worden de daaropvolgende animaties niet uitgevoerd. Je kunt reeksen nesten in parallelle groepen en andersom voor complexe choreografieën.

Animated.delay doet gedurende een opgegeven aantal milliseconden niets. Dit is alleen nuttig binnen een reeks, waar het een pauze tussen animatiestappen creëert. Met delay kun je een natuurlijk tempo in animaties met meerdere stappen inbouwen.

Je kunt bijvoorbeeld na het voltooien van een actie een succesbericht met een korte vertraging tonen. Zo krijgt je gebruiker de tijd om te begrijpen wat er is gebeurd voordat de gebruikersinterface verandert. Vertragingen onder 300 ms zijn meestal niet merkbaar; 400–800 ms voelt doelbewust en weloverwogen aan.

Animated.stagger lijkt op parallel, maar voegt een tijdsverschil toe tussen het starten van elke animatie. De eerste animatie start onmiddellijk, de tweede start na de stagger-vertraging, de derde na tweemaal die vertraging, enzovoort. Zo ontstaan fraaie trapsgewijze effecten bij het verschijnen van lijsten of menu's.

Stagger is ideaal om lijstitems te animeren wanneer ze op het scherm verschijnen: elk item vervaagt of schuift iets na het vorige naar binnen, waardoor het oog een duidelijke route door de inhoud kan volgen.

Een goed uitgewerkte animatie voor het verschijnen van een modaal venster kan er als volgt uitzien: (1) de overlay vervaagt naar binnen, (2) de kaart van het modale venster schuift omhoog en vervaagt tegelijk naar binnen, (3) de titeltekst verschijnt. Deze choreografie in drie fasen gebruikt een reeks waarvan de eerste stap de overlay is, de tweede stap een parallelle animatie voor de kaart en de derde stap de titel.

Als je dit omhult met een useEffect die wordt uitgevoerd wanneer het modale venster zichtbaar wordt, krijg je de volledige verschijningsanimatie die door de status wordt gestart.

Verdwijningsanimaties worden in omgekeerde volgorde uitgevoerd: eerst schuift de kaart weg en vervaagt deze, daarna vervaagt de overlay en vervolgens werk je de status bij om het modale venster uit de componentstructuur te verwijderen. Start het verdwijnen in de sluitingsafhandelaar, wacht in de callback tot de animatie is voltooid en roep pas daarna setVisible(false) aan.

Zo voorkom je dat het modale venster abrupt verdwijnt voordat de animatie is voltooid, een veelgemaakte fout waardoor apps goedkoop aanvoelen.

Je kunt compositiemethoden vrij nesten. Een parallelle animatie binnen een reeks betekent dat er tijdens die stap meerdere dingen tegelijk gebeuren. Een reeks binnen een parallelle animatie betekent dat één tak stap voor stap wordt uitgevoerd terwijl een andere tak onmiddellijk parallel begint.

Je kunt dit vergelijken met het plannen van een theatervoorstelling: sommige acteurs staan tegelijk op het podium (parallel), sommige scènes volgen elkaar direct op (reeks) en sommige speciale effecten worden met een rimpelvertraging uitgevoerd (stagger).

Het object dat door compositiemethoden wordt geretourneerd, heeft een methode .stop(). Sla de animatie op in een ref, zodat je deze van buitenaf kunt stoppen, bijvoorbeeld wanneer een component halverwege de animatie wordt verwijderd of wanneer een nieuwe animatie de huidige moet onderbreken.

Stop animaties altijd in de opruimfunctie van useEffect om waarschuwingen over 'setState on unmounted component' en geheugenlekken te voorkomen, vooral bij herhalende of langlopende reeksen.

Bij een praktische implementatie van stagger initialiseer je een array met Animated.Values, één per lijstitem, allemaal op transparantie 0. Vervolgens voer je een stagger-animatie uit in een useEffect wanneer de gegevens zijn geladen. Elk item in de weergegeven lijst wordt via zijn index gekoppeld aan de bijbehorende animated value.

Door deze techniek voelen schermen met veel inhoud dynamischer aan. Gebruikers ervaren trapsgewijs laden als sneller dan wanneer alles tegelijk verschijnt, ook al duurt het in totaal langer.

Door animaties met de levenscyclus van een component samen te stellen, zorg je dat ze op het juiste moment worden afgespeeld. Gebruik useEffect voor animaties bij het koppelen, effecten van statuswijzigingen voor voorwaardelijke animaties en compositie van callbacks voor verdwijningsanimaties voordat de component wordt verwijderd.

Houd de animatielogica dicht bij de component die de animated values beheert. Als de animatielogica complex wordt, kun je deze verplaatsen naar een aangepaste hook die de animated values en triggerfuncties retourneert, zodat de JSX-laag overzichtelijk blijft.

In deze les heb je geleerd dat Animated.parallel meerdere animaties tegelijk uitvoert, dat Animated.sequence animaties aan elkaar koppelt, zodat elke animatie start nadat de vorige is voltooid en dat Animated.stagger trapsgewijze effecten maakt door de starttijden binnen een array met animaties te verschuiven. Hierna leer je hoe je met useNativeDriver animaties van 60 fps maakt door het werk uit te besteden aan de native thread.