Animated API: এটি কী, লাইব্রেরির বৈশিষ্ট্য এবং কাজের নীতি

React Native-এ Animated API কী

Animated API একটি ঘোষণামূলক অ্যানিমেশন লাইব্রেরি যা React Native-এর কোরে নির্মিত, মোবাইল অ্যাপ্লিকেশনে মসৃণ, উচ্চ-পারফরম্যান্স অ্যানিমেশন তৈরি করার জন্য ডিজাইন করা হয়েছে। ওয়েব ডেভেলপমেন্টে CSS অ্যানিমেশনের বিপরীতে, Animated API JavaScript ব্রিজ বা নেটিভ ড্রাইভারের মাধ্যমে সরাসরি নেটিভ UI থ্রেডের সাথে কাজ করে। লাইব্রেরি 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 সর্বাধিক ব্যবহৃত কম্পোনেন্ট, যা সাধারণ View-এর মতো একই props গ্রহণ করে, কিন্তু 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' সহ ঘূর্ণন কোণ), হেক্স রঙ ('#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 প্রতিটি শুরুর মধ্যে বিলম্ব সহ অ্যানিমেশন চালায় — তরঙ্গ প্রভাব তৈরি করার জন্য দরকারী। কম্পোজিশন নেস্টেড করা যেতে পারে: সমান্তরাল গ্রুপের ক্রম বা ক্রমের সমান্তরাল। এটি জটিল শৃঙ্খল তৈরি করতে দেয়: বিলম্ব সহ উপাদান উপস্থিতি অ্যানিমেশন, fade-in সহ সমান্তরাল slide-in, তারপর 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 শুধুমাত্র নন-লেআউট প্রপার্টি সমর্থন করে — opacity, transform, backgroundColor (PlatformColor-এর মাধ্যমে)। লেআউট প্রপার্টির (width, height, top, left) জন্য NativeAnimatedModule বা LayoutAnimation প্রয়োজন। React Native 0.76 অনুসারে, লেআউট-ভিত্তিক ছাড়া সমস্ত অ্যানিমেটেড প্রপার্টি নেটিভ ড্রাইভারের মাধ্যমে সমর্থিত। 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-র সাথে কোড উদাহরণ

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 অ্যানিমেশন একটি ভৌত স্প্রিং মডেল ব্যবহার করে একটি প্রাকৃতিক স্পন্দন প্রভাব তৈরি করে। কম ঘর্ষণ (2-4) এবং উচ্চ টান (100-150) সেটিংস নরম দোলন তৈরি করে যা প্রাকৃতিকভাবে ক্ষয় হয়। অসীম স্পন্দনের জন্য ক্রম চক্রের সাথে Animated.loop ব্যবহার করুন: scale → 1.2, scale → 1.0। স্পন্দন লোডিং ইন্ডিকেটর, বিজ্ঞপ্তি এবং অ্যাকসেন্ট বাটনের জন্য ব্যবহৃত হয়।