Animated API: wat is het, mogelijkheden van de bibliotheek en werkingsprincipe

Wat is Animated API in React Native

Animated API is een declaratieve animatiebibliotheek ingebouwd in de kern van React Native, ontworpen voor het maken van vloeiende, krachtige animaties in mobiele applicaties. In tegenstelling tot CSS-animaties in webontwikkeling, werkt Animated API rechtstreeks met de native UI-thread via de JavaScript-brug of de native driver. De bibliotheek is gebouwd rond het concept van Animated.Value — een container die een numerieke waarde opslaat en automatisch alle afhankelijke componenten abonneert op wijzigingen. Bij het wijzigen van de waarde via Animated.timing of Animated.spring berekent de bibliotheek tussentoestanden zonder React-componenten opnieuw te renderen, wat cruciaal is voor het handhaven van 60 FPS. Animated API ondersteunt alle stijleigenschappen, waaronder transform, opacity, width, height, top, left en backgroundColor. De React Native-documentatie beveelt Animated API aan voor alle animatiescenario's waar hoge prestaties en voorspelbaar gedrag op beide platforms vereist zijn.

Hoe werkt Animated API: Value, timing en spring

De basis van Animated API is Animated.Value, een container voor numerieke waarden die wordt geïnitialiseerd via de constructor new Animated.Value(0). Elke Animated.Value slaat een beginwaarde op en biedt animatiemethoden: timing, spring en decay. De timing-methode creëert een lineaire of easing-animatie met parameters duration, delay en easing. De spring-methode implementeert een fysieke veeranimatie met parameters friction, tension en velocity. De decay-methode creëert een animatie met traagheid en demping — handig voor swipes en scrollen. Alle methoden retourneren een Animated.Composite-object dat kan worden gestart via start() en gestopt via stop(). De animatie wordt uitgevoerd in een aparte thread: bij gebruik van useNativeDriver = true vinden berekeningen plaats in de native UI-thread, blijft de JavaScript-thread vrij voor het verwerken van gebeurtenissen en logica.

Animated.timing: duur en easing configureren

Animated.timing is de basismethode voor animatie met instelbare duur. Accepteert configuratie: toValue, duration (standaard 500ms), easing (standaard Easing.linear) en delay. Easing-functies uit de Easing-module maken niet-lineaire versnelling mogelijk: Easing.bezier, Easing.elastic, Easing.bounce. Gebruik Easing.linear voor animaties met constante snelheid en Easing.inOut voor natuurlijke versnelling. Belangrijk: Animated.timing garandeert dat de animatie precies in toValue binnen de opgegeven tijd eindigt, ongeacht de belasting van het apparaat.

Animated.spring: fysieke animatie

Animated.spring implementeert een veermodel voor animatie op basis van de wet van Hooke. De parameter friction (wrijving) regelt het aantal oscillaties: hoe hoger friction, hoe sneller het stopt. De parameter tension (spanning) bepaalt de stijfheid van de veer: hoge tension versnelt de beweging. De parameter velocity stelt de beginsnelheid in voor animaties met traagheid — essentieel voor animaties die de gebaar van de gebruiker volgen. Animated.spring heeft geen vaste duur — de animatie eindigt wanneer de snelheid en amplitude drempelwaarden bereiken.

Animated.View, Animated.Text en andere componenten

Animated API biedt vier ingebouwde geanimeerde componenten: Animated.View, Animated.Text, Animated.ScrollView en Animated.Image. Elk is een wrapper rond de corresponderende native component die het doorgeven van Animated.Value in stijleigenschappen ondersteunt. Animated.View is de meest gebruikte component en accepteert dezelfde props als een gewone View, maar met ondersteuning voor geanimeerde waarden in style. Animated.Text is handig voor het animeren van tekstkleur of letterafstand. Animated.ScrollView maakt animatie van scrollTo en contentOffset mogelijk. Animated.Image ondersteunt geanimeerde transparantie en schaal bij het laden van afbeeldingen. Als u een andere component wilt animeren, gebruik dan Animated.createAnimatedComponent(MyComponent).

import React from 'react';
import { Animated, View, Button } from 'react-native';

const FadeInView = () => {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    View
      Animated.View { style: [{ opacity }] }
      Button title="Fade In" onPress={fadeIn}
  );
};

Interpolatiesysteem: van getallen naar kleur en transformaties

Interpolatie is een mechanisme voor het omzetten van het invoernumerieke bereik van Animated.Value naar uitvoerwaarden van een ander type. De methode interpolate accepteert configuratie met inputRange (reeks invoerwaarden) en outputRange (reeks uitvoerwaarden). OutputRange-typen: getallen (coördinaten, transparantie), strings (rotatiehoeken met 'deg'), hex-kleuren ('#ff0000'), transformatie-objecten. Interpolatie ondersteunt easing en extrapolate — gedrag buiten het opgegeven bereik (clamp, extend, identity). Bij een sleepgebaar kunt u bijvoorbeeld de vingerpositie van 0 tot 200 omzetten in transparantie van 1 tot 0, waardoor een vervagingseffect bij swipen ontstaat. Het interpolatiesysteem maakt het mogelijk complexe meerstapsanimaties te maken: waarde 0-0.5-1.0 kan worden omgezet in geel-oranje-rood.

const spinValue = new Animated.Value(0);

Animated.timing(spinValue, {
  toValue: 1,
  duration: 3000,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

Compositie van animaties: volgorde en parallelisme

Animated API ondersteunt drie compositiemodi voor animaties: Animated.sequence, Animated.parallel en Animated.stagger. Animated.sequence start animaties één voor één: elke volgende begint na voltooiing van de vorige. Animated.parallel start alle animaties tegelijkertijd met één gemeenschappelijke voltooiings-callback. Animated.stagger start animaties met een vertraging tussen elke start — uitgestelde start, handig voor het maken van golfeffecten. Composities kunnen in elkaar worden genest: sequence van parallel-groepen of parallel van sequence. Dit maakt complexe ketens mogelijk: animatie van elementen die met vertraging verschijnen, parallelle slide-in met fade-in, daarna sequence van bounce en shake.

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.parallel([
    Animated.timing(scaleAnim, {
      toValue: 1.1,
      duration: 200,
      useNativeDriver: true,
    }),
    Animated.spring(colorAnim, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }),
  ]),
]).start();

useNativeDriver en prestaties van animaties

useNativeDriver is een configuratieoptie voor animaties die de volledige animatielogica van de JavaScript-thread naar de native UI-thread verplaatst. Zonder useNativeDriver worden animaties uitgevoerd via de JavaScript-brug: elke waardewijziging wordt naar de native thread gestuurd, wat vertragingen veroorzaakt bij belasting van de JS-thread met asynchrone bewerkingen. Met useNativeDriver = true wordt Animated.Value direct aan de native kant bijgewerkt en blijft de JavaScript-thread vrij voor het verwerken van gebeurtenissen, API-verzoeken en React-reconciliatie. Beperking: useNativeDriver ondersteunt alleen niet-layout-eigenschappen — opacity, transform, backgroundColor (via PlatformColor). Voor layouteigenschappen (width, height, top, left) is NativeAnimatedModule of LayoutAnimation vereist. Volgens React Native 0.76 worden alle geanimeerde eigenschappen behalve layout-based ondersteund via de native driver. De useNativeDriver-modus wordt aanbevolen voor alle animaties waar mogelijk — dit verhoogt FPS van 30-40 naar stabiele 60.

Animaties met gebaren: PanResponder en Gesture Handler

PanResponder is een ingebouwd React Native-systeem voor gebarenverwerking dat naadloos integreert met Animated API. PanResponder biedt callbacks onPanResponderMove en onPanResponderRelease waar Animated.Value kan worden bijgewerkt op basis van de vingerpositie. Voor complexere gebaren — swipe, pinch, rotation — gebruikt u de bibliotheek react-native-gesture-handler, die synchroon werkt met animaties en 60 FPS garandeert, zelfs bij meervingergebaren. Gesture Handler biedt Animated.event — een methode die het gebaar direct koppelt aan Animated.Value zonder handmatige callback-verwerking. De combinatie Gesture Handler + Animated API is de industrienorm voor interactieve animaties in React Native-applicaties.

Animated.event: gebaren koppelen aan waarden

Animated.event is een methode die een native gebeurtenis (bijv. gestureEvent) direct koppelt aan Animated.Value. In tegenstelling tot handmatige verwerking in een callback, werkt Animated.event synchroon in de native thread en heeft het geen JavaScript-brug nodig voor elk frame. Dit zorgt voor vloeiende animaties, zelfs bij snelle swipes. Animated.event accepteert een reeks mappings, waarbij elk element een gebeurtenisveld koppelt aan Animated.Value. Geneste toegang wordt ondersteund: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Codevoorbeelden met Animated API

Laten we drie praktische voorbeelden bekijken van het gebruik van Animated API in React Native-projecten. Het eerste voorbeeld — een animatie van het verschijnen van een kaart met een reeks opacity + translateY. Het tweede voorbeeld — een pulsatie-animatie van een knop met spring. Het derde voorbeeld — een interactief sleep-element met PanResponder. Alle voorbeelden gebruiken useNativeDriver = true en voldoen aan de beste praktijken van React Native 0.76.

const CardWithAnimation = () => {
  const anim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.spring(anim, {
      toValue: 1,
      friction: 6,
      tension: 40,
      useNativeDriver: true,
    }).start();
  }, []);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  return (
    Animated.View {
      style: [{ opacity: anim, transform: [{ translateY }] }]
    }
  );
};

Pulsatie-animatie via spring

Spring-animatie creëert een natuurlijk pulsatie-effect dankzij het fysieke veermodel. Het instellen van lage friction (2-4) en hoge tension (100-150) geeft zachte oscillaties die op natuurlijke wijze uitdoven. Gebruik Animated.loop voor oneindige pulsatie met een sequence-cyclus: scale → 1.2, scale → 1.0. Pulsatie wordt toegepast voor laadindicatoren, meldingen en accentknoppen.