रिएक्ट नेटिव में एनिमेशन के साथ शुरुआत करना

एनिमेशन एक ऐप में जान फूंक सकता है, जिससे यह उपयोगकर्ता के लिए अधिक आकर्षक और सहज हो जाता है। लेकिन अगर आप रिएक्टिव नेटिव एनिमेशन के लिए नए हैं, तो शुरुआत करना थोड़ा मुश्किल हो सकता है।

रिएक्टिव नेटिव एनिमेशन का अन्वेषण करें और पता करें कि आप कैसे सुंदर, सहज एनिमेशन बनाना शुरू कर सकते हैं।

बेसिक रिएक्ट नेटिव एनिमेशन कैसे काम करते हैं?

एनिमेशन विभिन्न स्क्रीन या तत्वों के बीच सहज संक्रमण बना सकते हैं। वे जानकारी को हाइलाइट कर सकते हैं या उपयोगकर्ता की कार्रवाइयों पर प्रतिक्रिया दे सकते हैं। एनिमेशन सरल या जटिल हो सकते हैं और विभिन्न प्रकार की तकनीकों का उपयोग कर सकते हैं, जैसे 2डी या 3डी मोशन ग्राफिक्स।

रिएक्ट नेटिव की पोर्टेबिलिटी इसे उपयोग करने लायक बनाती है अगर आप कई प्लैटफ़ॉर्म को टारगेट कर रहे हैं. इसकी सबसे मजबूत विशेषताओं में से एक मोबाइल ऐप्स के लिए सुंदर एनिमेशन बनाने की क्षमता है।

आप वांछित घटक की स्थिति स्थिति को बदलकर केवल प्रतिक्रियाशील मूल वस्तु को एनिमेट कर सकते हैं।

उदाहरण के लिए:

आयात प्रतिक्रिया, {useState, useEffect} 





instagram viewer

से'प्रतिक्रिया';
आयात {देखें, स्टाइलशीट} से'प्रतिक्रिया-मूल';
कॉन्स्ट ऐप = () => {
// बॉक्स की स्थिति को ट्रैक करने के लिए राज्य को प्रारंभ करें
कॉन्स्ट [बॉक्सपोजिशन, सेटबॉक्सपोजिशन] = यूजस्टेट (0);
// हर 1 सेकंड में बॉक्स की स्थिति को अपडेट करने के लिए यूज इफेक्ट हुक का उपयोग करें
 उपयोग प्रभाव (() => {
कॉन्स्ट अंतराल = सेट अंतराल (() => {
// वर्तमान स्थिति में 10 जोड़कर बॉक्स की स्थिति को अपडेट करें
 सेटबॉक्सपोजिशन (पिछलास्थिति => पिछला पद + 10);
 }, 1000);
// अंतराल को साफ़ करने के लिए एक क्लीनअप फ़ंक्शन लौटाएँ जब घटक
// अनमाउंट
वापस करना() => स्पष्ट अंतराल (अंतराल);
 }, []);
// इनलाइन शैली में राज्य चर का उपयोग करके बॉक्स स्थिति सेट करें
कॉन्स्ट बॉक्स स्टाइल = {
 परिवर्तन: [{ अनुवाद वाई: बॉक्सपोजिशन}]
 };
वापस करना (


 </View>
 );
};
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 कंटेनर: {
 मोड़ना: 1,
 संरेखित आइटम: 'केंद्र',
 औचित्य सामग्री: 'केंद्र',
 },
 डिब्बा: {
 चौड़ाई: 100,
 ऊंचाई: 100,
 पृष्ठभूमि का रंग: 'नीला',
 },
});
निर्यातगलती करना अनुप्रयोग;

यह कोड एक नीला बॉक्स प्रस्तुत करता है जो हर सेकंड नीचे की ओर जाता है। एनीमेशन का उपयोग करके काम करता है useEffect एक टाइमर बनाने के लिए हुक जो अद्यतन करता है boxPosition राज्य चर हर 1 सेकंड।

हालांकि यह कुछ स्थितियों में काम कर सकता है, यह साथ जाने का सबसे अच्छा विकल्प नहीं है। रिएक्ट नेटिव में स्टेट अपडेट एसिंक्रोनस रूप से काम करते हैं, लेकिन एनिमेशन सही ढंग से काम करने के लिए सिंक्रोनस स्टेट अपडेट पर निर्भर करते हैं। आपके एनिमेशन को एसिंक्रोनस रूप से लागू करने से राज्य के अपडेट घटक के रेंडर किए गए आउटपुट में तुरंत दिखाई नहीं देंगे, जिससे आपके एनिमेशन का समय खराब हो जाएगा।

वे कई एनीमेशन लाइब्रेरी हैं जैसे एनिमेटेड पुस्तकालय, प्रतिक्रिया-मूल-पुनर्जीवित, और प्रतिक्रिया-देशी-एनिमेटेबल रिएक्ट नेटिव में प्रदर्शनकारी एनिमेशन बनाने के लिए। इनमें से प्रत्येक एनीमेशन लाइब्रेरी एसिंक्रोनस स्टेट अपडेट के मुद्दे को हल करती है और पूरी तरह से आदर्श है।

रिएक्टिव नेटिव एनिमेटेड एपीआई

एनिमेटेड एक एपीआई है जो रिएक्ट नेटिव प्रदान करता है। आप इसका उपयोग सहज एनिमेशन बनाने के लिए कर सकते हैं जो उपयोगकर्ता के इंटरैक्शन या राज्य परिवर्तनों का जवाब देते हैं।

एनिमेटेड एपीआई आपको एनिमेटेड वैल्यू बनाने देता है जिसे आप इंटरपोलेट कर सकते हैं और अपने घटकों के विभिन्न स्टाइल गुणों को मैप कर सकते हैं। फिर आप विभिन्न एनिमेशन विधियों का उपयोग करके समय के साथ इन मानों को अपडेट कर सकते हैं। आपके घटकों की शैलियाँ तब अपडेट होंगी जब एनिमेटेड मान बदलते हैं, जिसके परिणामस्वरूप सहज एनिमेशन बनते हैं।

एनिमेटेड रिएक्ट नेटिव के लेआउट सिस्टम के साथ वास्तव में अच्छी तरह से काम करता है। इस वजह से, आपके एनिमेशन और भी बेहतर रूप के लिए आपके बाकी UI के साथ ठीक से एकीकृत हो जाएंगे।

अपने रिएक्टिव नेटिव प्रोजेक्ट में एनिमेटेड का उपयोग शुरू करने के लिए, आपको आयात करना होगा एनिमेटेड से मॉड्यूल 'प्रतिक्रिया-मूल ' आपके कोड में:

आयात {एनिमेटेड} से'प्रतिक्रिया-मूल';

एनिमेटेड इम्पोर्टेड के साथ, आप एनिमेशन बनाना शुरू कर सकते हैं। ऐसा करने के लिए, सबसे पहले, एक एनिमेटेड वैल्यू बनाएं जिसे आप पूरे एनीमेशन में हेरफेर करेंगे:

कॉन्स्ट एनिमेटेडवैल्यू = नया एनिमेटेड। कीमत(0);

एनिमेटेड। कीमत रिएक्टिव नेटिव एनिमेटेड एपीआई में एक वर्ग है जो एक परिवर्तनशील मूल्य का प्रतिनिधित्व करता है। आप इसे प्रारंभिक मान के साथ प्रारंभ कर सकते हैं, और फिर एनिमेटेड एपीआई द्वारा प्रदान की जाने वाली विभिन्न एनीमेशन विधियों का उपयोग करके समय के साथ इसे अपडेट कर सकते हैं, जैसे .समय (), .वसंत(), और ।क्षय(), एनीमेशन की अवधि, आसान कार्य, और अन्य पैरामीटर निर्दिष्ट करके।

एनिमेटेड मान प्रतिक्रिया घटक में राज्य मान के समान है।

आप एक प्रारंभ कर सकते हैं एनिमेटेड। कीमत एक घटक के प्रारंभिक राज्य मूल्य के साथ, और उसके बाद इसे समय के साथ अद्यतन करें setState तरीका।

उदाहरण के लिए, आपके पास एक घटक है जिसका राज्य मान है गिनती करना, जो दर्शाता है कि उपयोगकर्ता ने उस बटन को कितनी बार क्लिक किया है।

आप एक बना सकते हैं एनिमेटेड। कीमत और इसे प्रारंभिक स्थिति मान के साथ प्रारंभ करें गिनती करना:

कॉन्स्ट ऐप = () => {
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
कॉन्स्ट एनिमेटेडवैल्यू = नया एनिमेटेड। मान (गणना);
};

फिर, जब भी गिनती करना राज्य मूल्य अद्यतन, आप अद्यतन कर सकते हैं एनिमेटेडवैल्यू बहुत:

कॉन्स्ट हैंडलबटनक्लिक = () => {
 सेटकाउंटर (गिनती + 1);
 एनिमेटेड.टाइमिंग (एनिमेटेडवैल्यू, {
 toValue: गिनती + 1,
 अवधि: 500,
 मूल चालक का उपयोग करें: सत्य
 })।शुरू करना();
};

यह उदाहरण अद्यतन करता है एनिमेटेडवैल्यू का उपयोग एनिमेटेड.टाइमिंग () विधि जब भी कोई उपयोगकर्ता बटन क्लिक करता है। एनिमेटेडवैल्यू एनीमेशन चलाता है, और यह 500 मिलीसेकंड से अधिक मान बदलता है।

संबंधित करके एनिमेटेड। कीमत एक राज्य मूल्य के लिए इस तरह, आप ऐसे एनिमेशन बना सकते हैं जो आपके घटक की स्थिति में परिवर्तन का जवाब देते हैं।

अब आप समझ गए हैं कि एनिमेटेड वैल्यू में हेरफेर कैसे किया जाता है, फिर आप एनिमेटेड वैल्यू को इंटरपोलेट करने के लिए आगे बढ़ सकते हैं और इसे अपने कंपोनेंट की स्टाइल प्रॉपर्टी में मैप कर सकते हैं एनिमेटेड.इंटरपोलेट () तरीका।

उदाहरण के लिए:

कॉन्स्ट अपारदर्शिता = एनिमेटेडवैल्यू.इंटरपोलेट ({
 निवेश सीमा: [0, 1],
 आउटपुट रेंज: [0, 1]
});
वापस करना (

 {/ * आपकी घटक सामग्री * /}
 </View>
);

यह एक ऐसा ऐनिमेशन बनाएगा जो धीरे-धीरे में फीका पड़ जाता है देखना घटक के रूप में एनिमेटेड मान 0 से 1 में बदलता है।

एनिमेशन के प्रकारों को समझना

अच्छे एनिमेशन बनाने के लिए एनिमेशन के प्रकारों और उनके काम करने के तरीके को समझना महत्वपूर्ण है।

का उपयोग नेटिवड्राइवर का उपयोग करें एनिमेटेड के साथ विकल्प प्रदर्शन में सुधार करता है। यह विकल्प आपको एनिमेशन को मूल UI थ्रेड में ऑफ़लोड करने देता है। यह आवश्यक जावास्क्रिप्ट प्रोसेसिंग की मात्रा को कम करके प्रदर्शन में काफी सुधार कर सकता है।

हालाँकि, सभी एनीमेशन प्रकार मूल ड्राइवर का समर्थन नहीं करते हैं। रंग या लेआउट परिवर्तन वाले एनिमेशन के साथ मूल ड्राइवर का उपयोग करने का प्रयास करने से अनपेक्षित व्यवहार हो सकता है।

इसके अलावा, जटिल अनुक्रमों से जुड़े एनिमेशन सीमित प्रसंस्करण शक्ति या मेमोरी वाले उपकरणों पर महत्वपूर्ण प्रदर्शन समस्याएँ पैदा कर सकते हैं। यदि आपका रिएक्टिव नेटिव प्रोजेक्ट निम्न संस्करण चला रहा है जो नहीं चल रहा है तो ये प्रदर्शन घाटे भी उल्लेखनीय हो सकते हैं हेमीज़ इंजन का समर्थन करें.

विभिन्न एनीमेशन प्रकारों की ताकत और सीमाओं को समझने से आपको अपने उपयोग के मामले के लिए सही दृष्टिकोण चुनने में मदद मिल सकती है।

रिएक्टिव नेटिव एनिमेशन के साथ सहज हो जाएं

रिएक्टिव नेटिव ऐप्स में आकर्षक और गतिशील यूजर इंटरफेस बनाने के लिए एनिमेशन एक शक्तिशाली उपकरण है। एनिमेटेड एपीआई सरल और जटिल अनुक्रम एनिमेशन दोनों बनाने के लिए एक लचीला और प्रदर्शनकारी तरीका प्रदान करता है।

फिर भी, एनिमेशन के प्रदर्शन प्रभाव पर विचार करना और अपनी स्थिति के लिए उपयुक्त दृष्टिकोण और पुस्तकालय का उपयोग करना महत्वपूर्ण है।