Animated API: mi ez, a könyvtár lehetőségei és működési elve

Mi az Animated API a React Native-ban

Animated API egy deklaratív animációs könyvtár, amely a React Native magjába van beágyazva, és zökkenőmentes, nagy teljesítményű animációk létrehozására szolgál mobilalkalmazásokban. A webfejlesztésben használt CSS-animációkkal ellentétben az Animated API közvetlenül a natív UI szállal dolgozik a JavaScript hídon vagy a natív illesztőprogramon keresztül. A könyvtár az Animated.Value koncepciója köré épül — egy tároló, amely numerikus értéket tárol, és automatikusan feliratkoztatja az összes függő komponenst a változásokra. Amikor az érték megváltozik az Animated.timing vagy Animated.spring segítségével, a könyvtár kiszámítja a köztes állapotokat anélkül, hogy újrarenderelné a React komponenseket, ami kritikus a 60 FPS fenntartásához. Az Animated API támogatja az összes stílustulajdonságot, beleértve a transform, opacity, width, height, top, left és backgroundColor tulajdonságokat. A React Native dokumentációja az Animated API-t ajánlja minden olyan animációs forgatókönyvhöz, ahol magas teljesítmény és kiszámítható viselkedés szükséges mindkét platformon.

Hogyan működik az Animated API: Value, timing és spring

Az Animated API alapja az Animated.Value, egy numerikus érték tároló, amely a new Animated.Value(0) konstruktoron keresztül inicializálódik. Minden Animated.Value tárol egy kezdő számot és animációs módszereket biztosít: timing, spring és decay. A timing metódus lineáris vagy easing animációt hoz létre duration, delay és easing paraméterekkel. A spring metódus fizikai rugós animációt valósít meg friction, tension és velocity paraméterekkel. A decay metódus tehetetlenséggel és csillapítással rendelkező animációt hoz létre — hasznos swipe-okhoz és görgetéshez. Minden metódus egy Animated.Composite objektumot ad vissza, amely a start() segítségével indítható és a stop() segítségével állítható le. Az animáció egy külön szálon fut: useNativeDriver = true használatakor a számítások a natív UI szálban történnek, a JavaScript szál szabad marad az események és logika feldolgozásához.

Animated.timing: időtartam és easing beállítása

Animated.timing az alapvető animációs metódus szabályozható időtartammal. Konfigurációt fogad: toValue, duration (alapértelmezett 500ms), easing (alapértelmezett Easing.linear) és delay. Az Easing modulból származó easing függvények nemlineáris gyorsítást tesznek lehetővé: Easing.bezier, Easing.elastic, Easing.bounce. Egyenletes sebességű animációhoz használja az Easing.linear-t, természetes gyorsításhoz az Easing.inOut-ot. Fontos: Az Animated.timing garantálja, hogy az animáció pontosan a toValue értékben fejeződik be a megadott időn belül, függetlenül az eszköz terhelésétől.

Animated.spring: fizikai animáció

Animated.spring a Hooke-törvényen alapuló rugós animációs modellt valósít meg. A friction (súrlódás) paraméter szabályozza az oszcillációk számát: minél magasabb a friction, annál gyorsabb a megállás. A tension (feszültség) paraméter határozza meg a rugó merevségét: a magas tension gyorsítja a mozgást. A velocity paraméter beállítja a kezdősebességet a tehetetlenséggel rendelkező animációhoz — kritikus a felhasználó gesztusát követő animációkhoz. Az Animated.spring-nek nincs rögzített időtartama — az animáció akkor ér véget, amikor a sebesség és az amplitúdó eléri a küszöbértékeket.

Animated.View, Animated.Text és egyéb komponensek

Az Animated API négy beépített animált komponenst biztosít: Animated.View, Animated.Text, Animated.ScrollView és Animated.Image. Mindegyik egy burkoló a megfelelő natív komponens körül, amely támogatja az Animated.Value átadását a stílustulajdonságokban. Az Animated.View a leggyakrabban használt komponens, ugyanazokat a props-okat fogadja el, mint egy szokásos View, de támogatja az animált értékeket a style-ban. Az Animated.Text hasznos a szöveg színének vagy a betűközök animálásához. Az Animated.ScrollView lehetővé teszi a scrollTo és contentOffset animálását. Az Animated.Image támogatja az animált átlátszóságot és méretarányt a képek betöltésekor. Ha egy másik komponenst szeretne animálni, használja a Animated.createAnimatedComponent(MyComponent) metódust.

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}
  );
};

Interpolációs rendszer: számoktól a színekig és transzformációkig

Interpoláció egy mechanizmus az Animated.Value bemeneti numerikus tartományának más típusú kimeneti értékekké alakításához. Az interpolate metódus konfigurációt fogad inputRange (bemeneti értékek tömbje) és outputRange (kimeneti értékek tömbje) paraméterekkel. OutputRange típusok: számok (koordináták, átlátszóság), karakterláncok (forgási szögek 'deg'-vel), hex színek ('#ff0000'), transzformációs objektumok. Az interpoláció támogatja az easing és extrapolate — a megadott tartományon kívüli viselkedést (clamp, extend, identity). Például egy húzási gesztusnál az ujj pozíciója 0-tól 200-ig átalakítható átlátszósággá 1-től 0-ig, halványulási effektust létrehozva swipe-nál. Az interpolációs rendszer lehetővé teszi összetett több lépésből álló animációk létrehozását: a 0-0.5-1.0 érték átalakulhat sárga-narancs-piros színekké.

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

Animációk kompozíciója: szekvencialitás és párhuzamosság

Az Animated API három animációs kompozíciós módot támogat: Animated.sequence, Animated.parallel és Animated.stagger. Az Animated.sequence egymás után indítja az animációkat: minden következő az előző befejezése után kezdődik. Az Animated.parallel egyszerre indítja az összes animációt egy közös befejezési callback-kel. Az Animated.stagger késleltetéssel indítja az animációkat az egyes kezdések között — késleltetett kezdés, hasznos hullámeffektusok létrehozásához. A kompozíciók egymásba ágyazhatók: sequence parallel csoportokból vagy parallel sequence-ből. Ez lehetővé teszi összetett láncok létrehozását: elemek megjelenésének animációja késleltetéssel, párhuzamos slide-in fade-in-nel, majd sequence bounce-ból és shake-ből.

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 és az animációk teljesítménye

useNativeDriver egy animációs konfigurációs opció, amely a teljes animációs logikát a JavaScript szálból a natív UI szálba helyezi át. useNativeDriver nélkül az animációk a JavaScript hídon keresztül futnak: minden értékváltozás elküldésre kerül a natív szálba, ami késéseket okoz, amikor a JS szál aszinkron műveletekkel van terhelve. useNativeDriver = true esetén az Animated.Value közvetlenül a natív oldalon frissül, a JavaScript szál szabad marad az események, API-kérések és React egyeztetés feldolgozásához. Korlátozás: a useNativeDriver csak nem-layout tulajdonságokat támogat — opacity, transform, backgroundColor (PlatformColor segítségével). Layout tulajdonságokhoz (width, height, top, left) NativeAnimatedModule vagy LayoutAnimation szükséges. A React Native 0.76 szerint az összes animált tulajdonság támogatott a natív illesztőprogramon keresztül, kivéve a layout-alapúakat. A useNativeDriver mód minden olyan animációhoz ajánlott, ahol lehetséges — ez 30-40 FPS-ről stabil 60-ra növeli a képkockasebességet.

Animáció gesztusokkal: PanResponder és Gesture Handler

PanResponder egy beépített React Native rendszer gesztusok feldolgozásához, amely kiválóan integrálódik az Animated API-val. A PanResponder onPanResponderMove és onPanResponderRelease callback-eket biztosít, ahol az Animated.Value frissíthető az ujj pozíciója alapján. Összetettebb gesztusokhoz — swipe, pinch, rotation — használja a react-native-gesture-handler könyvtárat, amely szinkronban dolgozik az animációkkal és 60 FPS-t biztosít még többujjas gesztusoknál is. A Gesture Handler biztosítja az Animated.event-et — egy metódust, amely közvetlenül összeköti a gesztust az Animated.Value-vel a callback-ek manuális feldolgozása nélkül. A Gesture Handler + Animated API kombináció az ipari szabvány az interaktív animációkhoz React Native alkalmazásokban.

Animated.event: gesztusok hozzárendelése értékekhez

Animated.event egy metódus, amely a natív eseményt (pl. gestureEvent) közvetlenül összeköti az Animated.Value-vel. Ellentétben a manuális feldolgozással callback-ben, az Animated.event szinkronban működik a natív szálban, és nem igényel JavaScript hidat minden egyes képkockához. Ez zökkenőmentes animációt biztosít még gyors swipe-oknál is. Az Animated.event egy leképezések tömbjét fogadja, ahol minden elem egy eseménymezőt köt össze az Animated.Value-vel. A beágyazott hozzáférés támogatott: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Kódpéldák az Animated API-val

Nézzünk meg három gyakorlati példát az Animated API használatára React Native projektekben. Az első példa — egy kártya megjelenési animációja opacity + translateY szekvenciával. A második példa — egy gomb pulzáló animációja spring használatával. A harmadik példa — interaktív húzható elem PanResponderrel. Minden példa useNativeDriver = true-t használ, és megfelel a React Native 0.76 legjobb gyakorlatainak.

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

Pulzáló animáció spring segítségével

Spring-animáció természetes pulzáló hatást hoz létre a fizikai rugómodellnek köszönhetően. Az alacsony friction (2-4) és magas tension (100-150) beállítása lágy oszcillációkat eredményez, amelyek természetesen csillapodnak. Használja az Animated.loop-ot végtelen pulzáláshoz sequence ciklussal: scale → 1.2, scale → 1.0. A pulzálás betöltési jelzőkhöz, értesítésekhez és akcentus gombokhoz alkalmazható.