Spring- en decay-animaties
Gebruik Animated.spring voor verende, op fysica gebaseerde bewegingen, stel de parameters voor tension en friction af en pas Animated.decay toe voor scroll-effecten op basis van momentum.
Spring- en decay-animaties is een gratis React Native Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Verder dan lineair: beweging op basis van physics
Lineaire timinganimaties voelen mechanisch aan, omdat objecten in de echte wereld zelden met een constante snelheid bewegen. Animaties op basis van physics simuleren natuurlijke krachten zoals veren en momentum, waardoor beweging in de gebruikersinterface levendig en natuurlijk aanvoelt. De Animated API van React Native biedt twee physics-engines: Animated.spring voor elastisch terugveren en Animated.decay voor vertraging op basis van momentum.
De juiste keuze van het animatietype heeft grote invloed op de ervaren kwaliteit. Timing is geschikt voor vervagende doorzichtigheid, spring voor interactieve elementen zoals knoppen en kaarten, en decay voor veegbewegingen om iets te sluiten.
Animated.spring: veerkrachtige beweging
Animated.spring simuleert een veer die een waarde naar een doel trekt. De waarde schiet voorbij het doel en schommelt totdat deze tot rust komt — het klassieke stuitereffect. Je moet minimaal toValue en useNativeDriver opgeven.
Veeranimaties voelen natuurlijk aan voor elementen die reageren op gebruikersinteractie, zoals een knop die groter wordt wanneer je erop drukt of een modaal venster dat van onderaf inschuift. De standaardparameters van de veer zijn al afgestemd op een prettig gevoel op mobiele apparaten, maar je kunt ze aanpassen.
import { Animated } from 'react-native';
import { useRef } from 'react';
const scale = useRef(new Animated.Value(0)).current;
Animated.spring(scale, {
toValue: 1,
useNativeDriver: true,
}).start();Een veer afstellen met tension en friction
Het gevoel van een veeranimatie wordt geregeld door twee parameters: tension en friction. Tension bepaalt hoe snel de veer naar het doel trekt — een hogere tension betekent een snellere, directere beweging. Friction bepaalt hoe snel de schommelingen uitdoven — een lagere friction betekent meer gestuiter.
De standaardwaarde voor tension is 40 en die voor friction is 7. Probeer voor een snelle, responsieve beweging tension 100 en friction 10. Probeer voor een langzaam, wiebelend effect tension 20 en friction 3. Experimenteer om het juiste gevoel voor je gebruikersinterface te vinden.
Animated.spring(scale, {
toValue: 1,
tension: 100, // higher = snappier
friction: 10, // higher = less bouncy
useNativeDriver: true,
}).start();
// Wobbly alternative:
Animated.spring(scale, {
toValue: 1,
tension: 20,
friction: 3,
useNativeDriver: true,
}).start();Een veer met stiffness, mass en damping
React Native ondersteunt ook een natuurgetrouwer fysiek veermodel met stiffness, mass en damping. Deze komen overeen met de fysieke eigenschappen van een veersysteem: stiffness is de veerconstante, mass is het gewicht van het object en damping is de weerstandscoëfficiënt.
Dit model is compatibel met veeranimaties van iOS UIKit en Framer Motion op het web, waardoor het eenvoudiger wordt om animaties na te bootsen die in prototypingtools zijn ontworpen. Gebruik het model met tension/friction of het model met stiffness/mass/damping, maar niet beide tegelijk.
Animated.spring(translateY, {
toValue: 0,
stiffness: 120,
mass: 1,
damping: 14,
useNativeDriver: true,
}).start();Een veereffect voor het indrukken van een knop bouwen
Een veelgebruikt patroon voor een veeranimatie is een knop bij het indrukken iets kleiner maken en bij het loslaten weer de oorspronkelijke grootte geven. Dat zorgt voor prettige, tastbare feedback. Gebruik Pressable met onPressIn en onPressOut om veeranimaties voor de schaalwaarde te starten.
Door de knop bij het indrukken snel kleiner te maken en bij het loslaten terug te laten veren, voelt deze fysiek en responsief aan. Dit geeft een prettiger resultaat dan alleen de transparantie aanpassen en wordt veel gebruikt in goed afgewerkte mobiele apps.
const scale = useRef(new Animated.Value(1)).current;
const onPressIn = () => {
Animated.spring(scale, { toValue: 0.9, useNativeDriver: true }).start();
};
const onPressOut = () => {
Animated.spring(scale, { toValue: 1, useNativeDriver: true }).start();
};
return (
<Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
<Animated.View style={{ transform: [{ scale }] }}>
<Text>Press Me</Text>
</Animated.View>
</Pressable>
);Wat is Animated.decay?
Animated.decay simuleert impuls: een waarde begint met een bepaalde snelheid te bewegen en vertraagt geleidelijk in de loop van de tijd, alsof er wrijving op werkt. Er is geen doelwaarde: de animatie loopt door totdat de impuls op is.
Decay is de natuurlijke aanvulling op veegbewegingen. Wanneer je een kaart of lijst een zetje geeft, wordt de snelheid bij het loslaten rechtstreeks vanuit de beweging doorgegeven aan een decay-animatie. Daardoor blijft het element bewegen en vertraagt het op natuurlijke wijze, precies zoals mobiele apps zouden reageren zonder digitale gebruikersinterface.
// velocity is obtained from a gesture handler's onGestureEvent
Animated.decay(position, {
velocity: 0.8, // initial velocity (pixels per millisecond)
deceleration: 0.997, // how quickly momentum fades (0-1)
useNativeDriver: true,
}).start();Decay na een veegbeweging
Het gebruikelijke patroon voor decay is als volgt: volg de positie van de vinger tijdens een panbeweging en geef bij het optillen van de vinger de eindsnelheid van de beweging door aan Animated.decay. De waarde deceleration (standaard 0.997) bepaalt hoe snel het item vertraagt: dichter bij 1 betekent langer doorglijden, dichter bij 0 betekent snel stoppen.
Na afloop van decay laat je het item meestal met een veeranimatie naar de eindtoestand springen, als dat nodig is, bijvoorbeeld om een kaart terug naar het midden of naar een positie buiten beeld te laten springen.
// In a PanResponder onPanResponderRelease:
onPanResponderRelease: (evt, gestureState) => {
Animated.decay(position, {
velocity: gestureState.vx, // velocity at finger lift
deceleration: 0.997,
useNativeDriver: true,
}).start(({ finished }) => {
if (finished) {
// optionally snap to final position
}
});
}Spring, decay en timing vergelijken
Begrijpen wanneer je elk animatietype gebruikt, is essentieel voor een natuurlijk aanvoelende gebruikersinterface:
- Animated.timing — voorspelbaar, met een vaste duur. Het meest geschikt voor feedback in de gebruikersinterface, zoals veranderingen in transparantie en voortgangsbalken, waarbij een exacte timing belangrijk is.
- Animated.spring — elastisch en schiet over het doel heen. Het meest geschikt voor responsieve interactieve elementen, zoals knoppen, kaarten en het verschijnen van modale vensters.
- Animated.decay — gebaseerd op impuls, zonder vast eindpunt. Het meest geschikt om beweging na het loslaten van een beweging voort te zetten, zoals bij vegen en een zetje geven.
Snelheid uit gebruikersinteractie gebruiken
Veeranimaties hebben ook een parameter velocity die de beginsnelheid van de veer instelt. Daardoor sluiten ze natuurlijk aan op bewegingen uit gebaren. Wanneer je een kaart versleept en loslaat, kun je een veer starten met de snelheid van het gebaar, zodat de beweging vloeiend doorgaat.
Zo ontstaat een naadloze overgang tussen gebaar en animatie: het voelt alsof de kaart door je hand is weggegooid, in plaats van dat deze plotseling naar zijn rustpositie springt.
// After a pan gesture releases:
onPanResponderRelease: (evt, { vx, vy }) => {
Animated.spring(position, {
toValue: { x: 0, y: 0 }, // snap back to center
velocity: { x: vx, y: vy },
tension: 50,
friction: 8,
useNativeDriver: true,
}).start();
}Een veer met Animated.ValueXY
Animated.ValueXY is een handige wrapper die een paar Animated.Values bevat voor de x- en y-coördinaten. Hiermee worden tweedimensionale animaties, zoals het verslepen van kaarten, eenvoudiger. Zowel spring als decay werken met ValueXY, dat ook hulpmethoden bevat zoals getTranslateTransform() om automatisch de transform-array te maken.
ValueXY vermindert herhalende code wanneer je de positie van een element in een tweedimensionale ruimte wilt animeren. Je hoeft dan niet handmatig twee afzonderlijke Animated.Values te beheren.
const position = useRef(new Animated.ValueXY({ x: 0, y: -200 })).current;
useEffect(() => {
Animated.spring(position, {
toValue: { x: 0, y: 0 },
useNativeDriver: true,
}).start();
}, []);
return (
<Animated.View style={position.getTranslateTransform()}>
<Text>Falls into place</Text>
</Animated.View>
);Animated-waarden resetten
Je kunt een Animated.Value terugzetten naar de beginstatus door .setValue(initialValue) aan te roepen. Dit is handig voordat je een animatie opnieuw uitvoert, bijvoorbeeld om een schaal terug te zetten op 0 voordat je nog een pop-in-veer uitvoert, of om de positie terug te zetten voordat je een verschijningsanimatie opnieuw afspeelt.
Reset altijd synchroon voordat je de animatie start om een flits te voorkomen. Roep setValue aan binnen dezelfde gebeurtenisafhandelaar of useEffect en laat dit onmiddellijk volgen door Animated.spring(...).start().
function replay() {
// Reset to start position
scale.setValue(0);
// Then spring to final position
Animated.spring(scale, {
toValue: 1,
tension: 80,
friction: 8,
useNativeDriver: true,
}).start();
}Korte controle
Test je begrip van de concepten uit React Native Mobile Development die in deze les zijn behandeld.
Samenvatting van de les
In deze les heb je geleerd dat Animated.spring natuurkundige, verende bewegingen maakt die je met tension en friction afstemt, dat Animated.decay impulsgebaseerde vertraging vanaf een beginsnelheid simuleert en dat elk animatietype geschikt is voor andere interactiepatronen: spring voor feedback bij tikken en decay voor het loslaten van een gebaar. Hierna leer je hoe je meerdere animaties parallel en na elkaar samenstelt.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Spring- en decay-animaties” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Spring- en decay-animaties”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Spring- en decay-animaties”?
Gebruik Animated.spring voor verende, op fysica gebaseerde bewegingen, stel de parameters voor tension en friction af en pas Animated.decay toe voor scroll-effecten op basis van momentum. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Spring- en decay-animaties”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Animated.Value en Animated.View
- Spring- en decay-animaties
- Meerdere eigenschappen parallel en sequentieel animeren
- useNativeDriver voor animaties met 60 fps