विशेष रूप से ReactJS / React Native-Developer पाठ्यक्रम के छात्रों के लिए लेख का अनुवाद तैयार किया गया था।
ऐसे मोबाइल एप्लिकेशन की कल्पना करना मुश्किल है जिसमें कोई एनीमेशन न हो। वेब पर एनिमेशन आम तौर पर सरल होते हैं, यदि वे सभी में मौजूद हों (अधिकतम - एक पृष्ठ दूसरे को प्रतिस्थापित करता है)। मोबाइल अनुप्रयोगों में एनिमेशन को पूरी तरह से अलग ध्यान देने की आवश्यकता है।
CSS3 में एक अपेक्षाकृत सरल एपीआई है जो आपको सरल एनिमेशन बनाने की अनुमति देता है। लेकिन रिएक्ट नेटिव में आपके पास यह टूल नहीं है। हां, अगर ऐसा होता, तो भी यह पर्याप्त नहीं होता।
तो आपको क्या जानने की जरूरत है कि क्या आप रिएक्ट नेटिव के साथ काम कर रहे हैं और आपको पूर्ण विकसित एनिमेशन को लागू करने की आवश्यकता है?
रिएक्ट नेटिव में ऐनिमेटेड जैसा टूल होता है, लेकिन यह कम से कम पहले तो डराने वाला लगता है।
इसलिए, यदि आप चाहते हैं, तो तीन "चीजों के समूह" या "ब्लॉक" हैं, जिनके बारे में आपको एनीमेशन के साथ काम करने की आवश्यकता है।
ब्लॉक 0: परिवर्तन की आवश्यकता
एनिमेशन एक राज्य से दूसरे में एक बदलाव है:
- "छिपा हुआ" से "दृश्यमान" तक संक्रमण;
- एक सर्कल से एक वर्ग में संक्रमण।
एनीमेशन से पहले और बाद में क्या दिखाना है, इसके बारे में सोचें।
बदलाव के बारे में सोचें और इसके लिए आपको किन शैलियों को बदलने की आवश्यकता है:
- क्या वस्तु पारदर्शिता में बदलाव के साथ दिखाई देनी चाहिए, या क्या यह ऊपर से सिर्फ "गिरावट" है?
- क्या सर्कल को केवल एक वर्ग में बदलना चाहिए, या प्रक्रिया के बीच में एक त्रिकोण बन जाना चाहिए?
ब्लॉक 1: एक दृश्य स्थिति जिसे Animated.Value रूप में जाना जाता है। Animated.Value
तार्किक दृष्टिकोण से, किसी भी घटक को या तो दिखाया जा सकता है या छिपाया जा सकता है - ये "सत्य" और "असत्य" के अर्थ हैं, कोई मध्य आधार नहीं है। एक राज्य के रूप में, वस्तु का सच या गलत होना दिखाया गया है।
एक अच्छे उपयोगकर्ता इंटरफ़ेस में, ऑब्जेक्ट अचानक से नहीं छुपते हैं और अचानक प्रकट नहीं होते हैं। वे धीरे-धीरे प्रकट होते हैं, जिससे उपयोगकर्ता इंटरफ़ेस को समझने में मदद करता है।
इस प्रकार, यह स्पष्ट हो जाता है कि दृश्य स्थिति एक सच्चे राज्य और झूठे राज्य के बीच कुछ हो सकती है।
ऐसा कैसे?
हम दृश्य राज्यों की एक श्रृंखला का प्रतिनिधित्व करने के लिए एक और चर पेश कर सकते हैं। हमें एक संख्या होने की आवश्यकता है, क्योंकि हमारे पास कोई भी तार्किक स्थिति नहीं है, संख्याएं हमें मध्यवर्ती मूल्यों का प्रतिनिधित्व करने में मदद करती हैं।
this._shown = new Animated.Value(0);
जबकि तार्किक स्थिति द्विआधारी हो सकती है (यानी 1 या 0
true ), दृश्य स्थिति एक फ्लोटिंग-पॉइंट संख्या है।
ब्लॉक 2: संक्रमण जिसे एनिमेटिडटिमिंग कहा जाता है
मान लें कि एक घटक छिपा हुआ है: इसका मतलब है कि इसकी दृश्यता मापदंडों की तार्किक स्थिति झूठी होगी, और दृश्य स्थिति 0.0 भी होगी। लेकिन क्या होता है जब हम एक घटक दिखाना चाहते हैं? तार्किक स्थिति तुरंत सच हो जानी चाहिए, जबकि दृश्य स्थिति धीरे-धीरे 0.1, 0.2, ... और अंत में पूरी तरह से 1.0 पर पास होनी चाहिए।
ऐसा करने के लिए, हमें दृश्य स्थिति को 1.0 में बदलने के तरीके को बताने की आवश्यकता है।
और ऐसे तरीके हैं। वास्तव में, यहां तक कि कुछ भी हैं।
सबसे आसान तरीका मूल रूप से है:
Animated.timing(this._shown, { toValue: 1, duration: 300, }).start();
यहां, हम कहते हैं कि 300 एमएस अंतराल में
_shown को
1.0 में बदलने के लिए
Animated ।
कई संक्रमणों को व्यवस्थित करने के लिए अन्य संक्रमण और तरीके हैं, लेकिन अब हम
Animated.timing उपयोग कर सकते हैं।
ब्लॉक 3: पिक्सेल जिन्हें Animated.View और interpolate रूप में जाना जाता interpolate
0.0 और
1.0 बीच हमारे
_shown बदलाव का मतलब कुछ भी नहीं है अगर हम उन्हें नहीं देख सकते हैं। तो हम यह कैसे करते हैं?
बाल घटक की पारदर्शिता को निर्धारित करने के लिए हमें किसी तरह
_shown का उपयोग
_shown होगा।
मान लीजिए कि एनिमेशन के साथ काम शुरू करने से पहले हमारे पास यह कोड था:
<View style={{ opacity: this.state.shown ? 1 : 0 }}> <SomeComponent /> </View>
जब हम घटक को छिपाते हैं और जब हम इसे दिखाते हैं तो हम
0 पारदर्शिता सेट करते हैं।
क्या हम
0 से
1 तक संक्रमण को चेतन करने के लिए मौजूदा
Animated.Value और
_shown का उपयोग कर सकते हैं?
शैली एनीमेशन
हम किसी भी
Animated.Value उपयोग कर सकते हैं जब हम शैलियों के साथ काम करते हैं।
हमें केवल
View को
Animated.View बदलने की आवश्यकता है, और अब हमारे पास निम्नलिखित हैं:
const opacity = this._shown;
क्या यह एनिमेशन के बारे में एक लेख नहीं है? अब भी कोई चित्र क्यों नहीं हैं?
एक और बात: प्रक्षेप
यह शब्द डरावना लगता है, लेकिन यह विचार ही काफी सरल है। इंटरपोलेशन हमें 0 और 1 के भीतर एक दृश्य स्थिति बनाए रखने की अनुमति देता है, लेकिन कुछ और "मिलान" की संभावना देता है।
यह कहें कि, हम केवल एक विरासत में मिला हुआ घटक बनाने के बजाय, अपने घटक को "ऊपर से बाहर छोड़ना" चाहते हैं। और हम ऐसा कर सकते हैं कि छिपे हुए घटक को 40px अधिक रखकर और उसके आंदोलन को वांछित स्थिति में एनिमेट किया जाए, जब राज्य दृश्यमान में बदल जाता है।
सामान्य-
interpolate कॉल का उपयोग करते हुए -40 से 0 तक के मानों को हम 0 से 1 तक "मेल" कर सकते हैं:
const top = this._shown.interpolate({ inputRange: [0, 1], outputRange: [-40, 0], });
यह एक नया
Animated.Value बनाएगा, जिसका मूल्य -40 से 0 तक होगा।
दूसरे शब्दों में, यह
-40 तब होगा जब
_shown 0 ,
-20 जब
_shown =
0.5 और
0 जब
_shown 1.0 ।
डार्क सीक्रेट: interpolate साथ आप रंगों और डिग्री के लिए मान भी बदल सकते हैं।निष्कर्ष:
- दृश्य स्थिति एक संख्यात्मक मूल्य है, इसे एक शैली से दूसरे में संक्रमण को प्रतिबिंबित करना चाहिए।
Animated.Value आपको दृश्य स्थिति के संख्यात्मक मान को प्रतिबिंबित करने की अनुमति देता है।Animated.timing का उपयोग Animated.Value को किसी अन्य नंबर पर ले जाने के लिए किया जा सकता है।Animated.Value का उपयोग शैलियों के लिए किया जा सकता है जब View को Animated.View साथ प्रतिस्थापित किया जाता है।
इंटरपोलेशन आपको एक
Animated.Value श्रेणी को मैप करने की अनुमति देता है।
Animated.Value रेंज को दूसरे में, उदाहरण के लिए
0 से
1 तक की सीमा
5 से
25 तक या ब्लैक और ग्रीन के बीच की रेंज तक।
सूत्रों का कहना है:
इस लेख में, हम रिएक्ट नेटिव में एनीमेशन की प्रधानता के साथ मिले और मूल विचार की समझ हासिल की। इस विषय को अधिक गहराई से जानने में आपकी सहायता के लिए आप संसाधन पा सकते हैं: