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। पल्सिंग का उपयोग लोडिंग इंडिकेटर, नोटिफिकेशन और एक्सेंट बटन के लिए किया जाता है।