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

उपयोगकर्ता अनुभव को जीवंत बनाने के लिए मोबाइल ऐप्स अक्सर एनीमेशन का उपयोग करते हैं। लेकिन उच्च-गुणवत्ता वाले एनिमेशन बनाना एक चुनौती हो सकती है।

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

प्रतिक्रियाशील मूल एनिमेशन

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

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

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

एनीमेशन अवधि समायोजित करना

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

अवधि एक एनीमेशन को पूरी तरह से चलने में लगने वाले समय को संदर्भित करती है। डिफ़ॉल्ट रूप से, रिएक्ट नेटिव में एनिमेशन की अवधि 500 ​​मिलीसेकंड होती है, लेकिन आप उन्हें तेज या धीमी गति से चलाने के लिए समायोजित कर सकते हैं।

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

साथ एनीमेशन.टाइमिंग () विधि, आप अपनी आवश्यकताओं को पूरा करने के लिए एक कस्टम समयबद्ध एनीमेशन बना सकते हैं।

यहां एक साधारण फ़ेड-इन एनिमेशन में कस्टम अवधि जोड़ने का एक उदाहरण दिया गया है:

आयात प्रतिक्रिया, {useRef} से'प्रतिक्रिया';
आयात {एनिमेटेड, देखें} से'प्रतिक्रिया-मूल';
कॉन्स्ट फ़ेडइन व्यू = (रंगमंच की सामग्री) => {
कॉन्स्ट फ़ेडएनिम = यूसेरफ (नया एनिमेटेड। कीमत(0))।मौजूदा; 
 प्रतिक्रिया। उपयोग प्रभाव (() => {
 एनिमेटेड.टाइमिंग (
 फीकाएनिम,
 {
 महत्व के लिए: 1,
 अवधि: 2000, // सेट कस्टम अवधि
 मूल चालक का उपयोग करें: सत्य,
 }
 )।शुरू करना();
 }, [फेडएनिम]);
वापस करना (
 शैली = {{
... सहारा शैली,
 अपारदर्शिता: फीकाएनीम,
 }}
 >
 {सहारा.बच्चों}
 </Animated.View>
 );
}
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (
मोड़ना: 1, संरेखित करें: 'केंद्र', सामग्री: 'केंद्र'}}>
चौड़ाई: 250, ऊंचाई: 50, पृष्ठभूमि का रंग: 'पाउडरब्लू'}}>
फ़ॉन्ट आकार: 28, पाठ संरेखित: 'केंद्र', अंतर: 10}}>लुप्त होती में</Text>
 </FadeInView>
 </View>
 );
}

अपने एनीमेशन के लिए अवधि चुनते समय, गति और सहजता के बीच सही संतुलन बनाना महत्वपूर्ण है।

जब आप पहली बार प्रयोग कर रहे हों तो लंबी अवधि के साथ शुरू करने का प्रयास करें। एक लंबी अवधि आपको ईज़िंग फ़ंक्शन को समायोजित करने और अपने एनीमेशन को परिशोधित करने के लिए अधिक समय देगी। समग्र प्रभाव से संतुष्ट होने के बाद आप बाद में कभी भी अवधि को छोटा कर सकते हैं।

आसान कार्यों का प्रयोग करें

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

एक आसान कार्य का उपयोग करने का यह उदाहरण लें:

आयात प्रतिक्रिया, {useRef} से'प्रतिक्रिया';
आयात {एनिमेटेड, देखें} से'प्रतिक्रिया-मूल';
कॉन्स्ट फ़ेडइन व्यू = (रंगमंच की सामग्री) => {
कॉन्स्ट फ़ेडएनिम = यूसेरफ (नया एनिमेटेड। कीमत(0))।मौजूदा; 
 प्रतिक्रिया। उपयोग प्रभाव (() => {
 एनिमेटेड.टाइमिंग (
 फीकाएनिम,
 {
 महत्व के लिए: 1,
 अवधि: 2000,
 सहजता: एनिमेटेड.ईजआउट, // यहां ईजिंग फंक्शन का उपयोग करें
 मूल चालक का उपयोग करें: सत्य,
 }
 )।शुरू करना();
 }, [फेडएनिम]);
वापस करना (
 शैली = {{
... सहारा शैली,
 अपारदर्शिता: फीकाएनीम,
 }}
 >
 {सहारा.बच्चों}
 </Animated.View>
 );
}
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (
मोड़ना: 1, संरेखित करें: 'केंद्र', सामग्री: 'केंद्र'}}>
चौड़ाई: 250, ऊंचाई: 50, पृष्ठभूमि का रंग: 'पाउडरब्लू'}}>
फ़ॉन्ट आकार: 28, पाठ संरेखित: 'केंद्र', अंतर: 10}}>फ़ेड इन</Text>
 </FadeInView>
 </View>
 );
}

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

आप अपने एनिमेशन को सहज बनाने के लिए विभिन्न प्रकार के ईजिंग कार्यों का उपयोग कर सकते हैं, जिसमें ईज-इन, ईज-आउट और ईज-इन-आउट शामिल हैं।

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

कीफ़्रेम जटिल एनिमेशन के साथ मदद करते हैं

मुख्य-फ़्रेम ऐसे मार्कर होते हैं जो आपको अपने ऐनिमेशन में उन क्षणों को इंगित करने देते हैं जहाँ आप स्थिति, स्केल या घुमाव जैसी संपत्तियों में परिवर्तन करना चाहते हैं। यह एनीमेशन को निर्देशित करने के लिए समय में बिंदुओं को चिह्नित करने जैसा है।

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

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

उदाहरण के लिए, मान लें कि आप एक वर्ग को एक सेकंड की अवधि में (0, 0) की प्रारंभिक स्थिति से (100, 100) की समाप्ति स्थिति तक एनिमेट करना चाहते हैं।

आप इस तरह कीफ़्रेम की एक सरणी बना सकते हैं:

कॉन्स्ट मुख्य-फ़्रेम = [
 { एक्स: 0, वाई: 0 },
 { एक्स: 50, वाई: 50 },
 { एक्स: 100, वाई: 100 },
];

इस मामले में, तीन मुख्य-फ़्रेम हैं: एक एनिमेशन के प्रारंभ में, एक बीच में और एक अंत में। फिर आप मुख्य-फ़्रेम के बीच सहज एनिमेशन बनाने के लिए, 1,000 मिलीसेकंड की अवधि के साथ-साथ कीफ़्रेम की इस सरणी को अपनी एनिमेशन लाइब्रेरी में पास कर सकते हैं।

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

हार्डवेयर त्वरण के साथ डिवाइस का लाभ उठाएं

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

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

हार्डवेयर त्वरण सभी उपकरणों पर उपलब्ध नहीं हो सकता है, इसलिए सर्वश्रेष्ठ प्रदर्शन सुनिश्चित करने के लिए विभिन्न प्रकार के वास्तविक उपकरणों पर अपने एनिमेशन का परीक्षण करना महत्वपूर्ण है।