Animated API: co to jest, możliwości biblioteki i zasada działania

Czym jest Animated API w React Native

Animated API — to deklaratywna biblioteka animacji wbudowana w rdzeń React Native, przeznaczona do tworzenia płynnych, wydajnych animacji w aplikacjach mobilnych. W przeciwieństwie do animacji CSS w tworzeniu stron internetowych, Animated API działa bezpośrednio z natywnym wątkiem UI przez most JavaScript lub natywny sterownik. Biblioteka zbudowana jest wokół koncepcji Animated.Value — kontenera przechowującego wartość liczbową i automatycznie subskrybującego wszystkie zależne komponenty na zmiany. Podczas zmiany wartości przez Animated.timing lub Animated.spring, biblioteka oblicza stany pośrednie bez ponownego renderowania komponentów React, co jest kluczowe dla utrzymania 60 FPS. Animated API obsługuje wszystkie właściwości stylów, w tym transform, opacity, width, height, top, left i backgroundColor. Dokumentacja React Native zaleca Animated API dla wszystkich scenariuszy animacji wymagających wysokiej wydajności i przewidywalnego zachowania na obu platformach.

Jak działa Animated API: Value, timing i spring

Podstawą Animated API jest Animated.Value, kontener wartości liczbowej inicjalizowany przez konstruktor new Animated.Value(0). Każdy Animated.Value przechowuje początkową liczbę i udostępnia metody animacji: timing, spring i decay. Metoda timing tworzy liniową lub easing-ową animację z parametrami duration, delay i easing. Metoda spring implementuje fizyczną sprężynową animację z parametrami friction, tension i velocity. Metoda decay tworzy animację z bezwładnością i wygaszaniem — przydatne dla przesunięć i przewijania. Wszystkie metody zwracają obiekt Animated.Composite, który można uruchomić przez start() i zatrzymać przez stop(). Animacja wykonywana jest w oddzielnym wątku: przy użyciu useNativeDriver = true, obliczenia odbywają się w natywnym wątku UI, a wątek JavaScript pozostaje wolny do obsługi zdarzeń i logiki.

Animated.timing: konfiguracja czasu trwania i easingu

Animated.timing — to podstawowa metoda animacji z kontrolowanym czasem trwania. Przyjmuje konfigurację: toValue, duration (domyślnie 500ms), easing (domyślnie Easing.linear) i delay. Funkcje easing z modułu Easing pozwalają na nieliniowe przyspieszenie: Easing.bezier, Easing.elastic, Easing.bounce. Do animacji z równomierną prędkością używaj Easing.linear, do naturalnego przyspieszenia — Easing.inOut. Ważne: Animated.timing gwarantuje, że animacja zakończy się dokładnie w toValue w określonym czasie, niezależnie od obciążenia urządzenia.

Animated.spring: animacja fizyczna

Animated.spring implementuje sprężynowy model animacji oparty na prawie Hooke'a. Parametr friction (tarcie) kontroluje liczbę oscylacji: im wyższe friction, tym szybsze zatrzymanie. Parametr tension (naprężenie) określa sztywność sprężyny: wysokie tension przyspiesza ruch. Parametr velocity ustawia prędkość początkową dla animacji z bezwładnością — kluczowe dla animacji podążających za gestem użytkownika. Animated.spring nie ma stałego czasu trwania — animacja kończy się, gdy prędkość i amplituda osiągną wartości progowe.

Animated.View, Animated.Text i inne komponenty

Animated API udostępnia cztery wbudowane animowane komponenty: Animated.View, Animated.Text, Animated.ScrollView i Animated.Image. Każdy z nich jest otoczką nad odpowiednim komponentem natywnym obsługującą przekazywanie Animated.Value we właściwościach stylów. Animated.View to najczęściej używany komponent, przyjmujący te same props co zwykły View, ale z obsługą animowanych wartości w style. Animated.Text jest przydatny do animacji koloru tekstu lub odstępów między znakami. Animated.ScrollView umożliwia animację scrollTo i contentOffset. Animated.Image obsługuje animowaną przezroczystość i skalę podczas ładowania obrazów. Jeśli potrzebujesz animacji innego komponentu, użyj 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}
  );
};

System interpolacji: od liczb do koloru i transformacji

Interpolacja — to mechanizm przekształcania wejściowego zakresu liczbowego Animated.Value w wartości wyjściowe innego typu. Metoda interpolate przyjmuje konfigurację z inputRange (tablica wartości wejściowych) i outputRange (tablica wartości wyjściowych). Typy outputRange: liczby (współrzędne, przezroczystość), ciągi znaków (kąty obrotu z 'deg'), kolory hex ('#ff0000'), obiekty transformacji. Interpolacja obsługuje easing i extrapolate — zachowanie poza określonym zakresem (clamp, extend, identity). Na przykład, przy gestach przeciągania można przekształcić pozycję palca od 0 do 200 w przezroczystość od 1 do 0, tworząc efekt zanikania podczas przesunięcia. System interpolacji umożliwia tworzenie złożonych wieloetapowych animacji: wartość 0-0.5-1.0 może przekształcać się w żółty-pomarańczowy-czerwony.

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

Kompozycja animacji: sekwencyjność i równoległość

Animated API obsługuje trzy tryby kompozycji animacji: Animated.sequence, Animated.parallel i Animated.stagger. Animated.sequence uruchamia animacje jedna po drugiej: każda następna zaczyna się po zakończeniu poprzedniej. Animated.parallel uruchamia wszystkie animacje jednocześnie z jednym wspólnym callbackiem zakończenia. Animated.stagger uruchamia animacje z opóźnieniem między startem każdej — opóźniony start, przydatny do tworzenia efektów falowych. Kompozycje można zagnieżdżać w sobie: sequence z grup parallel lub parallel z sequence. Pozwala to tworzyć złożone łańcuchy: animacja pojawiania się elementów z opóźnieniem, równoległy slide-in z fade-in, następnie sequence 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 wydajność animacji

useNativeDriver — to opcja konfiguracji animacji, która przenosi całą logikę animacji z wątku JavaScript do natywnego wątku UI. Bez useNativeDriver animacje są wykonywane przez most JavaScript: każda zmiana wartości jest wysyłana do natywnego wątku, co powoduje opóźnienia przy obciążeniu wątku JS operacjami asynchronicznymi. Z useNativeDriver = true, Animated.Value jest aktualizowane bezpośrednio po stronie natywnej, a wątek JavaScript pozostaje wolny do obsługi zdarzeń, zapytań API i rekoncyliacji React. Ograniczenie: useNativeDriver obsługuje tylko właściwości nie-layoutowe — opacity, transform, backgroundColor (przez PlatformColor). Dla właściwości layoutowych (width, height, top, left) wymagany jest NativeAnimatedModule lub LayoutAnimation. Według React Native 0.76, wszystkie animowane właściwości są obsługiwane przez natywny sterownik, z wyjątkiem layoutowych. Tryb useNativeDriver jest zalecany dla wszystkich animacji, gdzie to możliwe — podnosi FPS z 30-40 do stabilnych 60.

Animacja z gestami: PanResponder i Gesture Handler

PanResponder — wbudowany system React Native do obsługi gestów, który doskonale integruje się z Animated API. PanResponder udostępnia callbacki onPanResponderMove i onPanResponderRelease, gdzie można aktualizować Animated.Value na podstawie pozycji palca. Do bardziej złożonych gestów — swipe, pinch, rotation — używaj biblioteki react-native-gesture-handler, która działa synchronicznie z animacjami i zapewnia 60 FPS nawet przy gestach wielopalcowych. Gesture Handler udostępnia Animated.event — metodę, która bezpośrednio łączy gest z Animated.Value bez ręcznej obsługi callbacków. Kombinacja Gesture Handler + Animated API to standard branżowy dla interaktywnych animacji w aplikacjach React Native.

Animated.event: wiązanie gestów z wartościami

Animated.event — to metoda, która łączy natywne zdarzenie (np. gestureEvent) bezpośrednio z Animated.Value. W przeciwieństwie do ręcznej obsługi w callbacku, Animated.event działa synchronicznie w natywnym wątku i nie wymaga mostu JavaScript dla każdej klatki. Zapewnia to płynną animację nawet przy szybkich przesunięciach. Animated.event przyjmuje tablicę mapowań, gdzie każdy element łączy pole zdarzenia z Animated.Value. Obsługiwany jest dostęp zagnieżdżony: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Przykłady kodu z Animated API

Rozważmy trzy praktyczne przykłady użycia Animated API w projektach React Native. Pierwszy przykład — animacja pojawiania się karty z sekwencją opacity + translateY. Drugi przykład — animacja pulsowania przycisku z użyciem spring. Trzeci przykład — interaktywny element przeciągany z PanResponder. Wszystkie przykłady używają useNativeDriver = true i są zgodne z najlepszymi praktykami 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 }] }]
    }
  );
};

Animacja pulsowania przez spring

Spring-animacja tworzy naturalny efekt pulsowania dzięki fizycznemu modelowi sprężyny. Ustawienie niskiego friction (2-4) i wysokiego tension (100-150) daje miękkie oscylacje, które wygasają naturalnie. Użyj Animated.loop do nieskończonego pulsowania z cyklem sequence: scale → 1.2, scale → 1.0. Pulsacja stosowana jest dla wskaźników ładowania, powiadomień i przycisków akcentujących.