Animated API: co to je, možnosti knihovny a princip fungování

Co je Animated API v React Native

Animated API je deklarativní knihovna animací vestavěná do jádra React Native, určená pro vytváření plynulých a výkonných animací v mobilních aplikacích. Na rozdíl od CSS animací ve vývoji webu pracuje Animated API přímo s nativním UI vláknem prostřednictvím JavaScript mostu nebo nativního ovladače. Knihovna je postavena kolem konceptu Animated.Value — kontejneru, který uchovává číselnou hodnotu a automaticky přihlašuje všechny závislé komponenty ke změnám. Při změně hodnoty pomocí Animated.timing nebo Animated.spring knihovna vypočítává mezistavy bez překreslování React komponent, což je kritické pro udržení 60 FPS. Animated API podporuje všechny stylové vlastnosti, včetně transform, opacity, width, height, top, left a backgroundColor. Dokumentace React Native doporučuje Animated API pro všechny scénáře animací vyžadujících vysoký výkon a předvídatelné chování na obou platformách.

Jak funguje Animated API: Value, timing a spring

Základem Animated API je Animated.Value, kontejner číselné hodnoty inicializovaný konstruktorem new Animated.Value(0). Každý Animated.Value uchovává počáteční číslo a poskytuje metody animace: timing, spring a decay. Metoda timing vytváří lineární nebo easing animaci s parametry duration, delay a easing. Metoda spring implementuje fyzikální pružinovou animaci s parametry friction, tension a velocity. Metoda decay vytváří animaci se setrvačností a tlumením — užitečné pro swipe a scroll. Všechny metody vracejí objekt Animated.Composite, který lze spustit pomocí start() a zastavit pomocí stop(). Animace se provádí v samostatném vlákně: při použití useNativeDriver = true probíhají výpočty v nativním UI vlákně, JavaScript vlákno zůstává volné pro zpracování událostí a logiky.

Animated.timing: nastavení doby trvání a easingu

Animated.timing je základní metoda animace s řízenou dobou trvání. Přijímá konfiguraci: toValue, duration (výchozí 500ms), easing (výchozí Easing.linear) a delay. Funkce easing z modulu Easing umožňují nelineární zrychlení: Easing.bezier, Easing.elastic, Easing.bounce. Pro animaci s rovnoměrnou rychlostí použijte Easing.linear, pro přirozené zrychlení — Easing.inOut. Důležité: Animated.timing zaručuje, že animace skončí přesně v toValue v daném čase, bez ohledu na zatížení zařízení.

Animated.spring: fyzikální animace

Animated.spring implementuje pružinový model animace založený na Hookově zákoně. Parametr friction (tření) řídí počet oscilací: čím vyšší friction, tím rychlejší zastavení. Parametr tension (napětí) určuje tuhost pružiny: vysoké tension zrychluje pohyb. Parametr velocity nastavuje počáteční rychlost pro animaci se setrvačností — klíčové pro animace následující gesto uživatele. Animated.spring nemá pevnou dobu trvání — animace končí, když rychlost a amplituda dosáhnou prahových hodnot.

Animated.View, Animated.Text a další komponenty

Animated API poskytuje čtyři vestavěné animované komponenty: Animated.View, Animated.Text, Animated.ScrollView a Animated.Image. Každá z nich je obálkou nad odpovídající nativní komponentou podporující předávání Animated.Value ve stylových vlastnostech. Animated.View je nejpoužívanější komponenta, přijímá stejné props jako běžný View, ale s podporou animovaných hodnot v style. Animated.Text je užitečný pro animaci barvy textu nebo mezer mezi písmeny. Animated.ScrollView umožňuje animaci scrollTo a contentOffset. Animated.Image podporuje animovanou průhlednost a měřítko při načítání obrázků. Pokud potřebujete animovat jinou komponentu, použijte 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ém interpolace: od čísel k barvě a transformacím

Interpolace je mechanismus převodu vstupního číselného rozsahu Animated.Value na výstupní hodnoty jiného typu. Metoda interpolate přijímá konfiguraci s inputRange (pole vstupních hodnot) a outputRange (pole výstupních hodnot). Typy outputRange: čísla (souřadnice, průhlednost), řetězce (úhly rotace s 'deg'), hex barvy ('#ff0000'), transformační objekty. Interpolace podporuje easing a extrapolate — chování mimo zadaný rozsah (clamp, extend, identity). Například při gestu tažení lze pozici prstu od 0 do 200 převést na průhlednost od 1 do 0 a vytvořit tak efekt mizení při swipu. Systém interpolace umožňuje vytvářet složité vícestupňové animace: hodnota 0-0.5-1.0 se může převádět na žlutou-oranžovou-červenou.

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

Kompozice animací: sekvenčnost a paralelnost

Animated API podporuje tři režimy kompozice animací: Animated.sequence, Animated.parallel a Animated.stagger. Animated.sequence spouští animace jednu po druhé: každá další začíná po dokončení předchozí. Animated.parallel spouští všechny animace současně s jedním společným callbackem dokončení. Animated.stagger spouští animace se zpožděním mezi startem každé — zpožděný start, užitečný pro vytváření vlnových efektů. Kompozice lze do sebe vnořovat: sequence z parallel skupin nebo parallel z sequence. To umožňuje vytvářet složité řetězce: animace zobrazení prvků se zpožděním, paralelní slide-in s fade-in, poté sequence z bounce a 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 a výkon animací

useNativeDriver je volba konfigurace animace, která přesouvá veškerou logiku animace z JavaScript vlákna do nativního UI vlákna. Bez useNativeDriver se animace provádějí přes JavaScript most: každá změna hodnoty je odeslána do nativního vlákna, což způsobuje zpoždění při zatížení JS vlákna asynchronními operacemi. S useNativeDriver = true je Animated.Value aktualizován přímo na nativní straně a JavaScript vlákno zůstává volné pro zpracování událostí, API požadavků a React reconciliaci. Omezení: useNativeDriver podporuje pouze nelayoutové vlastnosti — opacity, transform, backgroundColor (přes PlatformColor). Pro layoutové vlastnosti (width, height, top, left) je vyžadován NativeAnimatedModule nebo LayoutAnimation. Podle React Native 0.76 jsou všechny animované vlastnosti kromě layout-based podporovány nativním ovladačem. Režim useNativeDriver se doporučuje pro všechny animace, kde je to možné — zvyšuje FPS z 30-40 na stabilních 60.

Animace s gesty: PanResponder a Gesture Handler

PanResponder je vestavěný systém React Native pro zpracování gest, který se skvěle integruje s Animated API. PanResponder poskytuje callbacky onPanResponderMove a onPanResponderRelease, kde lze aktualizovat Animated.Value na základě polohy prstu. Pro složitější gesta — swipe, pinch, rotation — použijte knihovnu react-native-gesture-handler, která pracuje synchronně s animacemi a zajišťuje 60 FPS i při víceprstých gestech. Gesture Handler poskytuje Animated.event — metodu, která přímo propojuje gesto s Animated.Value bez ručního zpracování callbacků. Kombinace Gesture Handler + Animated API je průmyslovým standardem pro interaktivní animace v React Native aplikacích.

Animated.event: propojení gest s hodnotami

Animated.event je metoda, která propojuje nativní událost (např. gestureEvent) přímo s Animated.Value. Na rozdíl od ručního zpracování v callbacku pracuje Animated.event synchronně v nativním vlákně a nevyžaduje JavaScript most pro každý snímek. To zajišťuje plynulou animaci i při rychlých swipích. Animated.event přijímá pole mapování, kde každý prvek propojuje pole události s Animated.Value. Je podporován vnořený přístup: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Příklady kódu s Animated API

Podívejme se na tři praktické příklady použití Animated API v React Native projektech. První příklad — animace zobrazení karty se sekvencí opacity + translateY. Druhý příklad — pulzační animace tlačítka pomocí spring. Třetí příklad — interaktivní prvek pro tažení s PanResponder. Všechny příklady používají useNativeDriver = true a odpovídají nejlepším praktikám 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 }] }]
    }
  );
};

Pulzační animace pomocí spring

Spring animace vytváří přirozený pulzační efekt díky fyzikálnímu modelu pružiny. Nastavení nízkého friction (2-4) a vysokého tension (100-150) poskytuje měkké oscilace, které přirozeně doznívají. Použijte Animated.loop pro nekonečnou pulzaci s cyklem sequence: scale → 1.2, scale → 1.0. Pulzace se aplikuje pro indikátory načítání, oznámení a akcentní tlačítka.