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-анімацію з параметрами тривалості, затримки та easing. Метод spring реалізує фізичну пружинну анімацію з параметрами тертя, натяження та швидкості. Метод 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 (тертя) контролює кількість коливань: чим вище тертя, тим швидше зупинка. Параметр 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 запускає всі анімації одночасно з одним спільним колбеком завершення. Animated.stagger запускає анімації з затримкою між стартом кожної — корисно для створення хвильових ефектів. Композиції можна вкладати одну в іншу: sequence з паралельних груп або 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-базованих. Режим useNativeDriver рекомендується для всіх анімацій, де це можливо — це підвищує FPS з 30-40 до стабільних 60.

Анімація з жестами: PanResponder та Gesture Handler

PanResponder — вбудована система React Native для обробки жестів, яка відмінно інтегрується з Animated API. PanResponder надає колбеки onPanResponderMove та onPanResponderRelease, де можна оновлювати Animated.Value на основі позиції пальця. Для більш складних жестів — свайп, пінч, обертання — використовуйте бібліотеку react-native-gesture-handler, яка працює синхронно з анімаціями та забезпечує 60 FPS навіть при багатопальцевих жестах. Gesture Handler надає Animated.event — метод, який безпосередньо пов'язує жест з Animated.Value без ручної обробки колбеків. Комбінація Gesture Handler + Animated API — стандарт індустрії для інтерактивних анімацій в React Native додатках.

Animated.event: прив'язка жестів до значень

Animated.event — це метод, який пов'язує нативну подію (наприклад, gestureEvent) безпосередньо з Animated.Value. На відміну від ручної обробки в колбеку, 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-анімація створює природний ефект пульсації за рахунок фізичної моделі пружини. Налаштування низького тертя (2-4) та високого натяження (100-150) дає м'які коливання, які згасають природно. Використовуйте Animated.loop для нескінченної пульсації з циклом sequence: scale → 1.2, scale → 1.0. Пульсація застосовується для індикаторів завантаження, сповіщень та акцентних кнопок.