Animated API: bu nədir, kitabxananın imkanları və iş prinsipi

React Native-də Animated API nədir

Animated API — React Native nüvəsinə daxil edilmiş, mobil tətbiqlərdə hamar və məhsuldar animasiyalar yaratmaq üçün nəzərdə tutulmuş deklarativ animasiya kitabxanasıdır. Veb inkişafda CSS animasiyalarından fərqli olaraq, Animated API JavaScript körpüsü və ya nativ drayver vasitəsilə birbaşa nativ UI thread-i ilə işləyir. Kitabxana Animated.Value konsepsiyası ətrafında qurulub — bu, ədədi dəyər saxlayan və bütün asılı komponentləri avtomatik olaraq dəyişikliklərə abunə edən konteynerdir. Animated.timing və ya Animated.spring vasitəsilə dəyər dəyişdirilərkən, kitabxana React komponentlərini yenidən render etmədən aralıq vəziyyətləri hesablayır, bu da 60 FPS-in qorunması üçün kritik əhəmiyyət daşıyır. Animated API transform, opacity, width, height, top, left və backgroundColor daxil olmaqla bütün stil xüsusiyyətlərini dəstəkləyir. React Native sənədləri Animated API-ni hər iki platformada yüksək performans və proqnozlaşdırıla bilən davranış tələb edən bütün animasiya ssenariləri üçün tövsiyə edir.

Animated API necə işləyir: Value, timing və spring

Animated API-nin əsası Animated.Value-dir — konstruktor new Animated.Value(0) vasitəsilə işə salınan ədədi dəyər konteyneri. Hər bir Animated.Value ilkin ədədi saxlayır və animasiya metodlarını təmin edir: timing, spring və decay. Timing metodu duration, delay və easing parametrləri ilə xətti və ya easing animasiyası yaradır. Spring metodu friction, tension və velocity parametrləri ilə fiziki yay animasiyasını həyata keçirir. Decay metodu ətalət və sönümlə animasiya yaradır — sürüşdürmə və skroll üçün faydalıdır. Bütün metodlar start() ilə işə salına və stop() ilə dayandırıla bilən Animated.Composite obyekti qaytarır. Animasiya ayrıca thread-də icra olunur: useNativeDriver = true istifadə edildikdə, hesablamalar nativ UI thread-də aparılır, JavaScript thread-i hadisələrin və məntiqin işlənməsi üçün sərbəst qalır.

Animated.timing: müddət və easing konfiqurasiyası

Animated.timing — idarə olunan müddətə malik əsas animasiya metodudur. Konfiqurasiya qəbul edir: toValue, duration (standart 500ms), easing (standart Easing.linear) və delay. Easing modulundan olan easing funksiyaları qeyri-xətti sürətlənməyə imkan verir: Easing.bezier, Easing.elastic, Easing.bounce. Vahid sürətli animasiya üçün Easing.linear, təbii sürətlənmə üçün Easing.inOut istifadə edin. Vacib: Animated.timing animasiyanın cihaz yükündən asılı olmayaraq müəyyən edilmiş vaxtda dəqiq toValue-da bitəcəyinə zəmanət verir.

Animated.spring: fiziki animasiya

Animated.spring Huk qanununa əsaslanan yay animasiya modelini həyata keçirir. Friction (sürtünmə) parametri rəqslərin sayını idarə edir: friction nə qədər yüksəkdirsə, dayanma bir o qədər sürətli olur. Tension (gərginlik) parametri yayın sərtliyini müəyyən edir: yüksək tension hərəkəti sürətləndirir. Velocity parametri ətalətli animasiya üçün ilkin sürəti təyin edir — istifadəçinin jestini izləyən animasiyalar üçün kritikdir. Animated.spring-in sabit müddəti yoxdur — animasiya sürət və amplituda hədd dəyərlərinə çatdıqda başa çatır.

Animated.View, Animated.Text və digər komponentlər

Animated API dörd daxili animasiya edilmiş komponent təqdim edir: Animated.View, Animated.Text, Animated.ScrollView və Animated.Image. Onların hər biri müvafiq nativ komponent üzərində qurulmuş və stil xüsusiyyətlərində Animated.Value ötürülməsini dəstəkləyən sarğıdır. Animated.View ən çox istifadə edilən komponentdir, adi View ilə eyni props-ları qəbul edir, lakin style-də animasiya edilmiş dəyərləri dəstəkləyir. Animated.Text mətn rənginin və ya hərflərarası boşluğun animasiyası üçün faydalıdır. Animated.ScrollView scrollTo və contentOffset-i animasiya etməyə imkan verir. Animated.Image şəkillər yüklənərkən animasiya edilmiş şəffaflıq və miqyası dəstəkləyir. Başqa komponentin animasiyasına ehtiyacınız varsa, Animated.createAnimatedComponent(MyComponent) istifadə edin.

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

Interpolyasiya sistemi: rəqəmlərdən rəngə və transformasiyaya

Interpolyasiya — Animated.Value-nin giriş ədədi diapazonunu başqa tipli çıxış dəyərlərinə çevirən mexanizmdir. interpolate metodu inputRange (giriş dəyərləri massivi) və outputRange (çıxış dəyərləri massivi) ilə konfiqurasiya qəbul edir. OutputRange növləri: ədədlər (koordinatlar, şəffaflıq), sətirlər ('deg' ilə fırlanma bucaqları), hex rənglər ('#ff0000'), transformasiya obyektləri. Interpolyasiya easing və extrapolate — müəyyən edilmiş diapazondan kənar davranışı (clamp, extend, identity) dəstəkləyir. Məsələn, sürükləmə jesti zamanı barmağın mövqeyini 0-dan 200-ə qədər şəffaflığa 1-dən 0-a çevirərək sürüşdürmədə solma effekti yarada bilərsiniz. Interpolyasiya sistemi mürəkkəb çoxaddımlı animasiyalar yaratmağa imkan verir: 0-0.5-1.0 dəyəri sarı-narıncı-qırmızıya çevrilə bilər.

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

Animasiya kompozisiyası: ardıcıllıq və paralellik

Animated API üç animasiya kompozisiya rejimini dəstəkləyir: Animated.sequence, Animated.parallel və Animated.stagger. Animated.sequence animasiyaları bir-birinin ardınca işə salır: hər növbəti əvvəlkinin bitməsindən sonra başlayır. Animated.parallel bütün animasiyaları eyni vaxtda bir ümumi bitmə callback-i ilə işə salır. Animated.stagger animasiyaları hər birinin startı arasında gecikmə ilə işə salır — gecikmiş start, dalğa effektləri yaratmaq üçün faydalıdır. Kompozisiyalar bir-birinin içinə yerləşdirilə bilər: parallel qruplarından sequence və ya sequence-dən parallel. Bu, mürəkkəb zəncirlər yaratmağa imkan verir: elementlərin gecikmə ilə görünmə animasiyası, fade-in ilə paralel slide-in, sonra bounce və shake-dən sequence.

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 və animasiya performansı

useNativeDriver — bütün animasiya məntiqini JavaScript thread-indən nativ UI thread-inə köçürən animasiya konfiqurasiya seçimidir. useNativeDriver olmadan animasiyalar JavaScript körpüsü vasitəsilə icra olunur: hər dəyər dəyişikliyi nativ thread-ə göndərilir, bu da asinxron əməliyyatlarla JS thread-inin yüklənməsi zamanı gecikmələrə səbəb olur. useNativeDriver = true ilə Animated.Value birbaşa nativ tərəfdə yenilənir, JavaScript thread-i hadisələrin, API sorğularının və React rekonkiliasiyasının işlənməsi üçün sərbəst qalır. Məhdudiyyət: useNativeDriver yalnız qeyri-layout xüsusiyyətlərini dəstəkləyir — opacity, transform, backgroundColor (PlatformColor vasitəsilə). Layout xüsusiyyətləri (width, height, top, left) üçün NativeAnimatedModule və ya LayoutAnimation tələb olunur. React Native 0.76-ya görə, layout-based olanlar istisna olmaqla, bütün animasiya edilmiş xüsusiyyətlər nativ drayver vasitəsilə dəstəklənir. useNativeDriver rejimi mümkün olan bütün animasiyalar üçün tövsiyə olunur — bu, FPS-i 30-40-dan sabit 60-a qaldırır.

Jestlərlə animasiya: PanResponder və Gesture Handler

PanResponder — Animated API ilə mükəmməl inteqrasiya edən React Native-in daxili jest emal sistemidir. PanResponder onPanResponderMove və onPanResponderRelease callback-lərini təmin edir, burada Animated.Value barmağın mövqeyi əsasında yenilənə bilər. Daha mürəkkəb jestlər — swipe, pinch, rotation — üçün animasiyalarla sinxron işləyən və hətta çoxbarmaq jestlərində 60 FPS təmin edən react-native-gesture-handler kitabxanasından istifadə edin. Gesture Handler Animated.event-i təmin edir — callback-lərin əl ilə işlənməsi olmadan jesti birbaşa Animated.Value ilə birləşdirən metod. Gesture Handler + Animated API kombinasiyası React Native tətbiqlərində interaktiv animasiyalar üçün sənaye standartıdır.

Animated.event: jestlərin dəyərlərə bağlanması

Animated.event — nativ hadisəni (məsələn, gestureEvent) birbaşa Animated.Value ilə birləşdirən metoddur. Callback-də əl ilə emaldan fərqli olaraq, Animated.event nativ thread-də sinxron işləyir və hər kadr üçün JavaScript körpüsü tələb etmir. Bu, sürətli sürüşdürmələrdə belə hamar animasiya təmin edir. Animated.event hər bir elementin hadisə sahəsini Animated.Value ilə birləşdirdiyi massivlərin massivini qəbul edir. İç-içə giriş dəstəklənir: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Animated API ilə kod nümunələri

React Native layihələrində Animated API-dən istifadənin üç praktiki nümunəsini nəzərdən keçirək. Birinci nümunə — opacity + translateY ardıcıllığı ilə kartın görünmə animasiyası. İkinci nümunə — spring istifadə edərək düymənin pulsasiya animasiyası. Üçüncü nümunə — PanResponder ilə interaktiv sürükləmə elementi. Bütün nümunələr useNativeDriver = true istifadə edir və React Native 0.76-nın ən yaxşı təcrübələrinə uyğundur.

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 vasitəsilə pulsasiya animasiyası

Spring-animasiyası fiziki yay modeli sayəsində təbii pulsasiya effekti yaradır. Aşağı friction (2-4) və yüksək tension (100-150) təbii sönən yumşaq rəqslər verir. Sequence dövrü ilə sonsuz pulsasiya üçün Animated.loop istifadə edin: scale → 1.2, scale → 1.0. Pulsasiya yükləmə göstəriciləri, bildirişlər və vurğu düymələri üçün tətbiq olunur.