प्रतिक्रियाशील मूल में गतिशील एनिमेशन के लिए एनिमेटेड.स्प्रिंग () विधि का उपयोग करना

इस रिएक्ट लाइब्रेरी और इन उपयोगी युक्तियों के साथ बाउंसी एनिमेशन में महारत हासिल करें।

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

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

गतिशील एनिमेशन क्या हैं?

डायनेमिक एनिमेशन ऐसे एनिमेशन होते हैं जहां एनिमेटेड ऑब्जेक्ट्स के मूवमेंट प्री-प्रोग्राम्ड नहीं होते हैं। आप उन्हें उपयोगकर्ता की सहभागिता या पर्यावरण में परिवर्तन के जवाब में शुरू कर सकते हैं। में तकनीक सर्वाधिक लोकप्रिय है वीडियो गेम एनिमेशन, सोशल मीडिया एप्लिकेशन, या इंटरैक्टिव मीडिया के अन्य रूप।

गतिशील एनिमेशन उपयोगकर्ताओं के लिए एक अधिक immersive और आकर्षक अनुभव प्रदान कर सकते हैं, क्योंकि यह अप्रत्याशित और उत्तरदायी आंदोलनों की अनुमति देता है जो कई कारकों के आधार पर बदल सकते हैं।

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

instagram viewer

एनिमेटेड वसंत () एपीआई द्वारा प्रदान की जाने वाली विधि एक गतिशील प्रभाव पैदा करते हुए प्रतिक्रियाशील मूल वस्तुओं को एनिमेट कर सकती है।

एनिमेशन को नियंत्रित करना

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

उन्हीं में से एक तरीका है रुकना(), जिसके कारण एनिमेशन अपने वर्तमान मान पर रुक जाता है। यह विधि तब उपयोगी होती है जब आपको किसी एनीमेशन को रद्द करने या उसकी प्रारंभिक अवस्था में रीसेट करने की आवश्यकता होती है।

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

कॉन्स्ट स्टॉपएनीमेशन = () => {
 स्थिति.रोकें (कीमत => {
 स्थिति.सेटवैल्यू(0);
 });
};

ध्यान दें कि आप कैसे उपयोग कर सकते हैं मूल्य ते करना() स्थिति मान को उसकी प्रारंभिक अवस्था में रीसेट करने की विधि 0.

आपके लिए उपलब्ध एक और तरीका है रीसेट(), जो एनीमेशन को उसकी प्रारंभिक अवस्था में लौटाता है। यह विधि तब उपयोगी होती है जब आपको एनीमेशन को पुनरारंभ करने की आवश्यकता होती है।

वास्तविक दुनिया के अनुप्रयोग

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

सबसे पहले, गेंद की स्थिति को ट्रैक करने के लिए एक स्टेट वैरिएबल बनाएं:

आयात प्रतिक्रिया, {useState} से'प्रतिक्रिया';
आयात {एनिमेटेड} से'प्रतिक्रिया-मूल';कॉन्स्ट ऐप = () => {
कॉन्स्ट [स्थिति, सेटपोजिशन] = यूज़स्टेट (नया एनिमेटेड। कीमत(0));

वापस करना (
परिवर्तन: [{ अनुवाद वाई: स्थिति}]}}>
 {/ * बॉल कंपोनेंट यहां * /}
 </Animated.View>
 );
};

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

अगला, एनीमेशन फ़ंक्शन बनाएं जो गेंद को गिरने और उछाल देगा:

कॉन्स्ट स्टार्टएनीमेशन = () => {
 एनिमेटेड.वसंत (स्थिति, {
 महत्व के लिए: 300,
 टकराव: 1,
 तनाव: 10,
 मूल चालक का उपयोग करें: सत्य,
 })।शुरू करना(() => {
 एनिमेटेड.वसंत (स्थिति, {
 महत्व के लिए: 0,
 टकराव: 1,
 तनाव: 10,
 मूल चालक का उपयोग करें: सत्य,
 })।शुरू करना();
 });
};

उपयोग एनिमेटेड वसंत () एक एनीमेशन बनाने के लिए जो गेंद को 0 की प्रारंभिक स्थिति से 300 की अंतिम स्थिति में ले जाएगा। उल्लिखित करना टकराव और तनाव सेट करते समय गेंद के उछाल प्रभाव को नियंत्रित करने के लिए मान नेटिवड्राइवर का उपयोग करें को सत्य प्रदर्शन में सुधार करने के लिए।

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

वापस करना (

परिवर्तन: [{ अनुवाद वाई: स्थिति}]}}>
 {/ * बॉल कंपोनेंट यहां * /}
 </Animated.View>
 </TouchableWithoutFeedback>
);

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

इस कोड के साथ, आपके पास गिरने वाली गेंद का एनीमेशन होना चाहिए एनिमेटेड वसंत ().