फ्रैमर मोशन का उपयोग करके एक प्रतिक्रिया घटक के लिए प्रवेश और निकास एनिमेशन कैसे बनाएं

स्क्रीन में प्रवेश करने या छोड़ने के दौरान प्रतिक्रिया घटक को एनिमेट करना एक चुनौती हो सकती है। ऐसा इसलिए है, क्योंकि जब आप किसी कंपोनेंट को छिपाते हैं, तो रिएक्ट उसे DOM से हटा देता है, जिससे वह एनिमेशन के लिए अनुपलब्ध हो जाता है। जब आप घटक को फिर से दिखाते हैं, तो रिएक्ट इसे DOM में फिर से जोड़ देता है, जिसके परिणामस्वरूप बिना किसी एनीमेशन के अचानक प्रकट हो सकता है।

आप इस समस्या को फ्रैमर मोशन जैसी एनीमेशन लाइब्रेरी से हल कर सकते हैं।

फ्रैमर मोशन क्या है?

फ्रैमर मोशन रिएक्ट के लिए प्रोडक्शन के लिए तैयार एनिमेशन लाइब्रेरी है। यह एनिमेशन बनाने और नियंत्रित करने के लिए कई प्रकार के घटक, हुक, कीफ़्रेम और कस्टम ईज़िंग फ़ंक्शन प्रदान करता है।

फ्रैमर मोशन का एक फायदा यह है कि यह बहुत सारे जावास्क्रिप्ट कोड लिखने या प्रत्येक संक्रमण के लिए गणना करने की आवश्यकता के बिना सहज और तरल एनिमेशन बनाना आसान बनाता है।

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

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

एक प्रतिक्रिया परियोजना बनाना

रिएक्ट प्रोजेक्ट बनाने के लिए, आपको इसकी आवश्यकता होगी अपनी मशीन पर Node.js और npm (नोड पैकेज मैनेजर) स्थापित करें यदि आपने नहीं किया है।

एक बार आपके पास ये निर्भरताएँ स्थापित हो जाने के बाद, आप कर सकते हैं Vite का उपयोग करके एक नया रिएक्ट प्रोजेक्ट बनाएं अपने टर्मिनल में यार्न वाइट कमांड चलाकर।

यार्न वाइट

यह आदेश सभी आवश्यक फाइलों और पूर्व-स्थापित निर्भरताओं के साथ एक नया फ़ोल्डर बनाएगा। फ़ोल्डर पर नेविगेट करें और विकास सर्वर को यार्न स्टार्ट कमांड के साथ शुरू करें।

धागा शुरू

प्रतिक्रिया में फ्रैमर मोशन स्थापित करना

इस आदेश को चलाकर फ्रैमर मोशन स्थापित करें:

एनपीएम फ्रैमर-मोशन स्थापित करें

यह आदेश आपके प्रोजेक्ट की निर्भरता के रूप में फ्रैमर मोशन को जोड़ देगा।

एक घटक को एनिमेट करना

फ्रैमर मोशन का उपयोग करके रिएक्ट में किसी घटक के प्रवेश करने और स्क्रीन से बाहर निकलने पर उसे एनिमेट करने के लिए, आपको उसे गति घटक में लपेटने की आवश्यकता होती है।

गति घटक घटक के प्रवेश और निकास को एनिमेट करने के लिए गुणों का एक सेट प्रदान करता है। आप इसकी दृश्यता और स्थिति को नियंत्रित करने के लिए प्रारंभिक, एनिमेट और निकास प्रोप का उपयोग कर सकते हैं।

इसे क्रिया में देखने के लिए, फ़्रैमर-मोशन से गति घटक आयात करने के लिए App.jsx के शीर्ष पर निम्न कोड जोड़ें।

आयात { गति } से"फ्रेमर-मोशन";

अगला, वह घटक बनाएं जिसे आप गति घटक के साथ लपेटकर एनिमेट करना चाहते हैं। यह उदाहरण एक div तत्व का उपयोग करता है लेकिन आप किसी भी अन्य तत्व का उपयोग कर सकते हैं जैसे कि बटन, ली, और पी दूसरों के बीच में।

आयात {मोशन, एनिमेटप्रेसेंस} से"फ्रेमर-मोशन"
समारोहअनुप्रयोग() {
वापस करना (
 <>

 प्रारंभिक = {{ एक्स: -100, अस्पष्टता: 0 }}
 चेतन = {{ एक्स: 0, अस्पष्टता: 1 }}
 बाहर निकलें = {{ एक्स: -100, अस्पष्टता: 0 }}
 >
भेजा गया!</p>
 </motion.div>

 </>
 )
}

गति घटक आपको "भेजे गए!" टेक्स्ट वाले div तत्व को एनिमेट करने की अनुमति देता है।

प्रारंभिक, चेतन, और बाहर निकलना गति घटक के गुण घटक के प्रवेश और निकास एनिमेशन को परिभाषित करते हैं। जब घटक प्रारंभ में प्रस्तुत किया जाता है, तो यह -100 की x स्थिति (बाईं ओर ऑफ-स्क्रीन) और 0 की अस्पष्टता से शुरू होगा और अदृश्य हो जाएगा।

एनिमेट गुण परिभाषित करता है कि स्क्रीन में प्रवेश करते समय घटक को कैसे एनिमेट करना चाहिए, इस मामले में x से आगे बढ़ रहा है -100 की स्थिति से 0 की x स्थिति (बाईं ओर से खिसकना) और धीरे-धीरे 1 की अपारदर्शिता में लुप्त हो जाना और पूरी तरह से बन जाना दृश्यमान।

अंत में, बाहर निकलने की संपत्ति परिभाषित करती है कि जब आप इसे स्क्रीन से हटाते हैं तो घटक को कैसे एनिमेट करना चाहिए। इस मामले में, घटक -100 की x स्थिति के साथ स्क्रीन को बाईं ओर स्लाइड करेगा और धीरे-धीरे 0 की अपारदर्शिता में फीका पड़ जाएगा।

जब आप उन्हें रिएक्ट डोम ट्री से हटाते हैं तो आपको मोशन कंपोनेंट को एनिमेटप्रेजेंस कंपोनेंट के साथ फ्रैमर-मोशन से एनिमेट कंपोनेंट्स में लपेटने की जरूरत होती है।

अब जब आपने प्रवेश और निकास एनिमेशन को परिभाषित कर लिया है, तो आप एनीमेशन को ट्रिगर करने के लिए एक बटन जोड़ सकते हैं। यहाँ बटन के साथ संशोधित घटक है:

आयात {चेतन उपस्थिति, गति} से"फ्रेमर-मोशन";
आयात {यूज़स्टेट} से"प्रतिक्रिया";
समारोहअनुप्रयोग() {
कॉन्स्ट [isVisible, setIsVisible] = useState(सत्य);
कॉन्स्ट टॉगल दृश्यता = () => {
 setIsVisible(!isVisible);
 };
वापस करना (
 <>

 {दिखाई दे रहा है && ( <गति.दिव्य
 प्रारंभिक = {{ एक्स: -100, अस्पष्टता: 0 }}
 चेतन = {{ एक्स: 0, अस्पष्टता: 1 }}
 बाहर निकलें = {{ एक्स: -100, अस्पष्टता: 0 }}
 >
भेजा गया!</p>
 </motion.div>)}
 </AnimatePresence>

 सूचित करें
 </button>
 </>
 )
}

यह अपडेटेड कोड एक स्टेट वेरिएबल जोड़ता है जिसे यूजस्टेट हुक का उपयोग करके isVisible कहा जाता है। यह चर ट्रैक करता है कि घटक दृश्यमान होना चाहिए या नहीं। जब आप बटन पर क्लिक करते हैं तो टॉगल विजिबिलिटी फ़ंक्शन isVisible के मान को सही और गलत के बीच टॉगल करता है।

तुम अब हो घटक को सशर्त रूप से प्रस्तुत करना isVisible के मान पर निर्भर करता है। यदि दृश्यमान है तो सत्य है, गति घटक प्रवेश एनीमेशन के साथ प्रस्तुत होगा।

अंत में, उस बटन में एक ऑनक्लिक ईवेंट हैंडलर जोड़ें जो टॉगल दृश्यता फ़ंक्शन को कॉल करता है, दृश्यमान होने की स्थिति को अपडेट करता है, और गति घटक के प्रवेश या निकास एनीमेशन को ट्रिगर करता है।

एक आसान समारोह जोड़ना

एक आसान कार्य समय के साथ एनीमेशन के परिवर्तन की दर को नियंत्रित करता है। यह एक एनीमेशन के समय को निर्दिष्ट करके परिभाषित करता है कि एनीमेशन को कैसे गति देनी चाहिए या धीमी गति से आगे बढ़ना चाहिए। आसान कार्य के बिना, एनीमेशन बहुत तेजी से प्रस्तुत हो सकता है।

फ्रैमर मोशन आसानी से चुनने के लिए कई आसान कार्य प्रदान करता है। इसका उपयोग करने के लिए इसे फ्रैमर-मोशन से App.jsx के शीर्ष पर आयात करें।

आयात {मोशन, ईज़ीइनआउट} से"फ्रेमर-मोशन";

फिर इसे गति घटक में संक्रमण वस्तु में जोड़ें:

 प्रारंभिक = {{ एक्स: -100, अस्पष्टता: 0 }}
 चेतन = {{ एक्स: 0, अस्पष्टता: 1, संक्रमण: { अवधि: 0.5, आराम: ईज़ीइनआउट} }}
 बाहर निकलें = {{ एक्स: -100, अस्पष्टता: 0, संक्रमण: { अवधि: 0.5, आराम: ईज़ीइनआउट} }}
>
भेजा गया!</p>
</motion.div>

अवधि संपत्ति निर्दिष्ट करती है कि एनीमेशन कितने समय तक चलना चाहिए।

सरल एनिमेशन के लिए सादा सीएसएस का प्रयोग करें

3डी एनिमेशन सहित फ्रैमर मोशन के साथ आप बहुत कुछ कर सकते हैं। हालाँकि, एनिमेशन बनाने के लिए आपको हमेशा लाइब्रेरी की आवश्यकता नहीं होती है। होवर ट्रांज़िशन जैसे सरल एनिमेशन के लिए, आप हमेशा सादे CSS का उपयोग कर सकते हैं।