लगभग 5 मिनट · React 16.8+ · React DOM
शुरुआत
इंस्टॉल से जेस्चर और प्रवेश-निकास गति तक छह चरणों में। हर चरण एक छोटा, चलने वाला कंपोनेंट है।
इंस्टॉल करें
Animated की कोई रनटाइम निर्भरता नहीं है। React 16.8+ peer निर्भरता है।
पैकेज का एंट्री पॉइंट 'use client' से चिह्नित है। Next.js App Router में सर्वर layout
AnimatedProviderरेंडर कर सकता है; हुक औरAnimated.<tag>को Client Components के भीतर इस्तेमाल करें।npm install @kkwaenggwari/animated@kkwaenggwari/animatedका इम्पोर्ट आपके एडिटर में हल होता है।पहला मान हिलाएँ
useAnimatedValue(1)कंपोनेंट के पूरे जीवनकाल एक जीवित संख्या का मालिक है। इसे सीधेstyleमें रखें: यह CSS वेरिएबल बन जाता है, इसलिए बदलते समय React रेंडर नहीं करता।timing(value, { toValue, duration }).start()उसे हिलाता है। बीच रास्ते फिर दबाने पर मौजूदा अपारदर्शिता से शुरू होता है।उदाहरण तैयार हो रहा है…
फ़्रेम फीका होकर लौटता है, और बीच रास्ते दूसरा दबाव जहाँ है वहीं से दिशा पलट देता है।
एक मान से कई आउटपुट निकालें
interpolateमान को लंबाई, कोण या संख्या में बदलता है। easing के बिना वह उसी वेरिएबल का सटीकcalc()बनता है, इसलिए पाँच लेन की लागत एक जितनी है।एक ही मान की अलग-अलग इनपुट सीमाएँ पाँच अलग एनिमेशन के बिना कैस्केड बनाती हैं।
उदाहरण तैयार हो रहा है…
एक दबाव पाँच लेन को कैस्केड में हिलाता है; फैलाव बदलने से सिर्फ़ सीमाएँ बदलती हैं।
लक्ष्य बताएँ
Animated.buttonसामान्य बटन रेंडर करता है।seedपहला फ़्रेम है,poseयह कि उसे अभी कहाँ होना है, औरtempoयह कि वह वहाँ कैसे पहुँचे।बीच रास्ते
poseबदलने पर एलिमेंट स्क्रीन पर अपनी जगह से मुड़ता है और स्प्रिंग के साथ वेग बनाए रखता है।उदाहरण तैयार हो रहा है…
टैब जल्दी-जल्दी क्लिक करने पर भी कोई टैब नहीं कूदता।
इनपुट जोड़ें
input(ref, moveInput(...))पॉइंटर के निर्देशांक मानों में लिखता है।follow(target, source)एक मान को स्प्रिंग के साथ दूसरे के पीछे चलाता है।useAnimatedकी factory में घोषित हर चीज़ कंपोनेंट की होती है: listener और स्प्रिंग अनमाउंट पर या निर्भरता बदलने पर रुकते हैं।उदाहरण तैयार हो रहा है…
कार्ड पॉइंटर की ओर झुकता है और पॉइंटर के जाने पर शांत हो जाता है।
जाने को एनिमेट करें
React का child हटाने पर वह आमतौर पर तुरंत हट जाता है।
Animated.Keepkey वाले children को तब तक रखता है जब तक उनकाdepartpose पूरा न हो।waitनए children को तभी रेंडर करता है जब सारे प्रस्थान पूरे हो जाएँ।उदाहरण तैयार हो रहा है…
हटाए गए संदेश ग़ायब होने से पहले चुनी गई गति से जाते हैं।
अब आपके पास पूरा मॉडल है
मान, लक्ष्य, इनपुट और प्रस्थान एक ही कंट्रोलर, रुकावट के नियम और सफ़ाई साझा करते हैं। गाइड हर एक को विस्तार से समझाती हैं।