रिएक्ट नेटिव एक एनिमेशन घटक प्रदान करता है जो उपलब्ध घटकों में अधिक अन्तरक्रियाशीलता जोड़ने में मदद करता है। एनीमेशन घटक का उपयोग दृश्य, पाठ, छवि, स्क्रॉलव्यू, फ्लैटलिस्ट और सेक्शनलिस्ट को चेतन करने के लिए किया जा सकता है।
रिएक्ट नेटिव दो प्रकार के एनिमेशन प्रदान करता है -
- एनिमेटेड एपीआई
- लेआउटएनीमेशन
एनिमेटेड API
एनिमेटेड एपीआई इनपुट/आउटपुट के आधार पर समय आधारित एनीमेशन प्रदान करने में मदद करता है। इस उदाहरण में, हम एनिमेटेड टाइमिंग एपीआई का उपयोग करके बॉक्स की चौड़ाई और ऊंचाई को गतिशील रूप से बदल देंगे।
ऐनिमेशन के साथ काम करने के लिए, घटक को नीचे दिखाए अनुसार आयात करें -
'प्रतिक्रिया-मूल' सेआयात { एनिमेटेड } एनिमेशन के साथ काम करने के लिए, हमें इसे पहले कॉन्फ़िगर करना होगा जैसा कि नीचे दिखाया गया है -
एनिमेटेड.टाइमिंग () फ़ंक्शन आसान कार्यों का उपयोग करता है और दिए गए मान को समय पर एनिमेटेड किया जाता है। उपयोग किया जाने वाला डिफ़ॉल्ट ईजिंग फ़ंक्शन easyInOut है, आप एक अलग का उपयोग कर सकते हैं या अपना खुद का परिभाषित कर सकते हैं।
एनिमेटेड.टाइमिंग () फ़ंक्शन की संरचना इस प्रकार है -
Animated.timeing(animateparam, { toValue:100, easing:easingfunc, अवधि:timeinseconds}).start(); उदाहरण में हम व्यू की चौड़ाई और ऊंचाई को एनिमेट करेंगे, इसलिए मैंने इसे पहले इनिशियलाइज़ किया है -
एनिमेटेडविड्थ और एनिमेटेड हाइट को कॉम्पोनेंटविलमाउंट के अंदर इस प्रकार आरंभ किया गया है -
componentWillMount =() => { this.animatedWidth =new Animated.Value(50) this.animatedHeight =new Animated.Value(100)} बाद में एनिमेटेड.टाइमिंग फ़ंक्शन को इस प्रकार जोड़ा गया -
Animated.timeing(this.animatedWidth, {toValue:200, अवधि:1000})।Start()Animated.timeing(this.animatedHeight, {toValue:500, अवधि:500})।स्टार्ट() एनीमेशन
TouchableOpacity घटक का उपयोग प्रेस पर किया जाता है, जिसमें से functionthis.animatedBox कहा जाता है जिसमें एनिमेटेड.टाइमिंग फ़ंक्शन होता है जो एनीमेशन करेगा। TouchableOpacitycomponent दबाए जाने पर दृश्य की चौड़ाई और ऊंचाई बदल जाएगी।
उदाहरण
<पूर्व>आयात प्रतिक्रिया, {घटक} से 'प्रतिक्रिया' आयात {देखें, स्टाइलशीट, एनिमेटेड, टच करने योग्य अपारदर्शिता} 'प्रतिक्रिया-मूल' वर्ग एनिमेशन से घटक का विस्तार होता है {घटकविलमाउंट =() => {यह। एनिमेटेडविड्थ =नया एनिमेटेड। मूल्य ( 50) यह। एनिमेटेड हाइट =नया एनिमेटेड। वैल्यू (100)} एनिमेटेडबॉक्स =() => {एनिमेटेड.टाइमिंग (यह। एनिमेटेड विड्थ, {टू वैल्यू:200, अवधि:1000})। प्रारंभ () एनिमेटेड। समय (यह। एनिमेटेड हाइट , {toValue:500, अवधि:500})। प्रारंभ ()} प्रस्तुत करना () { const एनिमेटेड स्टाइल ={चौड़ाई:यह। एनिमेटेड विड्थ, ऊंचाई:यह। एनिमेटेड हाइट} वापसी ( this.animatedBox}>आउटपुट
IOS और Android डिवाइस पर निम्नलिखित दृश्य है -
धूसर आयताकार बॉक्स को एनिमेट करते हुए देखने के लिए उसे स्पर्श करें -
लेआउटएनीमेशन API
लेआउटएनीमेशन आपको एनिमेटेड एपीआई की तुलना में अधिक नियंत्रण देता है और आपको वैश्विक स्तर पर ऐसे एनिमेशन बनाने और अपडेट करने की अनुमति देता है जो अगले रेंडर/लेआउट चक्र के लिए दृश्यों में उपयोग किए जाते हैं।
लेआउट एनीमेशन एपीआई के साथ काम करने के लिए आपको इसे निम्नानुसार आयात करना होगा -
'react-native' से आयात करें { LayoutAnimation };: उदाहरण:LayoutAnimation का उपयोग करना
लेआउटएनीमेशन के लिए Android में काम करने के लिए आपको निम्नलिखित पंक्तियों को जोड़ना होगा -
UIManager.setLayoutAnimationEnabledExperimental &&UIManager.setLayoutAnimationEnabledExperimental(true); 'react' से इम्पोर्ट रिएक्ट करें; इम्पोर्ट {नेटिव मॉड्यूल्स, लेआउटएनीमेशन, टेक्स्ट, टच करने योग्य ओपेसिटी, स्टाइलशीट, व्यू,} 'रिएक्ट-नेटिव' से; कॉन्स्ट { UIManager; UIManager} =नेटिव मॉड्यूल्स .setLayoutAnimationEnabledExperimental &&UIManager.setLayoutAnimationEnabledExperimental(true); निर्यात डिफ़ॉल्ट वर्ग ऐप React.Component {state ={w:50, h:50,}; एनिमेटसर्कल =() => {लेआउटएनीमेशन.स्प्रिंग (); this.setState ({w:this.state.w + 10, h:this.state.h + 10})} रेंडर () {वापसी ( <देखें शैली={[styles.circle, {चौड़ाई:this.state.w, ऊंचाई:this.state.h}]} /> ); } } कास्ट स्टाइल =StyleSheet.create ({कंटेनर:{फ्लेक्स:1, alignItems:'सेंटर', जस्टिफाई कंटेंट:'सेंटर',}, सर्कल:{चौड़ाई:200, हाइट:200, बॉर्डररेडियस:'50%', बैकग्राउंड कलर :'हरा', },}); आउटपुट
मंडली पर टैप करें और इसे एनिमेट करते हुए देखें।
