Animated API: definizione, funzionalità della libreria e principio di funzionamento

Cos’è Animated API in React Native

Animated API è una libreria di animazione dichiarativa integrata nel nucleo di React Native, progettata per creare animazioni fluide e ad alte prestazioni nelle applicazioni mobili. A differenza delle animazioni CSS nello sviluppo web, Animated API lavora direttamente con il thread UI nativo attraverso il ponte JavaScript o il driver nativo. La libreria è costruita attorno al concetto di Animated.Value — un contenitore che memorizza un valore numerico e sottoscrive automaticamente tutti i componenti dipendenti ai cambiamenti. Quando il valore cambia tramite Animated.timing o Animated.spring, la libreria calcola gli stati intermedi senza rirendere i componenti React, il che è fondamentale per mantenere 60 FPS. Animated API supporta tutte le proprietà di stilo, inclusi transform, opacity, width, height, top, left e backgroundColor. La documentazione di React Native raccomanda Animated API per tutti gli scenari di animazione che richiedono alte prestazioni e comportamento prevedibile su entrambe le piattaforme.

Come funziona Animated API: Value, timing e spring

Il fondamento di Animated API è Animated.Value, un contenitore di valori numerici inizializzato tramite il costruttore new Animated.Value(0). Ogni Animated.Value memorizza un numero iniziale e fornisce metodi di animazione: timing, spring e decay. Il metodo timing crea un’animazione lineare o con easing con parametri di durata, ritardo ed easing. Il metodo spring implementa un’animazione fisica a molla con parametri di attrito, tensione e velocità. Il metodo decay crea un’animazione con inerzia e smorzamento — utile per swipe e scorrimento. Tutti i metodi restituiscono un oggetto Animated.Composite che può essere avviato tramite start() e fermato tramite stop(). L’animazione viene eseguita in un thread separato: quando useNativeDriver = true, i calcoli avvengono nel thread UI nativo, lasciando il thread JavaScript libero per la gestione degli eventi e la logica.

Animated.timing: configurazione di durata ed easing

Animated.timing è il metodo di animazione base con durata controllata. Accetta configurazione: toValue, duration (predefinito 500ms), easing (Easing.linear per impostazione predefinita) e delay. Le funzioni di easing del modulo Easing consentono un’accelerazione non lineare: Easing.bezier, Easing.elastic, Easing.bounce. Per un’animazione a velocità uniforme usa Easing.linear, per un’accelerazione naturale usa Easing.inOut. Importante: Animated.timing garantisce che l’animazione termini esattamente a toValue entro il tempo specificato, indipendentemente dal carico del dispositivo.

Animated.spring: animazione basata sulla fisica

Animated.spring implementa un modello di animazione a molla basato sulla legge di Hooke. Il parametro friction (attrito) controlla il numero di oscillazioni: maggiore è l’attrito, più veloce è l’arresto. Il parametro tension (tensione) determina la rigidità della molla: una tensione elevata accelera il movimento. Il parametro velocity (velocità) imposta la velocità iniziale per un’animazione con inerzia — fondamentale per le animazioni che seguono i gesti dell’utente. Animated.spring non ha una durata fissa — l’animazione si completa quando velocità e ampiezza raggiungono i valori soglia.

Animated.View, Animated.Text e altri componenti

Animated API fornisce quattro componenti animati integrati: Animated.View, Animated.Text, Animated.ScrollView e Animated.Image. Ciascuno è un wrapper sul componente nativo corrispondente che supporta il passaggio di Animated.Value alle proprietà di stilo. Animated.View è il componente più utilizzato, accetta gli stessi props di una View normale, ma con il supporto per valori animati in style. Animated.Text è utile per animare il colore del testo o la spaziatura tra le lettere. Animated.ScrollView consente di animare scrollTo e contentOffset. Animated.Image supporta opacità e scala animate durante il caricamento delle immagini. Se è necessario animare un altro componente, usa 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}
  );
};

Sistema di interpolazione: dai numeri al colore e alle trasformazioni

L’interpolazione è un meccanismo per convertire un intervallo numerico di input di Animated.Value in valori di output di un altro tipo. Il metodo interpolate accetta una configurazione con inputRange (array di valori di input) e outputRange (array di valori di output). Tipi di outputRange: numeri (coordinate, opacità), stringhe (angoli di rotazione con 'deg'), colori hex ('#ff0000'), oggetti di trasformazione. L’interpolazione supporta easing ed extrapolate — comportamento al di fuori dell’intervallo specificato (clamp, extend, identity). Ad esempio, durante un gesto di trascinamento, puoi convertire la posizione del dito da 0 a 200 in opacità da 1 a 0, creando un effetto dissolvenza durante lo swipe. Il sistema di interpolazione consente di creare animazioni complesse a più fasi: il valore 0-0.5-1.0 può convertirsi in giallo-arancione-rosso.

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

Composizione di animazioni: sequenza e parallelismo

Animated API supporta tre modalità di composizione delle animazioni: Animated.sequence, Animated.parallel e Animated.stagger. Animated.sequence esegue le animazioni una dopo l’altra: ciascuna successiva inizia dopo il completamento della precedente. Animated.parallel esegue tutte le animazioni simultaneamente con un unico callback di completamento condiviso. Animated.stagger esegue le animazioni con un ritardo tra ciascun avvio — utile per creare effetti ondulatori. Le composizioni possono essere annidate: sequenza di gruppi paralleli o parallelo di sequenze. Ciò consente di creare catene complesse: animazione di comparsa degli elementi con ritardo, slide-in parallelo con fade-in, poi una sequenza di bounce e 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 e prestazioni delle animazioni

useNativeDriver è un’opzione di configurazione dell’animazione che sposta l’intera logica di animazione dal thread JavaScript al thread UI nativo. Senza useNativeDriver, le animazioni vengono eseguite attraverso il ponte JavaScript: ogni modifica del valore viene inviata al thread nativo, causando ritardi quando il thread JS è occupato con operazioni asincrone. Con useNativeDriver = true, Animated.Value si aggiorna direttamente sul lato nativo, lasciando il thread JavaScript libero per la gestione degli eventi, le richieste API e la riconciliazione React. Limitazione: useNativeDriver supporta solo proprietà non di layout — opacity, transform, backgroundColor (tramite PlatformColor). Per le proprietà di layout (width, height, top, left), è richiesto NativeAnimatedModule o LayoutAnimation. Secondo React Native 0.76, tutte le proprietà animate sono supportate tramite il driver nativo, tranne quelle basate sul layout. La modalità useNativeDriver è raccomandata per tutte le animazioni dove possibile — aumenta i FPS da 30-40 a 60 stabili.

Animazione gestuale: PanResponder e Gesture Handler

PanResponder è un sistema integrato di React Native per la gestione dei gesti che si integra bene con Animated API. PanResponder fornisce i callback onPanResponderMove e onPanResponderRelease dove Animated.Value può essere aggiornato in base alla posizione del dito. Per gesti più complessi — swipe, pinch, rotazione — usa la libreria react-native-gesture-handler, che funziona in modo sincrono con le animazioni e fornisce 60 FPS anche con gesti a più dita. Gesture Handler fornisce Animated.event — un metodo che lega direttamente un gesto ad Animated.Value senza gestione manuale dei callback. La combinazione Gesture Handler + Animated API è lo standard del settore per le animazioni interattive nelle applicazioni React Native.

Animated.event: legare i gesti ai valori

Animated.event è un metodo che lega un evento nativo (ad esempio, gestureEvent) direttamente ad Animated.Value. A differenza della gestione manuale nei callback, Animated.event funziona in modo sincrono nel thread nativo e non richiede il ponte JavaScript per ogni frame. Ciò fornisce un’animazione fluida anche durante gli swipe rapidi. Animated.event accetta un array di mapping, dove ogni elemento lega un campo evento ad Animated.Value. L’accesso annidato è supportato: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Esempi di codice con Animated API

Vediamo tre esempi pratici di utilizzo di Animated API in progetti React Native. Il primo esempio è un’animazione di comparsa di una scheda con sequenza opacity + translateY. Il secondo esempio è un’animazione di pulsazione di un pulsante usando spring. Il terzo esempio è un elemento di trascinamento interattivo con PanResponder. Tutti gli esempi utilizzano useNativeDriver = true e seguono le migliori pratiche di 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 }] }]
    }
  );
};

Animazione di pulsazione tramite spring

L’animazione Spring crea un effetto di pulsazione naturale utilizzando un modello fisico a molla. Impostazioni di basso attrito (2-4) e alta tensione (100-150) producono oscillazioni morbide che si attenuano naturalmente. Usa Animated.loop per una pulsazione infinita con un ciclo di sequenza: scale → 1.2, scale → 1.0. La pulsazione viene utilizzata per indicatori di caricamento, notifiche e pulsanti di accento.