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). Например, при жест за плъзгане, позицията на пръста от 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. Третият пример — интерактивен елемент за плъзгане с 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. Пулсацията се прилага за индикатори за зареждане, известия и акцентни бутони.