उपयोगकर्ता द्वारा आरंभ किए गए एनिमेशन के साथ आकर्षक रिएक्टिव नेटिव ऐप्स कैसे बनाएं

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

रिएक्टिव नेटिव में टच इवेंट्स और जेस्चर को समझना

प्रतिक्रियाशील मूल तत्व उपयोगकर्ता के स्पर्श और इशारों का जवाब देने में सक्षम हैं। रिएक्टिव नेटिव जेस्चर रिस्पोंडर इन स्पर्श घटनाओं और इशारों का पता लगा सकता है।

जेस्चर रिस्पॉन्डर इस सुविधा के साथ रिएक्ट नेटिव लाइब्रेरी के भीतर बहुत सारे घटकों को तैयार करता है, जैसे बटन और TouchableOpacity घटक जो प्रेस या टैप का जवाब देते हैं।

जेस्चर रिस्पॉन्डर, हालांकि, केवल सरल इशारों के साथ सरल घटकों को तैयार करता है। अधिक जटिल स्पर्श घटनाओं को संभालने और उनका पता लगाने के लिए, रिएक्टिव नेटिव PanResponder API का उपयोग करता है। यह आपको कस्टम जेस्चर पहचानकर्ता बनाने की अनुमति देता है जो अधिक जटिल स्पर्श इंटरैक्शन का जवाब देते हैं, जैसे पिंच करना, घुमाना या खींचना।

PanResponder API परिभाषित कर सकता है कि आपका ऐप किसी भी विशिष्ट स्पर्श ईवेंट के लिए कॉलबैक सेट करके उन्हें प्राप्त करने पर इन इशारों का जवाब कैसे देगा।

टच इवेंट्स के साथ ट्रिगरिंग एनिमेशन

टच इवेंट एक उपयोगकर्ता के मोबाइल ऐप के साथ होने वाली बातचीत का सबसे आम रूप है। आप विशिष्ट उपयोगकर्ता स्पर्श ईवेंट के जवाब में कुछ एनिमेशन को ट्रिगर करना चुन सकते हैं।

साथ विभिन्न घटकों को एनिमेट करने के लिए रिएक्टिव नेटिव का एनिमेटेड एपीआई, आप उपयोगकर्ता इंटरैक्शन के आधार पर एनिमेशन ट्रिगर करने के लिए टच इवेंट का पता लगा सकते हैं और उनके साथ काम कर सकते हैं।

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

आयात प्रतिक्रिया, {useState, useRef} से'प्रतिक्रिया';
आयात {देखें, TouchableOpacity, एनिमेटेड} से'प्रतिक्रिया-मूल';
कॉन्स्ट एनिमेटेड बटन = () => {
// एनिमेटेड तक पहुँचने के लिए useRef का उपयोग करें। मान उदाहरण
कॉन्स्ट अस्पष्टता मूल्य = उपयोग रेफरी (नया एनिमेटेड। कीमत(1))।मौजूदा;
कॉन्स्ट हैंडलप्रेस = () => {
 एनिमेटेड.टाइमिंग (अस्पष्टता वैल्यू, {
 महत्व के लिए: 0.5,
 अवधि: 500,
 मूल चालक का उपयोग करें: सत्य,
 })।शुरू करना();
 }
वापस करना (

अस्पष्टता: अस्पष्टता मूल्य}}>

 {/* आपका बटन घटक */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
निर्यातगलती करना एनिमेटेड बटन;

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

राज्य परिवर्तन के साथ ट्रिगरिंग एनिमेशन

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

उदाहरण के लिए, आप का उपयोग कर सकते हैं useState और useEffect हुक इस तरह एक एनीमेशन ट्रिगर करने के लिए:

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

अस्पष्टता: फीकाएनिम}}>
{पाठ}</Text>
 </Animated.View>
"टेक्स्ट बदलें" ऑनप्रेस = {() => सेटटेक्स्ट ('नया पाठ')} />
 </View>
 );
};
निर्यातगलती करना MyComponent;

इस उदाहरण में, useEffect जब भी राज्य का मूल्य होगा, हुक एनीमेशन को ट्रिगर करेगा मूलपाठ परिवर्तन। useEffect हुक कॉलबैक फ़ंक्शन को अपने पहले तर्क के रूप में लेता है, जो कि जब भी दूसरे तर्क में निर्दिष्ट निर्भरताएँ चलती हैं (इस मामले में, [मूलपाठ]) परिवर्तन। के अंदर useEffect अंकुश, स्टार्टएनीमेशन () फीका एनीमेशन चलाता है और ट्रिगर करता है।

डायनामिक एनिमेशन आपके ऐप को जीवंत कर देंगे

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

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