Animated API : définition, fonctionnalités de la bibliothèque et principe de fonctionnement

Qu’est-ce qu’Animated API dans React Native

Animated API est une bibliothèque d’animation déclarative intégrée au cœur de React Native, conçue pour créer des animations fluides et performantes dans les applications mobiles. Contrairement aux animations CSS dans le développement web, Animated API travaille directement avec le thread d’UI natif via le pont JavaScript ou le pilote natif. La bibliothèque est construite autour du concept d’Animated.Value — un conteneur qui stocke une valeur numérique et abonne automatiquement tous les composants dépendants aux changements. Lorsque la valeur change via Animated.timing ou Animated.spring, la bibliothèque calcule les états intermédiaires sans réafficher les composants React, ce qui est essentiel pour maintenir 60 FPS. Animated API prend en charge toutes les propriétés de style, y compris transform, opacity, width, height, top, left et backgroundColor. La documentation React Native recommande Animated API pour tous les scénarios d’animation nécessitant des performances élevées et un comportement prévisible sur les deux plateformes.

Comment fonctionne Animated API : Value, timing et spring

Le fondement d’Animated API est Animated.Value, un conteneur de valeur numérique initialisé via le constructeur new Animated.Value(0). Chaque Animated.Value stocke un nombre initial et fournit des méthodes d’animation : timing, spring et decay. La méthode timing crée une animation linéaire ou avec easing avec des paramètres de durée, de délai et d’easing. La méthode spring implémente une animation physique à ressort avec des paramètres de friction, tension et vélocité. La méthode decay crée une animation avec inertie et amortissement — utile pour les balayages et le défilement. Toutes les méthodes retournent un objet Animated.Composite qui peut être démarré via start() et arrêté via stop(). L’animation s’exécute dans un thread séparé : lorsque useNativeDriver = true, les calculs ont lieu dans le thread d’UI natif, laissant le thread JavaScript libre pour la gestion des événements et la logique.

Animated.timing : configuration de la durée et de l’easing

Animated.timing est la méthode d’animation de base avec une durée contrôlée. Elle accepte la configuration : toValue, duration (par défaut 500ms), easing (Easing.linear par défaut) et delay. Les fonctions d’easing du module Easing permettent une accélération non linéaire : Easing.bezier, Easing.elastic, Easing.bounce. Pour une animation à vitesse uniforme, utilisez Easing.linear ; pour une accélération naturelle, utilisez Easing.inOut. Important : Animated.timing garantit que l’animation se terminera exactement à toValue dans le temps spécifié, indépendamment de la charge de l’appareil.

Animated.spring : animation basée sur la physique

Animated.spring implémente un modèle d’animation à ressort basé sur la loi de Hooke. Le paramètre friction (frottement) contrôle le nombre d’oscillations : plus le frottement est élevé, plus l’arrêt est rapide. Le paramètre tension (tension) détermine la rigidité du ressort : une tension élevée accélère le mouvement. Le paramètre velocity (vélocité) définit la vitesse initiale pour une animation avec inertie — essentiel pour les animations suivant les gestes de l’utilisateur. Animated.spring n’a pas de durée fixe — l’animation se termine lorsque la vitesse et l’amplitude atteignent des valeurs seuils.

Animated.View, Animated.Text et autres composants

Animated API fournit quatre composants animés intégrés : Animated.View, Animated.Text, Animated.ScrollView et Animated.Image. Chacun est un wrapper autour du composant natif correspondant qui prend en charge le passage d’Animated.Value aux propriétés de style. Animated.View est le composant le plus utilisé, acceptant les mêmes props qu’une View normale, mais avec la prise en charge des valeurs animées dans style. Animated.Text est utile pour animer la couleur du texte ou l’espacement entre les lettres. Animated.ScrollView permet d’animer scrollTo et contentOffset. Animated.Image prend en charge l’opacité et l’échelle animées pendant le chargement des images. Si vous devez animer un autre composant, utilisez 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}
  );
};

Système d’interpolation : des nombres aux couleurs et transformations

L’interpolation est un mécanisme pour convertir une plage numérique d’entrée d’Animated.Value en valeurs de sortie d’un autre type. La méthode interpolate accepte une configuration avec inputRange (tableau de valeurs d’entrée) et outputRange (tableau de valeurs de sortie). Types d’outputRange : nombres (coordonnées, opacité), chaînes (angles de rotation avec 'deg'), couleurs hex ('#ff0000'), objets de transformation. L’interpolation prend en charge l’easing et l’extrapolation — comportement en dehors de la plage spécifiée (clamp, extend, identity). Par exemple, lors d’un geste de glissement, vous pouvez convertir la position du doigt de 0 à 200 en opacité de 1 à 0, créant un effet de fondu au balayage. Le système d’interpolation permet de créer des animations complexes à plusieurs étapes : la valeur 0-0.5-1.0 peut se convertir en jaune-orange-rouge.

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'],
});

Composition d’animations : séquence et parallélisme

Animated API prend en charge trois modes de composition d’animations : Animated.sequence, Animated.parallel et Animated.stagger. Animated.sequence exécute les animations les unes après les autres : chaque suivante commence après la fin de la précédente. Animated.parallel exécute toutes les animations simultanément avec un seul callback d’achèvement partagé. Animated.stagger exécute les animations avec un délai entre chaque démarrage — utile pour créer des effets de vague. Les compositions peuvent être imbriquées : séquence de groupes parallèles ou parallèle de séquences. Cela permet de créer des chaînes complexes : animation d’apparition d’éléments avec délai, slide-in parallèle avec fade-in, puis une séquence de bounce et 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 et performance des animations

useNativeDriver est une option de configuration d’animation qui déplace toute la logique d’animation du thread JavaScript vers le thread d’UI natif. Sans useNativeDriver, les animations s’exécutent via le pont JavaScript : chaque changement de valeur est envoyé au thread natif, provoquant des retards lorsque le thread JS est occupé par des opérations asynchrones. Avec useNativeDriver = true, Animated.Value se met à jour directement côté natif, laissant le thread JavaScript libre pour la gestion des événements, les requêtes API et la réconciliation React. Limitation : useNativeDriver ne prend en charge que les propriétés non liées à la mise en page — opacity, transform, backgroundColor (via PlatformColor). Pour les propriétés de mise en page (width, height, top, left), NativeAnimatedModule ou LayoutAnimation est requis. Selon React Native 0.76, toutes les propriétés animées sont prises en charge via le pilote natif, à l’exception de celles basées sur la mise en page. Le mode useNativeDriver est recommandé pour toutes les animations lorsque c’est possible — il augmente les FPS de 30-40 à 60 stables.

Animation gestuelle : PanResponder et Gesture Handler

PanResponder est un système intégré de React Native pour la gestion des gestes qui s’intègre bien avec Animated API. PanResponder fournit des callbacks onPanResponderMove et onPanResponderRelease où Animated.Value peut être mis à jour en fonction de la position du doigt. Pour des gestes plus complexes — balayage, pincement, rotation — utilisez la bibliothèque react-native-gesture-handler, qui fonctionne de manière synchrone avec les animations et fournit 60 FPS même avec des gestes multi-doigts. Gesture Handler fournit Animated.event — une méthode qui lie directement un geste à Animated.Value sans gestion manuelle des callbacks. La combinaison Gesture Handler + Animated API est la norme de l’industrie pour les animations interactives dans les applications React Native.

Animated.event : liaison des gestes aux valeurs

Animated.event est une méthode qui lie un événement natif (par exemple, gestureEvent) directement à Animated.Value. Contrairement à la gestion manuelle dans les callbacks, Animated.event fonctionne de manière synchrone dans le thread natif et ne nécessite pas le pont JavaScript pour chaque image. Cela permet une animation fluide même lors de balayages rapides. Animated.event accepte un tableau de mappages, où chaque élément lie un champ d’événement à Animated.Value. L’accès imbriqué est pris en charge : Animated.event([{ nativeEvent: { translationX: xValue } }]).

Exemples de code avec Animated API

Examinons trois exemples pratiques d’utilisation de Animated API dans des projets React Native. Le premier exemple est une animation d’apparition de carte avec une séquence opacity + translateY. Le deuxième exemple est une animation de pulsation de bouton utilisant spring. Le troisième exemple est un élément de glissement interactif avec PanResponder. Tous les exemples utilisent useNativeDriver = true et suivent les meilleures pratiques de 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 }] }]
    }
  );
};

Animation de pulsation via spring

L’animation Spring crée un effet de pulsation naturel grâce à un modèle physique de ressort. Des réglages de faible friction (2-4) et de tension élevée (100-150) produisent des oscillations douces qui s’atténuent naturellement. Utilisez Animated.loop pour une pulsation infinie avec un cycle de séquence : scale → 1.2, scale → 1.0. La pulsation est utilisée pour les indicateurs de chargement, les notifications et les boutons d’accentuation.