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

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

हम रिएक्टिव नेटिव में निरंतर एनीमेशन बनाने के लिए एनिमेटेड.लूप () पद्धति का उपयोग करने का तरीका जानेंगे और सीखेंगे कि इन एनिमेशन को कैसे अनुकूलित और बढ़ाया जाए।

Animated.loop() विधि को समझना

Animated.loop() मेथड का उपयोग करने के लिए, आपको सबसे पहले एक बनाना होगा एनिमेटेड। कीमत वस्तु। यह मान एनीमेशन लूप के प्रत्येक फ्रेम पर अपडेट होता है और इसका उपयोग लक्ष्य घटक को एनिमेट करने के लिए किया जाएगा।

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

इस कॉन्फ़िगरेशन ऑब्जेक्ट में गुण शामिल हो सकते हैं जैसे अवधि, आसान, और देरी, जो निर्धारित करते हैं कि एनिमेशन कैसा व्यवहार करेगा।

अपने एनिमेशन को लूप करना

डिफ़ॉल्ट रूप से, Animated.loop() विधि एनीमेशन का एक अनंत लूप बनाती है, जिसका अर्थ है कि एनीमेशन मैन्युअल रूप से बंद होने तक दोहराना जारी रखेगा। हालाँकि, आप सेटिंग करके एनीमेशन लूप के लिए एक अवधि निर्दिष्ट कर सकते हैं पुनरावृत्तियों एनीमेशन कॉन्फ़िगरेशन ऑब्जेक्ट में संपत्ति।

निम्न उदाहरण दिखाता है कि लूप रोटेशन एनीमेशन बनाने के लिए एनीमेशन.लूप () का उपयोग कैसे करें:

आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';
आयात { स्टाइलशीट, व्यू, एनिमेटेड, इमेज} से'प्रतिक्रिया-मूल';
निर्यातगलती करनासमारोहअनुप्रयोग() {
कॉन्स्ट [स्पिनवैल्यू] = यूज़स्टेट (नया एनिमेटेड। कीमत(0));
 उपयोग प्रभाव (() => {
कॉन्स्ट स्पिन = स्पिनवैल्यू.इंटरपोलेट ({
 निवेश सीमा: [0, 1],
 आउटपुट रेंज: ['0डिग्री', '360डिग्री'],
 });
 एनिमेटेड लूप (
 एनिमेटेड.टाइमिंग (
 स्पिनवैल्यू,
 {
 महत्व के लिए: 1,
 अवधि: 2000,
 मूल चालक का उपयोग करें: सत्य,
 }
 )
 )।शुरू करना();
 }, []);
वापस करना (

 शैली = {{ चौड़ाई: 200, ऊंचाई: 200, परिवर्तन: [{ घुमाएँ: spinValue }] }}
 स्रोत = {{ उरी: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 कंटेनर: {
 मोड़ना: 1,
 संरेखित आइटम: 'केंद्र',
 औचित्य सामग्री: 'केंद्र',
 },
});

इस उदाहरण में, हम एक एनिमेटेड बनाते हैं। वैल्यू ऑब्जेक्ट कहा जाता है spinValue और इसका प्रारंभिक मान 0 पर सेट करें। हम फिर कॉल करते हैं कुंडली() विधि पर एनिमेटेड.टाइमिंग () ऑब्जेक्ट, जो स्टेट स्पिनवैल्यू को इसके तर्क के रूप में लेता है। Animated.timing() ऑब्जेक्ट बताता है कि एनीमेशन समय के साथ कैसे आगे बढ़ेगा, और इस मामले में, यह एक इमेज को 360 डिग्री तक घुमाता है।

लूप की अवधि निर्धारित करने के लिए, हमने a पास किया है अवधि एनिमेटेड.टाइमिंग () ऑब्जेक्ट को संपत्ति, जो निर्धारित करेगी कि लूपिंग से पहले एनीमेशन कितनी देर तक चलेगा। हमने अवधि संपत्ति को 2000 पर सेट किया है, जिसका अर्थ है पुनः आरंभ करने से 2 सेकंड पहले।

पास करके आप यह भी सेट कर सकते हैं कि एनिमेशन को कितनी बार लूप करना चाहिए पुनरावृत्तियों लूप() विधि के लिए संपत्ति।

उदाहरण के लिए, मान लीजिए कि आप चाहते हैं कि ऐनिमेशन रुकने से पहले पांच बार लूप करे। उस स्थिति में, आप Animated.loop() के साथ कॉल कर सकते हैं पुनरावृत्तियाँ: 5. यदि आप चाहते हैं कि ऐनिमेशन अनिश्चित काल के लिए लूप हो, तो आप इसे छोड़ सकते हैं पुनरावृत्तियों संपत्ति पूरी तरह से।

एनिमेशन.लूप () का उपयोग करके, इसकी अवधि निर्धारित करके, और सीएसएस शैली को ठीक से लागू करना लौटे हुए दृश्य ऑब्जेक्ट के लिए, आप रिएक्ट नेटिव में चिकने लूप वाले एनिमेशन बना सकते हैं।

कॉम्प्लेक्स एनिमेशन के साथ काम करना

जटिल एनीमेशन के साथ काम करना उतना आसान नहीं है जितना कि एकल एनीमेशन के साथ काम करना। उन्हें यह सुनिश्चित करने के लिए आमतौर पर थोड़ा और काम करने की आवश्यकता होती है कि वे उम्मीद के मुताबिक व्यवहार करें।

यहां दो टिप्स दिए गए हैं जो रिएक्ट नेटिव में जटिल एनिमेशन को लूप करते समय आपकी मदद करेंगे:

1. एनिमेशन को छोटे भागों में तोड़ें

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

2. Animated.sequence() विधि का प्रयोग करें

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

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

अपने एनिमेशन के साथ प्रयोग करें

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