अपने रिएक्ट ऐप को एनिमेशन के साथ जीवंत बनाएं

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

ऐसे कई तरीके हैं जिनसे आप रिएक्ट का उपयोग करके CSS एनिमेशन के साथ काम कर सकते हैं, मूल समाधान से लेकर तृतीय-पक्ष लाइब्रेरी तक।

रिएक्ट में एनिमेशन का उपयोग क्यों करें?

आपके रिएक्ट एप्लिकेशन में एनिमेशन का उपयोग करने के कई कारण हो सकते हैं। कुछ सबसे सामान्य कारणों में शामिल हैं:

• बातचीत करना अधिक स्वाभाविक लगता है. एनिमेशन उपयोगकर्ता की बातचीत को अधिक स्वाभाविक और सहज महसूस कराने में मदद कर सकते हैं। उदाहरण के लिए, यदि आप टॉगल घटक का उपयोग कर रहे हैं, तो आप "चालू" और "बंद" स्थितियों के बीच टॉगल बटन को एनिमेट करना चाह सकते हैं। एक अन्य उदाहरण प्रगति बार है, आप कर सकते हैं एक एनिमेटेड प्रगति पट्टी बनाएँ आपके प्रतिक्रिया ऐप के पृष्ठों के लिए।
• दृश्य प्रतिक्रिया प्रदान करना. एनिमेशन उपयोगकर्ता को दृश्य प्रतिक्रिया प्रदान कर सकते हैं। उदाहरण के लिए, यदि कोई उपयोगकर्ता किसी बटन पर क्लिक करता है, तो हो सकता है कि आप यह इंगित करने के लिए बटन को एनिमेट करना चाहें कि ऐप ने उस क्रिया को पंजीकृत कर लिया है।
  instagram viewer
• उपयोगकर्ता का ध्यान निर्देशित करना. एनिमेशन उपयोगकर्ता के ध्यान को किसी विशेष तत्व की ओर निर्देशित कर सकते हैं। उदाहरण के लिए, यदि आपके पास स्क्रीन पर दिखाई देने वाला एक मोडल डायलॉग है, तो आप उपयोगकर्ता का ध्यान अपनी ओर आकर्षित करने के लिए एनीमेशन का उपयोग करना चाह सकते हैं।
• अत्यावश्यकता की भावना पैदा करनाएनिमेशन अत्यावश्यकता या महत्व की भावना पैदा कर सकते हैं। उदाहरण के लिए, यदि आपके पास एक टाइमर घटक है जो उलटी गिनती कर रहा है, तो हो सकता है कि समय सीमा समाप्त होने पर आप अत्यावश्यकता को दर्शाने के लिए एनीमेशन का उपयोग करना चाहें।

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

द्वारा प्रारंभ करें एक बुनियादी प्रतिक्रिया ऐप बनाना, फिर अपनी पसंद की विधि का पालन करें।

विधि 1: इनलाइन स्टाइल एनिमेशन का उपयोग करना

उदाहरण के लिए, मान लें कि आप एक घटक को एनिमेट करना चाहते हैं ताकि जब आप एक बटन पर क्लिक करें तो यह फीका पड़ जाए। आप इसे निम्न कोड के साथ कर सकते हैं:

आयात प्रतिक्रिया, {घटक} से 'प्रतिक्रिया';
कक्षाफ़ेड इन आउटका विस्तारअवयव{
निर्माता(सहारा) {
बहुत अच्छा(सहारा);
यहराज्य = {
 दिखाई दे रहा है: असत्य
 };
 }
प्रदान करना() {
कॉन्स्ट शैली = {
अस्पष्टता: यह।राज्य।दिखाई दे रहा है? 1: 0,
 संक्रमण: 'अपारदर्शिता 2s'
 };
वापस करना (
<डिव>
<div शैली = {शैलियाँ}>
 हैलो वर्ल्ड!
</div>
<बटन onClick={this.toggleVisibility}>
 टॉगल
</button>
</div>
 );
 }
टॉगल दृश्यता = () => {
यहसेटस्टेट (पिछला राज्य => ({
दिखाई दे रहा है: !पिछलाराज्य।दिखाई दे रहा है
 }));
 }
}
निर्यातगलती करना फ़ेड इन आउट;

इस उदाहरण में, शैली वस्तु में अस्पष्टता और संक्रमण गुण हैं। अस्पष्टता 0 है जब घटक दिखाई नहीं दे रहा है, और 1 जब यह है। ट्रांज़िशन गुण "अस्पष्टता 2s" है, जो अपारदर्शिता को बदलने पर दो सेकंड में संक्रमण का कारण बनेगा।

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

विधि 2: प्रतिक्रिया-एनिमेशन लाइब्रेरी का उपयोग करना

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

प्रतिक्रिया-एनिमेशन का उपयोग करने के लिए, आपको पहले लाइब्रेरी स्थापित करनी होगी:

NPM स्थापित करना प्रतिक्रिया-एनिमेशन --बचाना

आपको एफ़्रोडाइट भी स्थापित करने की आवश्यकता है, जो प्रतिक्रिया-एनिमेशन की निर्भरता है:

NPM स्थापित करना Aphrodite --बचाना

एक बार जब आप पुस्तकालय स्थापित कर लेते हैं, तो आप उन एनिमेशन को आयात कर सकते हैं जिनका आप उपयोग करना चाहते हैं:

आयात { फीका पड़ना, धीरे - धीरे लुप्त होना } से 'प्रतिक्रिया-एनिमेशन';

फिर, आप अपने घटकों में एनिमेशन का उपयोग कर सकते हैं:

आयात प्रतिक्रिया, {घटक} से 'प्रतिक्रिया';
आयात {स्टाइलशीट, सीएसएस} से 'एफ़्रोडाइट';
आयात { फीका पड़ना, धीरे - धीरे लुप्त होना } से 'प्रतिक्रिया-एनिमेशन';
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 फीका होना: {
 एनीमेशननाम: फीकाइन,
 एनीमेशनअवधि: '2s'
 },
 फेड आउट: {
 एनीमेशननाम: फीका आउट,
 एनीमेशनअवधि: '2s'
 }
});
कक्षाफ़ेड इन आउटका विस्तारअवयव{
निर्माता(सहारा) {
बहुत अच्छा(सहारा);
यहराज्य = {
 दिखाई दे रहा है: असत्य
 };
 }
प्रदान करना() {
कॉन्स्ट वर्गनाम = यह.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);
वापस करना (
<डिव>
<div वर्गनाम = {वर्गनाम}>
 हैलो वर्ल्ड!
</div>
<बटन onClick={this.toggleVisibility}>
 टॉगल
</button>
</div>
 );
 }
टॉगल दृश्यता = () => {
यहसेटस्टेट (पिछला राज्य => ({
दिखाई दे रहा है: !पिछलाराज्य।दिखाई दे रहा है
 }));
 }
}
निर्यातगलती करना फ़ेड इन आउट;

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

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

विधि 3: प्रतिक्रिया-सरल-चेतन पुस्तकालय का उपयोग करना

प्रतिक्रिया-सरल-चेतन पुस्तकालय प्रतिक्रिया घटकों में एनिमेशन जोड़ने का एक सरल तरीका प्रदान करता है। यह एक घोषणात्मक एपीआई प्रदान करता है जो जटिल एनिमेशन को परिभाषित करना आसान बनाता है।

लाइब्रेरी का उपयोग करने के लिए, आपको पहले इसे इंस्टॉल करना होगा:

NPM स्थापित करना प्रतिक्रिया-सरल-चेतन --बचाना

फिर, आप इसे अपने घटकों में उपयोग कर सकते हैं:

आयात प्रतिक्रिया, {घटक} से 'प्रतिक्रिया';
आयात {एनिमेट, एनिमेटकीफ्रेम} से "प्रतिक्रिया-सरल-चेतन";
कक्षाअनुप्रयोगका विस्तारअवयव{
 प्रदान करना() {
वापस करना (
<डिव>
<चेतन
 खेल
शुरू={{
 अस्पष्टता: 0
 }}
अंत={{
 अस्पष्टता: 1
 }}
>
<डिव>
 हैलो वर्ल्ड!
</div>
</Animate>
<एनिमेटकीफ्रेम
 खेल
 अवधि = {2}
 मुख्य-फ़्रेम = {[
 {अपारदर्शिता: 0, रूपांतरण: 'ट्रांसलेटएक्स(-100पीएक्स)' },
 {अपारदर्शिता: 1, रूपांतरण: 'ट्रांसलेटएक्स(0पीएक्स)' }
 ]}
>
<डिव>
 हैलो वर्ल्ड!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
निर्यातगलती करना अनुप्रयोग;

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

एनिमेटकीफ्रेम घटक दो सेकंड में एक दिव्य तत्व को एनिमेट करता है। keyframes ऐरे एनीमेशन के प्रारंभ और अंत राज्यों को निर्दिष्ट करता है। पहले मुख्य-फ़्रेम में अपारदर्शिता 0 है और TranslateX मान -100px है। दूसरे मुख्य-फ़्रेम में अपारदर्शिता 1 और TranslateX का मान 0px है।

एनिमेशन के साथ उपयोगकर्ता जुड़ाव बढ़ाएँ

अब आप कुछ ऐसे तरीके जानते हैं जिनसे आप अपने रिएक्ट एप्लिकेशन में एनिमेशन का उपयोग कर सकते हैं। आप अपने एप्लिकेशन के साथ उपयोगकर्ता जुड़ाव बढ़ाने के लिए एनिमेशन का उपयोग कर सकते हैं।

उदाहरण के लिए, आप किसी कार्य को पूरा करने के लिए उपयोगकर्ता को पुरस्कृत करने के लिए एनीमेशन का उपयोग करना चाह सकते हैं। यह एक छोटे "स्पिनर" एनीमेशन या एक अधिक जटिल एनीमेशन के रूप में सरल कुछ हो सकता है जो तब चलता है जब उपयोगकर्ता किसी गेम में एक स्तर पूरा करता है।

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