Animated API: bu nima, kutubxonaning imkoniyatlari va ishlash prinsipi

React Native-da Animated API nima

Animated API — React Native yadrosiga o'rnatilgan, mobil ilovalarda silliq va samarali animatsiyalar yaratish uchun mo'ljallangan deklarativ animatsiya kutubxonasidir. Veb-ishlanmada CSS animatsiyalaridan farqli o'laroq, Animated API JavaScript ko'prigi yoki native drayver orqali to'g'ridan-to'g'ri native UI thread-i bilan ishlaydi. Kutubxona Animated.Value konseptsiyasi atrofida qurilgan — raqamli qiymatni saqlaydigan va barcha bog'liq komponentlarni avtomatik ravishda o'zgarishlarga obuna qiladigan konteyner. Animated.timing yoki Animated.spring orqali qiymat o'zgartirilganda, kutubxona React komponentlarini qayta render qilmasdan oraliq holatlarni hisoblab chiqadi, bu 60 FPS ni saqlash uchun juda muhimdir. Animated API transform, opacity, width, height, top, left va backgroundColor kabi barcha stil xususiyatlarini qo'llab-quvvatlaydi. React Native hujjatlari Animated API-ni ikkala platformada yuqori samaradorlik va bashorat qilinadigan xatti-harakat talab qiladigan barcha animatsiya stsenariylari uchun tavsiya qiladi.

Animated API qanday ishlaydi: Value, timing va spring

Animated API-ning asosi Animated.Value dir — new Animated.Value(0) konstruktori orqali ishga tushiriladigan raqamli qiymat konteyneri. Har bir Animated.Value boshlang'ich raqamni saqlaydi va animatsiya usullarini taqdim etadi: timing, spring va decay. Timing usuli duration, delay va easing parametrlari bilan chiziqli yoki easing animatsiyasini yaratadi. Spring usuli friction, tension va velocity parametrlari bilan fizik prujina animatsiyasini amalga oshiradi. Decay usuli inertsiya va so'nish bilan animatsiya yaratadi — swip va skroll uchun foydali. Barcha usullar start() orqali ishga tushiriladigan va stop() orqali to'xtatiladigan Animated.Composite obyektini qaytaradi. Animatsiya alohida thread-da bajariladi: useNativeDriver = true ishlatilganda, hisob-kitoblar native UI thread-da amalga oshiriladi, JavaScript thread hodisalar va mantiqni qayta ishlash uchun bo'sh qoladi.

Animated.timing: davomiylik va easing sozlamalari

Animated.timing — boshqariladigan davomiylikka ega asosiy animatsiya usuli. Konfiguratsiyani qabul qiladi: toValue, duration (standart 500ms), easing (standart Easing.linear) va delay. Easing modulidagi easing funksiyalari nochiziqli tezlashishga imkon beradi: Easing.bezier, Easing.elastic, Easing.bounce. Bir xil tezlikdagi animatsiya uchun Easing.linear, tabiiy tezlashish uchun Easing.inOut dan foydalaning. Muhim: Animated.timing animatsiya qurilma yukidan qat'i nazar, belgilangan vaqtda to'liq toValue da tugashini kafolatlaydi.

Animated.spring: fizik animatsiya

Animated.spring Guk qonuniga asoslangan prujina animatsiya modelini amalga oshiradi. Friction (ishqalanish) parametri tebranishlar sonini boshqaradi: friction qanchalik yuqori bo'lsa, to'xtash shunchalik tez bo'ladi. Tension (taranglik) parametri prujinaning qattiqligini aniqlaydi: yuqori tension harakatni tezlashtiradi. Velocity parametri inertsiya bilan animatsiya uchun boshlang'ich tezlikni o'rnatadi — foydalanuvchi jestiga ergashadigan animatsiyalar uchun juda muhim. Animated.spring ning qat'iy davomiyligi yo'q — animatsiya tezlik va amplituda chegara qiymatlariga yetganda tugaydi.

Animated.View, Animated.Text va boshqa komponentlar

Animated API to'rtta o'rnatilgan animatsiya qilingan komponentni taqdim etadi: Animated.View, Animated.Text, Animated.ScrollView va Animated.Image. Ularning har biri tegishli native komponent ustidagi o'ram bo'lib, stil xususiyatlarida Animated.Value ni uzatishni qo'llab-quvvatlaydi. Animated.View eng ko'p ishlatiladigan komponent bo'lib, oddiy View bilan bir xil propslarni qabul qiladi, lekin style da animatsiya qilingan qiymatlarni qo'llab-quvvatlaydi. Animated.Text matn rangi yoki harflararo bo'shliqni animatsiya qilish uchun foydalidir. Animated.ScrollView scrollTo va contentOffset ni animatsiya qilish imkonini beradi. Animated.Image tasvirlar yuklanayotganda animatsiya qilingan shaffoflik va masshtabni qo'llab-quvvatlaydi. Agar boshqa komponentni animatsiya qilish kerak bo'lsa, Animated.createAnimatedComponent(MyComponent) dan foydalaning.

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

Interpolyatsiya tizimi: raqamlardan rangga va transformatsiyaga

Interpolyatsiya — Animated.Value ning kirish raqamli diapazonini boshqa turdagi chiqish qiymatlariga aylantiruvchi mexanizm. interpolate usuli inputRange (kirish qiymatlari massivi) va outputRange (chiqish qiymatlari massivi) bilan konfiguratsiyani qabul qiladi. OutputRange turlari: raqamlar (koordinatalar, shaffoflik), satrlar ('deg' bilan aylanish burchaklari), hex ranglar ('#ff0000'), transformatsiya obyektlari. Interpolyatsiya easing va extrapolate — belgilangan diapazondan tashqaridagi xatti-harakatni (clamp, extend, identity) qo'llab-quvvatlaydi. Masalan, drag jestida barmoqning 0 dan 200 gacha bo'lgan pozitsiyasini shaffoflikka 1 dan 0 ga aylantirib, swipda so'nish effektini yaratish mumkin. Interpolyatsiya tizimi murakkab ko'p bosqichli animatsiyalar yaratishga imkon beradi: 0-0.5-1.0 qiymati sariq-to'q sariq-qizilga aylanishi mumkin.

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

Animatsiya kompozitsiyasi: ketma-ketlik va parallellik

Animated API uchta animatsiya kompozitsiya rejimini qo'llab-quvvatlaydi: Animated.sequence, Animated.parallel va Animated.stagger. Animated.sequence animatsiyalarni birin-ketin ishga tushiradi: har bir keyingisi oldingisi tugagandan so'ng boshlanadi. Animated.parallel barcha animatsiyalarni bir vaqtning o'zida bitta umumiy tugatish callback-i bilan ishga tushiradi. Animated.stagger animatsiyalarni har birining boshlanishi o'rtasida kechikish bilan ishga tushiradi — kechiktirilgan boshlash, to'lqin effektlarini yaratish uchun foydali. Kompozitsiyalar bir-birining ichiga joylashtirilishi mumkin: parallel guruhlaridan sequence yoki sequence dan parallel. Bu murakkab zanjirlar yaratishga imkon beradi: elementlarning kechikish bilan paydo bo'lish animatsiyasi, fade-in bilan parallel slide-in, keyin bounce va shake dan 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 va animatsiya samaradorligi

useNativeDriver — barcha animatsiya mantiqini JavaScript thread-dan native UI thread-ga o'tkazadigan animatsiya konfiguratsiya opsiyasidir. useNativeDriver bo'lmasa, animatsiyalar JavaScript ko'prigi orqali bajariladi: har bir qiymat o'zgarishi native thread-ga yuboriladi, bu esa asinxron operatsiyalar bilan JS thread yuklanganda kechikishlarga sabab bo'ladi. useNativeDriver = true bilan Animated.Value to'g'ridan-to'g'ri native tomonda yangilanadi, JavaScript thread hodisalar, API so'rovlari va React rekonkiliyatsiyasini qayta ishlash uchun bo'sh qoladi. Cheklov: useNativeDriver faqat layout bo'lmagan xususiyatlarni qo'llab-quvvatlaydi — opacity, transform, backgroundColor (PlatformColor orqali). Layout xususiyatlari (width, height, top, left) uchun NativeAnimatedModule yoki LayoutAnimation talab qilinadi. React Native 0.76 ga ko'ra, layout-based dan tashqari barcha animatsiya xususiyatlari native drayver orqali qo'llab-quvvatlanadi. useNativeDriver rejimi mumkin bo'lgan barcha animatsiyalar uchun tavsiya etiladi — bu FPS ni 30-40 dan barqaror 60 ga ko'taradi.

Jestlar bilan animatsiya: PanResponder va Gesture Handler

PanResponder — Animated API bilan mukammal integratsiyalashadigan React Native-ning ichki jestlarni qayta ishlash tizimidir. PanResponder onPanResponderMove va onPanResponderRelease callback-larini taqdim etadi, bu erda Animated.Value barmoq pozitsiyasiga asoslanib yangilanishi mumkin. Murakkabroq jestlar — swipe, pinch, rotation — uchun animatsiyalar bilan sinxron ishlaydigan va hatto ko'p barmoqli jestlarda 60 FPS ni ta'minlaydigan react-native-gesture-handler kutubxonasidan foydalaning. Gesture Handler Animated.event ni taqdim etadi — callback-larni qo'lda qayta ishlamasdan jestni to'g'ridan-to'g'ri Animated.Value bilan bog'laydigan usul. Gesture Handler + Animated API kombinatsiyasi React Native ilovalarida interaktiv animatsiyalar uchun sanoat standartidir.

Animated.event: jestlarni qiymatlarga bog'lash

Animated.event — native hodisani (masalan, gestureEvent) to'g'ridan-to'g'ri Animated.Value bilan bog'laydigan usul. Callbackda qo'lda qayta ishlashdan farqli o'laroq, Animated.event native thread-da sinxron ishlaydi va har bir kadr uchun JavaScript ko'prigini talab qilmaydi. Bu tez swiplarda ham silliq animatsiyani ta'minlaydi. Animated.event har bir element hodisa maydonini Animated.Value bilan bog'laydigan massivlar massivini qabul qiladi. Ichma-ich kirish qo'llab-quvvatlanadi: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Animated API bilan kod misollari

React Native loyihalarida Animated API dan foydalanishning uchta amaliy misolini ko'rib chiqamiz. Birinchi misol — opacity + translateY ketma-ketligi bilan kartaning paydo bo'lish animatsiyasi. Ikkinchi misol — spring yordamida tugmaning pulsatsiya animatsiyasi. Uchinchi misol — PanResponder bilan interaktiv drag elementi. Barcha misollar useNativeDriver = true dan foydalanadi va React Native 0.76 ning eng yaxshi amaliyotlariga mos keladi.

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 orqali pulsatsiya animatsiyasi

Spring-animatsiyasi fizik prujina modeli tufayli tabiiy pulsatsiya effektini yaratadi. Past friction (2-4) va yuqori tension (100-150) sozlamasi tabiiy ravishda so'nadigan yumshoq tebranishlarni beradi. Animated.loop ni cheksiz pulsatsiya uchun sequence sikli bilan ishlating: scale → 1.2, scale → 1.0. Pulsatsiya yuklash ko'rsatkichlari, bildirishnomalar va urg'u tugmalari uchun qo'llaniladi.