Animated.Value en Animated.View
Maak een Animated.Value, stuur deze aan met Animated.timing en koppel deze aan de style-prop van een Animated.View om de opacity bij het mounten te animeren.
Animated.Value en Animated.View is een gratis React Native Academy-les op CoddyKit. Dit is les 1 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.
Wat is de Animated API?
De Animated API is de ingebouwde bibliotheek van React Native voor het maken van vloeiende animaties die goede prestaties leveren. De bibliotheek houdt speciale geanimeerde waarden bij die door timing- of physics-engines kunnen worden aangestuurd en vervolgens aan stijleigenschappen van componenten worden gekoppeld. In tegenstelling tot CSS-overgangen op het web worden animaties in React Native volledig in JavaScript beschreven, maar kunnen ze voor betere prestaties worden uitgevoerd op native threads.
De Animated API wordt met elke React Native-installatie meegeleverd — je hebt geen extra pakketten nodig. Je importeert de API rechtstreeks uit react-native.
import { Animated, View } from 'react-native';Een Animated.Value maken
De belangrijkste bouwsteen is Animated.Value, die een numerieke waarde bevat die in de loop van de tijd kan veranderen. Je maakt er een met new Animated.Value(initialValue) en bewaart deze in een ref, zodat de waarde tussen renders behouden blijft zonder zelf nieuwe renders te veroorzaken.
useRef gebruiken is het aanbevolen patroon, omdat de geanimeerde waarde veranderlijk is — je wilt gedurende de levensduur van de component hetzelfde object behouden. Initialiseren binnen useState zou bij elke render een nieuwe waarde maken.
import React, { useRef } from 'react';
import { Animated } from 'react-native';
function MyComponent() {
const opacity = useRef(new Animated.Value(0)).current;
// opacity is an Animated.Value starting at 0
}Animated.View: de geanimeerde container
Animated.View is een speciale versie van View waarvan de prop style verwijzingen naar Animated.Value kan accepteren. Wanneer de geanimeerde waarde verandert, wordt de weergave bijgewerkt zonder de normale React-reconciliatiecyclus te doorlopen, waardoor dit zeer efficiënt is.
Er bestaan ook geanimeerde varianten voor andere kerncomponenten: Animated.Text, Animated.Image en Animated.ScrollView. Je kunt ook geanimeerde versies van aangepaste componenten maken met Animated.createAnimatedComponent().
import { Animated, StyleSheet } from 'react-native';
function FadeBox({ opacity }) {
return (
<Animated.View style={[styles.box, { opacity }]}>
</Animated.View>
);
}Een animatie aansturen met Animated.timing
Animated.timing verandert een Animated.Value vloeiend van de huidige waarde naar een doelwaarde gedurende een opgegeven tijdsduur. De functie accepteert een configuratieobject met toValue, duration en een optionele functie easing.
Door .start() aan te roepen, start je de animatie. Je kunt een callback doorgeven aan .start(callback) die wordt uitgevoerd wanneer de animatie is voltooid. Dit is handig om effecten aan elkaar te koppelen of de status bij te werken nadat een animatie is afgelopen.
import { Animated, Easing } from 'react-native';
Animated.timing(opacity, {
toValue: 1,
duration: 800,
easing: Easing.ease,
useNativeDriver: true,
}).start(() => {
console.log('Fade in complete!');
});Voorbeeld: infaden bij het mounten
Een klassieke toepassing is een component laten infaden wanneer deze voor het eerst wordt gemount. Je initialiseert de waarde voor de doorzichtigheid op 0 en voert binnen useEffect een timinganimatie naar 1 uit met een lege afhankelijkhedenarray, zodat deze één keer wordt uitgevoerd nadat de component is gerenderd.
De component wordt onmiddellijk gerenderd (onzichtbaar met doorzichtigheid 0) en wordt vervolgens gedurende de animatieduur vloeiend zichtbaar. Deze techniek voorkomt storende flitsen van inhoud wanneer gegevens langzaam worden geladen.
import React, { useRef, useEffect } from 'react';
import { Animated, View, Text } from 'react-native';
export default function FadeIn() {
const opacity = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.timing(opacity, {
toValue: 1,
duration: 600,
useNativeDriver: true,
}).start();
}, []);
return (
<Animated.View style={{ opacity }}>
<Text>Hello World</Text>
</Animated.View>
);
}Uitfaden en voorwaardelijke zichtbaarheid
Geanimeerde doorzichtigheid wordt ook gebruikt om componenten te verbergen. Uitfaden naar doorzichtigheid 0 houdt de component in de lay-out (deze neemt ruimte in) terwijl die onzichtbaar wordt. Als je de component volledig wilt verwijderen nadat het uitfaden is voltooid, werk je een statusvariabele bij in de callback voor het voltooien van de animatie.
Dit patroon wordt vaak gebruikt voor modale vensters, toastberichten en meldingen die eerst moeten uitfaden voordat ze uit de componentstructuur worden verwijderd.
const [visible, setVisible] = React.useState(true);
function fadeOut() {
Animated.timing(opacity, {
toValue: 0,
duration: 400,
useNativeDriver: true,
}).start(() => setVisible(false));
}
return visible ? (
<Animated.View style={{ opacity }}>
<Text>I will fade away</Text>
</Animated.View>
) : null;Positie vertalen met translateX/Y
Naast doorzichtigheid kan Animated.Value ook positietransformaties zoals translateX en translateY aansturen. Transformaties worden toegepast in de stijlenarray transform. Hiermee kun je elementen vanuit elke richting het scherm op laten schuiven.
Het gebruik van transform in plaats van het wijzigen van left of top is essentieel voor de prestaties, omdat transformaties geen lay-outpassage activeren — ze worden samengesteld op de GPU, waardoor animaties met 60 fps mogelijk zijn, zelfs op minder krachtige apparaten.
const translateY = useRef(new Animated.Value(100)).current;
useEffect(() => {
Animated.timing(translateY, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
}, []);
return (
<Animated.View style={{ transform: [{ translateY }] }}>
<Text>Slides up from bottom</Text>
</Animated.View>
);Componenten schalen met de scale-transformatie
De transformatie scale vergroot of verkleint een component rond het middelpunt. Als je een component start op scale: 0 en animeert naar 1, ontstaat een effect waarbij de component tevoorschijn springt; animeren van 1 naar 0 creëert een effect waarbij die weg springt.
Schaalanimaties voelen natuurlijk aan voor bevestigingsacties, zoals een hartknop in een sociale app of een vinkje dat verschijnt na het verzenden van een formulier. Combineer scale met doorzichtigheid voor een nog verzorgder resultaat.
const scale = useRef(new Animated.Value(0)).current;
function popIn() {
Animated.timing(scale, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
}
return (
<Animated.View style={{ transform: [{ scale }] }}>
<Text>Pop in</Text>
</Animated.View>
);Geanimeerde waarden interpoleren
Animated.Value.interpolate() koppelt de onbewerkte numerieke waarde aan een ander uitvoerbereik. Dit is bijzonder handig wanneer je één geanimeerde waarde tegelijkertijd meerdere verschillende stijlwijzigingen wilt laten aansturen.
Je kunt bijvoorbeeld één voortgangswaarde van 0 tot 1 interpoleren naar zowel een kleurtekenreeks (van rood naar groen) als een verschuiving in pixels (van 0 naar 100). De arrays inputRange en outputRange definiëren de koppelingspunten.
const progress = useRef(new Animated.Value(0)).current;
const backgroundColor = progress.interpolate({
inputRange: [0, 1],
outputRange: ['#ff0000', '#00ff00'],
});
const translateX = progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 200],
});
return (
<Animated.View
style={{
backgroundColor,
transform: [{ translateX }],
}}
/>Randradius en kleuren animeren
Je kunt met Animated.Value vrijwel elke numerieke stijleigenschap animeren, waaronder borderRadius, width en height, en zelfs kleuren wanneer je interpolate gebruikt. Door de randradius te wijzigen, kun je een vierkant vloeiend in een cirkel laten veranderen.
Let op: voor kleuranimaties is useNativeDriver: false vereist, omdat kleuren niet worden ondersteund door de native driver. Dit betekent dat kleuranimaties op de JS-thread worden uitgevoerd en iets minder goede prestaties leveren dan transformatieanimaties.
const borderRadius = useRef(new Animated.Value(0)).current;
function morphToCircle() {
Animated.timing(borderRadius, {
toValue: 50,
duration: 400,
useNativeDriver: false, // layout props need JS driver
}).start();
}
return (
<Animated.View
style={{
width: 100,
height: 100,
backgroundColor: 'tomato',
borderRadius,
}}
/>Animaties herhalen met Animated.loop
Animated.loop verpakt een andere animatie en herhaalt deze onbeperkt (of een vastgesteld aantal keer met de optie iterations). Dit is ideaal voor laadanimaties, pulserende indicatoren en doorlopende achtergrondeffecten.
Maak een pulserend effect door de doorzichtigheid binnen een lus van 1 naar 0.3 en weer terug te animeren. Roep altijd .stop() aan op de lusanimatie wanneer de component wordt ge-unmount door deze vanuit de cleanupfunctie van useEffect terug te geven. Zo voorkom je geheugenlekken.
const pulse = useRef(new Animated.Value(1)).current;
useEffect(() => {
const animation = Animated.loop(
Animated.sequence([
Animated.timing(pulse, { toValue: 0.3, duration: 800, useNativeDriver: true }),
Animated.timing(pulse, { toValue: 1, duration: 800, useNativeDriver: true }),
])
);
animation.start();
return () => animation.stop();
}, []);Korte controle
Test je begrip van de concepten uit deze les over mobiele ontwikkeling met React Native.
Samenvatting van de les
In deze les heb je geleerd dat Animated.Value een numerieke waarde bevat die in de loop van de tijd kan veranderen, dat Animated.timing vloeiende overgangen aanstuurt met een instelbare tijdsduur en easing, en dat Animated.View geanimeerde waarden in de prop style accepteert voor animaties van doorzichtigheid en transformaties. Hierna bekijken we animaties op basis van veer- en vervalphysics.
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 “Animated.Value en Animated.View” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Animated.Value en Animated.View”, 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 “Animated.Value en Animated.View”?
Maak een Animated.Value, stuur deze aan met Animated.timing en koppel deze aan de style-prop van een Animated.View om de opacity bij het mounten te animeren. 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 1 van 4.
Hoe lang duurt de les “Animated.Value en Animated.View”?
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