Animated API: шта је то, могућности библиотеке и принцип рада

Шта је Animated API у React Native

Animated API је декларативна библиотека анимације уграђена у језгро React Native, намењена за креирање глатких, перформантних анимација у мобилним апликацијама. За разлику од CSS анимација у веб развоју, Animated API ради директно са изворном UI нити кроз JavaScript мост или изворни драјвер. Библиотека је изграђена око концепта Animated.Value — контејнера који чува нумеричку вредност и аутоматски претплаћује све зависне компоненте на промене. При промени вредности кроз Animated.timing или Animated.spring, библиотека израчунава међустања без поновног рендеровања React компоненти, што је критично за одржавање 60 FPS. Animated API подржава сва стилска својства, укључујући transform, opacity, width, height, top, left и backgroundColor. Документација React Native препоручује Animated API за све сценарије анимације где је потребна висока перформанса и предвидиво понашање на обе платформе.

Како ради Animated API: Value, timing и spring

Основа Animated API је Animated.Value, контејнер нумеричке вредности који се иницијализује кроз конструктор new Animated.Value(0). Сваки Animated.Value чува почетни број и пружа методе за анимацију: timing, spring и decay. Метода timing креира линеарну или easing анимацију са параметрима duration, delay и easing. Метода spring имплементира физичку опружну анимацију са параметрима friction, tension и velocity. Метода decay креира анимацију са инерцијом и пригушењем — корисно за свајпове и скрол. Све методе враћају објекат Animated.Composite који се може покренути кроз start() и зауставити кроз stop(). Анимација се извршава у посебној нити: при коришћењу useNativeDriver = true, прорачуни иду у изворну UI нит, JavaScript нит остаје слободна за обраду догађаја и логике.

Animated.timing: подешавање трајања и easing-а

Animated.timing је основна метода анимације са контролисаним трајањем. Прима конфигурацију: toValue, duration (подразумевано 500ms), easing (подразумевано Easing.linear) и delay. Easing функције из модула Easing омогућавају нелинеарно убрзање: Easing.bezier, Easing.elastic, Easing.bounce. За анимацију са равномерном брзином користите Easing.linear, за природно убрзање — Easing.inOut. Важно: Animated.timing гарантује да ће се анимација завршити тачно на toValue у одређеном времену, без обзира на оптерећење уређаја.

Animated.spring: физичка анимација

Animated.spring имплементира опружни модел анимације заснован на Хуковом закону. Параметар friction (трење) контролише број осцилација: што је friction већи, заустављање је брже. Параметар tension (затегнутост) одређује крутост опруге: висок tension убрзава кретање. Параметар velocity задаје почетну брзину за анимацију са инерцијом — кључно за анимације које прате гест корисника. Animated.spring нема фиксно трајање — анимација се завршава када брзина и амплитуда достигну граничне вредности.

Animated.View, Animated.Text и друге компоненте

Animated API пружа четири уграђене анимиране компоненте: Animated.View, Animated.Text, Animated.ScrollView и Animated.Image. Свака од њих је омотач над одговарајућом изворном компонентом која подржава пренос Animated.Value у стилска својства. Animated.View је најчешће коришћена компонента, прима исте props као обичан View, али са подршком за анимиране вредности у style. Animated.Text је користан за анимацију боје текста или размака између слова. Animated.ScrollView омогућава анимацију scrollTo и contentOffset. Animated.Image подржава анимирану провидност и размеру при учитавању слика. Ако вам је потребна анимација друге компоненте, користите 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}
  );
};

Систем интерполације: од бројева до боје и трансформација

Интерполација је механизам претварања улазног нумеричког опсега Animated.Value у излазне вредности другог типа. Метода interpolate прима конфигурацију са inputRange (низ улазних вредности) и outputRange (низ излазних вредности). Типови outputRange: бројеви (координате, провидност), стрингови (углови ротације са 'deg'), hex боје ('#ff0000'), објекти трансформације. Интерполација подржава easing и extrapolate — понашање ван задатог опсега (clamp, extend, identity). На пример, при drag гесту можете претворити позицију прста од 0 до 200 у провидност од 1 до 0, стварајући ефекат блеђења при свајпу. Систем интерполације омогућава креирање сложених вишекорачних анимација: вредност 0-0.5-1.0 може се претварати у жуто-наранџасто-црвену.

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

Композиција анимација: секвенцијалност и паралелност

Animated API подржава три режима композиције анимација: Animated.sequence, Animated.parallel и Animated.stagger. Animated.sequence покреће анимације једну за другом: свака следећа почиње након завршетка претходне. Animated.parallel покреће све анимације истовремено са једним заједничким callback-ом завршетка. Animated.stagger покреће анимације са кашњењем између старта сваке — одложени старт, корисно за стварање таласних ефеката. Композиције се могу уметати једна у другу: sequence из parallel група или parallel из sequence. Ово омогућава креирање сложених ланаца: анимација појављивања елемената са кашњењем, паралелни slide-in са fade-in, затим sequence од bounce и 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 и перформансе анимација

useNativeDriver је опција конфигурације анимације која преноси сву логику анимације из JavaScript нити у изворну UI нит. Без useNativeDriver анимације се извршавају кроз JavaScript мост: свака промена вредности шаље се у изворну нит, што изазива кашњења при оптерећењу JS нити асинхроним операцијама. Са useNativeDriver = true, Animated.Value се ажурира директно на изворној страни, а JavaScript нит остаје слободна за обраду догађаја, API захтева и React реконцилијацију. Ограничење: useNativeDriver подржава само не-layout својства — opacity, transform, backgroundColor (кроз PlatformColor). За layout својства (width, height, top, left) потребан је NativeAnimatedModule или LayoutAnimation. Према React Native 0.76, сва анимирана својства осим layout-based се подржавају кроз изворни драјвер. Режим useNativeDriver се препоручује за све анимације где је то могуће — ово подиже FPS са 30-40 на стабилних 60.

Анимација са гестовима: PanResponder и Gesture Handler

PanResponder је уграђени систем React Native за обраду гестова, који се одлично интегрише са Animated API. PanResponder пружа callback-ове onPanResponderMove и onPanResponderRelease, где се може ажурирати Animated.Value на основу позиције прста. За сложеније гестове — swipe, pinch, rotation — користите библиотеку react-native-gesture-handler, која ради синхроно са анимацијама и обезбеђује 60 FPS чак и при гестовима са више прстију. Gesture Handler пружа Animated.event — методу која директно повезује гест са Animated.Value без ручне обраде callback-ова. Комбинација Gesture Handler + Animated API је индустријски стандард за интерактивне анимације у React Native апликацијама.

Animated.event: повезивање гестова са вредностима

Animated.event је метода која повезује изворни догађај (нпр. gestureEvent) директно са Animated.Value. За разлику од ручне обраде у callback-у, Animated.event ради синхроно у изворној нити и не захтева JavaScript мост за сваки кадар. Ово даје глатку анимацију чак и при брзим свајповима. Animated.event прима низ мапирања, где сваки елемент повезује поље догађаја са Animated.Value. Угнежђени приступ је подржан: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Примери кода са Animated API

Размотримо три практична примера употребе Animated API у React Native пројектима. Први пример — анимација појављивања картице са секвенцом opacity + translateY. Други пример — анимација пулсације дугмета коришћењем spring. Трећи пример — интерактивни drag елемент са PanResponder. Сви примери користе useNativeDriver = true и одговарају најбољим праксама 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 }] }]
    }
  );
};

Анимација пулсације кроз spring

Spring анимација ствара природан ефекат пулсације захваљујући физичком моделу опруге. Подешавање ниског friction (2-4) и високог tension (100-150) даје мекане осцилације које природно замиру. Користите Animated.loop за бесконачну пулсацију са циклусом sequence: scale → 1.2, scale → 1.0. Пулсација се примењује за индикаторе учитавања, обавештења и акцентна дугмад.