Animated API: ce este, capacitățile bibliotecii și principiul de funcționare

Ce este Animated API în React Native

Animated API este o bibliotecă declarativă de animație încorporată în nucleul React Native, destinată creării de animații fluide și performante în aplicații mobile. Spre deosebire de animațiile CSS în dezvoltarea web, Animated API lucrează direct cu firul UI nativ prin puntea JavaScript sau driverul nativ. Biblioteca este construită în jurul conceptului Animated.Value — un container care stochează o valoare numerică și abonează automat toate componentele dependente la modificări. La schimbarea valorii prin Animated.timing sau Animated.spring, biblioteca calculează stările intermediare fără a re-rendering componentele React, ceea ce este critic pentru menținerea a 60 FPS. Animated API suportă toate proprietățile de stil, inclusiv transform, opacity, width, height, top, left și backgroundColor. Documentația React Native recomandă Animated API pentru toate scenariile de animație care necesită performanță ridicată și comportament previzibil pe ambele platforme.

Cum funcționează Animated API: Value, timing și spring

Baza Animated API este Animated.Value, un container de valoare numerică inițializat prin constructorul new Animated.Value(0). Fiecare Animated.Value stochează un număr inițial și oferă metode de animație: timing, spring și decay. Metoda timing creează o animație liniară sau cu easing cu parametrii duration, delay și easing. Metoda spring implementează o animație fizică cu arc cu parametrii friction, tension și velocity. Metoda decay creează o animație cu inerție și amortizare — utilă pentru swipe-uri și scroll. Toate metodele returnează un obiect Animated.Composite care poate fi pornit prin start() și oprit prin stop(). Animația se execută într-un fir separat: la utilizarea useNativeDriver = true, calculele au loc în firul UI nativ, iar firul JavaScript rămâne liber pentru procesarea evenimentelor și logicii.

Animated.timing: configurarea duratei și easing-ului

Animated.timing este metoda de bază de animație cu durată controlabilă. Acceptă configurația: toValue, duration (implicit 500ms), easing (implicit Easing.linear) și delay. Funcțiile de easing din modulul Easing permit accelerarea neliniară: Easing.bezier, Easing.elastic, Easing.bounce. Pentru animație cu viteză uniformă utilizați Easing.linear, pentru accelerare naturală — Easing.inOut. Important: Animated.timing garantează că animația se va finaliza exact la toValue în timpul specificat, indiferent de încărcarea dispozitivului.

Animated.spring: animație fizică

Animated.spring implementează un model de animație cu arc bazat pe legea lui Hooke. Parametrul friction (frecare) controlează numărul de oscilații: cu cât friction este mai mare, cu atât oprirea este mai rapidă. Parametrul tension (tensiune) determină rigiditatea arcului: tension mare accelerează mișcarea. Parametrul velocity setează viteza inițială pentru animația cu inerție — esențial pentru animațiile care urmează gestul utilizatorului. Animated.spring nu are o durată fixă — animația se termină când viteza și amplitudinea ating valorile prag.

Animated.View, Animated.Text și alte componente

Animated API oferă patru componente animate încorporate: Animated.View, Animated.Text, Animated.ScrollView și Animated.Image. Fiecare dintre ele este un înveliș peste componenta nativă corespunzătoare care suportă transmiterea Animated.Value în proprietățile de stil. Animated.View este cea mai utilizată componentă, acceptând aceleași props ca un View obișnuit, dar cu suport pentru valori animate în style. Animated.Text este util pentru animarea culorii textului sau a spațierii între litere. Animated.ScrollView permite animarea scrollTo și contentOffset. Animated.Image suportă transparența și scara animate la încărcarea imaginilor. Dacă aveți nevoie de animarea unei alte componente, utilizați 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}
  );
};

Sistemul de interpolare: de la numere la culoare și transformări

Interpolarea este un mecanism de conversie a intervalului numeric de intrare al Animated.Value în valori de ieșire de alt tip. Metoda interpolate acceptă configurația cu inputRange (matrice de valori de intrare) și outputRange (matrice de valori de ieșire). Tipuri de outputRange: numere (coordonate, transparență), șiruri (unghiuri de rotație cu 'deg'), culori hex ('#ff0000'), obiecte de transformare. Interpolarea suportă easing și extrapolate — comportamentul în afara intervalului specificat (clamp, extend, identity). De exemplu, la gestul de drag se poate converti poziția degetului de la 0 la 200 în transparență de la 1 la 0, creând un efect de estompare la swipe. Sistemul de interpolare permite crearea de animații complexe în mai mulți pași: valoarea 0-0.5-1.0 se poate transforma în galben-portocaliu-roșu.

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

Compoziția animațiilor: secvențialitate și paralelism

Animated API suportă trei moduri de compoziție a animațiilor: Animated.sequence, Animated.parallel și Animated.stagger. Animated.sequence pornește animațiile una după alta: fiecare următoare începe după finalizarea celei precedente. Animated.parallel pornește toate animațiile simultan cu un callback comun de finalizare. Animated.stagger pornește animațiile cu o întârziere între startul fiecăreia — start întârziat, util pentru crearea efectelor de undă. Compozițiile pot fi imbricate unele în altele: sequence din grupuri parallel sau parallel din sequence. Acest lucru permite crearea de lanțuri complexe: animația de apariție a elementelor cu întârziere, slide-in paralel cu fade-in, apoi sequence din bounce și 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 și performanța animațiilor

useNativeDriver este o opțiune de configurare a animației care transferă întreaga logică de animație din firul JavaScript în firul UI nativ. Fără useNativeDriver, animațiile se execută prin puntea JavaScript: fiecare modificare de valoare este trimisă în firul nativ, ceea ce cauzează întârzieri la încărcarea firului JS cu operații asincrone. Cu useNativeDriver = true, Animated.Value este actualizat direct pe partea nativă, iar firul JavaScript rămâne liber pentru procesarea evenimentelor, cererilor API și reconcilierii React. Limitare: useNativeDriver suportă doar proprietăți non-layout — opacity, transform, backgroundColor (prin PlatformColor). Pentru proprietăți de layout (width, height, top, left) este necesar NativeAnimatedModule sau LayoutAnimation. Conform React Native 0.76, toate proprietățile animate sunt suportate prin driverul nativ, cu excepția celor bazate pe layout. Modul useNativeDriver este recomandat pentru toate animațiile unde este posibil — acest lucru ridică FPS de la 30-40 la 60 stabili.

Animație cu gesturi: PanResponder și Gesture Handler

PanResponder este un sistem încorporat React Native pentru procesarea gesturilor, care se integrează perfect cu Animated API. PanResponder oferă callback-uri onPanResponderMove și onPanResponderRelease, unde se poate actualiza Animated.Value pe baza poziției degetului. Pentru gesturi mai complexe — swipe, pinch, rotation — utilizați biblioteca react-native-gesture-handler, care lucrează sincron cu animațiile și asigură 60 FPS chiar și la gesturi cu mai multe degete. Gesture Handler oferă Animated.event — o metodă care leagă direct gestul de Animated.Value fără procesarea manuală a callback-urilor. Combinația Gesture Handler + Animated API este standardul industriei pentru animații interactive în aplicațiile React Native.

Animated.event: legarea gesturilor la valori

Animated.event este o metodă care leagă evenimentul nativ (de exemplu, gestureEvent) direct de Animated.Value. Spre deosebire de procesarea manuală în callback, Animated.event funcționează sincron în firul nativ și nu necesită puntea JavaScript pentru fiecare cadru. Acest lucru asigură o animație fluidă chiar și la swipe-uri rapide. Animated.event acceptă o matrice de mapări, unde fiecare element leagă un câmp al evenimentului de Animated.Value. Accesul imbricat este suportat: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Exemple de cod cu Animated API

Să examinăm trei exemple practice de utilizare a Animated API în proiecte React Native. Primul exemplu — animația de apariție a unui card cu secvența opacity + translateY. Al doilea exemplu — animația de pulsație a unui buton utilizând spring. Al treilea exemplu — element interactiv de drag cu PanResponder. Toate exemplele utilizează useNativeDriver = true și respectă cele mai bune practici 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 }] }]
    }
  );
};

Animația de pulsație prin spring

Animația spring creează un efect natural de pulsație datorită modelului fizic de arc. Setarea unui friction scăzut (2-4) și a unui tension ridicat (100-150) oferă oscilații moi care se atenuează natural. Utilizați Animated.loop pentru pulsație infinită cu un ciclu sequence: scale → 1.2, scale → 1.0. Pulsația se aplică pentru indicatoare de încărcare, notificări și butoane de accent.