React Native में animations कैसे काम करते हैं?

Question

Accepted Answer

React Native built-in **Animated** API और लोकप्रिय **Reanimated** library के माध्यम से **animations** का समर्थन करता है। Animations सुचारू गति और transitions के साथ UX को बढ़ाते हैं। Performance (native thread पर animations चलाना) एक मुख्य विचार है। ## Animated API (built-in) ```jsx import { Animated } from 'react-native'; const fadeAnim = useRef(new Animated.Value(0)).current; // an animated value // animate it (e.g. fade in) Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true, // run on the NATIVE thread (smooth — important!) }).start(); // apply it to a component ... ``` **Animated** API `Animated.View` आदि पर लागू किए गए animated values का उपयोग करता है। महत्वपूर्ण `useNativeDriver: true` animation को **native thread** पर चलाता है (सुचारू, JS द्वारा अवरुद्ध नहीं)। ## Reanimated (जटिल animations के लिए अनुशंसित) ```text REACT NATIVE REANIMATED → a popular library for performant, complex animations: → runs animations on the native/UI thread (smooth, off the JS thread) → supports gestures (with react-native-gesture-handler), worklets, spring physics → better for complex, interactive, gesture-driven animations than the basic Animated API → The go-to for advanced animations in React Native. ``` ## यहाँ performance क्यों मायने रखता है ```text ⚠️ Animations driven by the JS thread can be JANKY (the JS thread is busy / blocked) → → useNativeDriver (Animated) or Reanimated run animations on the NATIVE/UI thread → smooth even if JS is busy → Running animations natively (not on the JS thread) is KEY to smooth animations in RN. ``` ## यह क्यों महत्वपूर्ण है React Native में animations समझना मूल्यवान है क्योंकि **animations user experience को बढ़ाते हैं** सुचारू गति और transitions के साथ जो apps को परिष्कृत महसूस कराते हैं, इसलिए यह उपयोगी व्यावहारिक ज्ञान है — और performance विचार React Native में विशेष रूप से महत्वपूर्ण हैं। built-in **Animated** API (Animated components पर लागू किए गए animated values का उपयोग करते हुए) animations के लिए नींव प्रदान करता है। महत्वपूर्ण रूप से, performance पहलू को समझना — कि **JavaScript thread द्वारा संचालित animations janky हो सकते हैं** (यदि JS thread व्यस्त है) और animations को **native/UI thread** पर चलाना (Animated में `useNativeDriver: true` के माध्यम से, या Reanimated के माध्यम से) उन्हें सुचारू रखता है तब भी जब JS व्यस्त हो — React Native में performant animations के लिए मुख्य अंतर्दृष्टि है, React Native के JS/native threading model को देखते हुए एक उल्लेखनीय विचार। **Reanimated** समझना (performant, complex, gesture-driven animations के लिए लोकप्रिय library जो native thread पर चलती है, worklets, spring physics, और gestures का समर्थन करती है) मूल्यवान है क्योंकि यह React Native में **advanced animations के लिए go-to** है, complex interactive animations के लिए basic Animated API से बेहतर। दोनों को समझना — सरल animations के लिए built-in Animated API (useNativeDriver के साथ) और complex के लिए Reanimated, दोनों सुचारूता के लिए animations को natively चलाने पर ज़ोर देते हुए — animation toolkit को कवर करता है। परिष्कृत animations सार्थक रूप से UX में सुधार करते हैं, और उन्हें सुचारू बनाना (native thread पर चलाकर) मुख्य चुनौती है जो React Native का architecture प्रस्तुत करता है। चूँकि सुचारू animations UX को बढ़ाते हैं और React Native का animation performance गंभीर रूप से native thread पर animations चलाने पर निर्भर करता है (useNativeDriver या Reanimated के माध्यम से), और चूँकि Animated API, Reanimated, और विशेष रूप से native-thread performance विचार को समझना सुचारू animations बनाने में सक्षम बनाता है, React Native में animations समझना मूल्यवान, व्यावहारिक रूप से प्रासंगिक ज्ञान है — गति के साथ UX को बढ़ाने के लिए उपयोगी, जहाँ सुचारूता के लिए animations को natively चलाने की React-Native-विशिष्ट चिंता विशेष रूप से महत्वपूर्ण है, परिष्कृत React Native apps बनाने के लिए एक मूल्यवान skill।