Animated API: یہ کیا ہے، لائبریری کی خصوصیات اور کام کرنے کا اصول

React Native میں Animated API کیا ہے

Animated API — React Native کے بنیادی حصے میں شامل ایک ڈیکلریٹیو اینیمیشن لائبریری ہے، جو موبائل ایپلیکیشنز میں ہموار اور موثر اینیمیشنز بنانے کے لیے ڈیزائن کی گئی ہے۔ ویب ڈویلپمنٹ میں CSS اینیمیشنز کے برعکس، Animated API 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 طریقہ duration، delay اور easing پیرامیٹرز کے ساتھ لکیری یا 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 Hooke کے قانون پر مبنی اسپرنگ ماڈل اینیمیشن لاگو کرتا ہے۔ 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 سب سے زیادہ استعمال ہونے والا جز ہے — یہ وہی قبول کرتا ہے جو عام View کرتا ہے، لیکن اسٹائل میں اینیمیٹڈ ویلیوز کی حمایت کے ساتھ۔ Animated.Text ٹیکسٹ کلر یا inter-letter سپیسنگ کو اینیمیٹ کرنے کے لیے مفید ہے۔ 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' کے ساتھ)، ہیکس کلرز ('#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 تمام اینیمیشنز کو ایک مشترکہ مکمل ہونے کے کال بیک کے ساتھ بیک وقت چلاتی ہے۔ Animated.stagger ہر اینیمیشن کے شروع ہونے میں تاخیر کے ساتھ اینیمیشنز چلاتی ہے — لہری اثرات پیدا کرنے کے لیے مفید۔ کمپوزیشنز کو ایک دوسرے میں گھیرا جا سکتا ہے: parallel گروپس کی sequence یا sequence کی parallel۔ یہ پیچیدہ زنجیریں بنانے کی اجازت دیتا ہے: تاخیر کے ساتھ عناصر کے ظاہر ہونے کی اینیمیشن، fade-in کے ساتھ متوازی slide-in، پھر bounce اور shake کی 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 اور اینیمیشن کارکردگی

useNativeDriver — اینیمیشن کنفیگریشن کا ایک آپشن ہے جو تمام اینیمیشن منطق کو JavaScript تھریڈ سے نیٹیو UI فلو میں منتقل کرتا ہے۔ useNativeDriver کے بغیر، اینیمیشنز JavaScript برج کے ذریعے چلتی ہیں: قدر کی ہر تبدیلی نیٹیو فلو کو بھیجی جاتی ہے، جس سے اس وقت تاخیر ہوتی ہے جب JavaScript تھریڈ غیر متزلزل کارروائیوں سے مصروف ہو۔ 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 کے علاوہ تمام اینیمیٹڈ پراپرٹیز native driver کے ذریعے سپورٹ ہوتی ہیں۔ useNativeDriver تمام اینیمیشنز کے لیے تجویز کیا جاتا ہے جہاں ممکن ہو — یہ FPS کو 30-40 سے بڑھا کر مستحکم 60 کر دیتا ہے۔

جیسچرز کے ساتھ اینیمیشن: PanResponder اور Gesture Handler

PanResponder — React Native کا بلٹ ان جیسچر پروسیسنگ سسٹم ہے جو Animated API کے ساتھ بہترین انضمام رکھتا ہے۔ PanResponder onPanResponderMove اور onPanResponderRelease کال بیکس فراہم کرتا ہے، جہاں انگلی کی پوزیشن کی بنیاد پر Animated.Value کو اپ ڈیٹ کیا جا سکتا ہے۔ زیادہ پیچیدہ جیسچرز — swipe، pinch، rotation — کے لیے 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 کے ساتھ کوڈ کی مثالیں

آئیے React Native پروجیکٹس میں Animated API کے استعمال کی تین عملی مثالوں پر غور کریں۔ پہلی مثال — 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) کی ترتیب نرم دولن دیتی ہے جو قدرتی طور پر ختم ہوتی ہے۔ لامتناہی پلسیشن کے لیے sequence سائیکل کے ساتھ Animated.loop استعمال کریں: scale → 1.2، scale → 1.0۔ پلسیشن لوڈنگ انڈیکیٹرز، نوٹیفیکیشنز اور ایکسنٹ بٹنز کے لیے استعمال ہوتی ہے۔