फ्रैमर मोशन के साथ अपने रिएक्ट ऐप्स में एनिमेशन कैसे जोड़ें

एनीमेशन लगभग हर आधुनिक वेब एप्लिकेशन का एक महत्वपूर्ण हिस्सा है। यह सही पाने के लिए सबसे कठिन भागों में से एक है।

फ्रैमर मोशन रिएक्ट के लिए बनाई गई एक लाइब्रेरी है जो घटकों को एनिमेट करना आसान बनाती है।

फ्रैमर मोशन कैसे काम करता है

फ्रैमर मोशन एनिमेशन के लिए गति घटक का उपयोग करता है। प्रत्येक HTML/SVG तत्व में एक समतुल्य गति घटक होता है जिसमें इशारों और एनिमेशन के लिए सहारा होता है। उदाहरण के लिए, एक नियमित HTML div इस तरह दिखता है:

<डिव>डिव>

जबकि फ्रैमर मोशन समतुल्य इस तरह दिखता है:

<गति.दिव्य>गति.दिव्य>

मोशन घटक एक का समर्थन करते हैं चेतन प्रोप जो एनिमेशन को तब ट्रिगर करता है जब इसके मान बदलते हैं। जटिल एनिमेशन के लिए, का उपयोग करें उपयोग करें एक दायरे वाले रेफरी के साथ हुक।

फ्रैमर मोशन में एनिमेशन

अपने प्रोजेक्ट में फ्रैमर मोशन का उपयोग करने से पहले, आपके पास होना चाहिए Node.js रनटाइम और आपके कंप्यूटर पर स्थापित यार्न पैकेज मैनेजर और समझें कि रिएक्ट क्या है और इसका उपयोग कैसे करें.

अपना टर्मिनल खोलें और चलाएं:

गिट क्लोन [email protected]: makeuseofcode/framer-motion-app.git
सीडी फ्रैमर-मोशन-ऐप
धागा
यार्न देव

जब आप खोलते हैं लोकलहोस्ट: 5173 अपने ब्राउज़र में, आप इसे देखेंगे:

अब आप अपना पहला सरल एनीमेशन बना सकते हैं, एक बटन जो हॉवर पर बढ़ता है और कर्सर के चले जाने पर सिकुड़ जाता है।

खोलें src/App.jsx एक कोड संपादक में फ़ाइल। इस फ़ाइल में एक कार्यात्मक घटक है जो एक रिएक्ट खंड देता है। आयात करें बटन घटक, फिर इसे प्रस्तुत करें, एक में गुजर रहा है मूलपाठ सहारा:

एनिमेटेड बटन</h4>
प्रभाव देखने के लिए अपने माउस को बटन पर ले जाएँ</div>
"होवर मी"/>
</section>

अगला, संपादित करें बटन.जेएसएक्स फ़ाइल और आयात करें गति से उपयोगिता फ्रेमर-गति:

आयात { गति } से"फ्रेमर-मोशन"

अब, नियमित बदलें बटन तत्व के साथ गति। [तत्व] अवयव। इस स्थिति में, का उपयोग करें गति। बटन अवयव।

फिर ए जोड़ें जबकि होवर करें जेस्चर प्रोप और मानों का एक ऑब्जेक्ट पास करें जिसे फ्रैमर मोशन को एनिमेट करना चाहिए जब उपयोगकर्ता बटन पर होवर करता है।

पैमाना: 1.1 }}>
{मूलपाठ}
</motion.button>

जब आप अपने माउस पॉइंटर को इसके ऊपर या इससे बाहर ले जाते हैं तो बटन अब एनिमेट हो जाएगा:

आप सोच रहे होंगे कि यह डेमो उपयोग क्यों नहीं करता सीएसएस एनिमेशन बजाय। फ्रैमर मोशन के सीएसएस पर फायदे हैं क्योंकि यह रिएक्ट स्थिति के साथ एकीकृत होता है और आम तौर पर क्लीनर कोड में परिणाम होता है।

अगला, कुछ और जटिल प्रयास करें: एक मॉडल को एनिमेट करना। में बैकड्रॉप.जेएसएक्स, गति उपयोगिता आयात करें और इसके साथ एक कार्यात्मक घटक बनाएं क्लिक पर और बच्चे सहारा। वापसी ए गति.दिव्य वर्ग "पृष्ठभूमि" के साथ घटक और क्लिक पर JSX में श्रोता।

निर्यातगलती करनासमारोहपृष्ठभूमि() {
वापस करना (<>

 </motion.div>
 </>)
}

फिर तीन प्रॉप्स जोड़ें: प्रारंभिक, चेतन, और बाहर निकलना. ये प्रोप घटक की मूल स्थिति का प्रतिनिधित्व करते हैं, राज्य को घटक को एनिमेट करना चाहिए, और राज्य क्रमशः एनीमेशन के बाद घटक होना चाहिए।

जोड़ना क्लिक पर और बच्चे के लिए सहारा गति.दिव्य और संक्रमण अवधि को 0.34 सेकंड पर सेट करें:

निर्यातगलती करनासमारोहपृष्ठभूमि ({ऑनक्लिक, बच्चे}){
वापस करना (<>
 ऑनक्लिक = {ऑनक्लिक}
 वर्गनाम ="पृष्ठभूमि"
 प्रारंभिक = {{ अस्पष्टता: 0, पृष्ठभूमि फ़िल्टर:"धुंधला (0px)" }}
 चेतन = {{ अस्पष्टता: 1, पृष्ठभूमि फ़िल्टर:"कलंक (3.4 पीएक्स)" }}
 बाहर निकलें = {{ अस्पष्टता: 0, पृष्ठभूमि फ़िल्टर:"धुंधला (0px)"}}
 संक्रमण = {{
 अवधि: 0.34,
 }}
 >
 {बच्चे}
 </motion.div>
 </>)
}

पृष्ठभूमि घटक के लिए एक आवरण है मॉडल अवयव। पृष्ठभूमि पर क्लिक करने से मोडल खारिज हो जाता है। में मोडल.जेएसएक्स, आयात गति और पृष्ठभूमि घटक। डिफ़ॉल्ट कार्यात्मक घटक सहारा स्वीकार करता है: closeModal और मूलपाठ. एक वस्तु के रूप में एक भिन्न चर बनाएँ।

कॉन्स्ट प्रकार = {
 प्रारंभिक: {
 वाई: "-200%",
 अस्पष्टता: 1,
 },
 दृश्यमान: {
 वाई: "50%",
 संक्रमण: {
 अवधि: 0.1,
 प्रकार: "वसंत",
 भिगोना: 32,
 कठोरता: 500
 }
 },
 बाहर निकलना: {
 वाई: "200%",
 }
 }

वेरिएंट ऑब्जेक्ट की ओर इशारा करते हुए "वेरिएंट" प्रोप के साथ बैकड्रॉप घटक द्वारा लपेटा गया मोशन.डिव घटक लौटाएं। वैरिएंट पूर्वनिर्धारित एनीमेशन का एक सेट है जो बताता है कि घटक अंदर हो सकता है।

 ऑनक्लिक = {(ई) => e.stopPropagation ()}
 वर्गनाम ="मोडल"
 वेरिएंट = {वेरिएंट}
 प्रारंभिक ='प्रारंभिक'
 चेतन ='दृश्यमान'
 निकास ='बाहर निकलना'
 >
 {मूलपाठ}
 </motion.div>
</Backdrop>

अगला, जब उपयोगकर्ता बटन पर क्लिक करता है तो आपको मोडल प्रदर्शित करने के लिए कार्यक्षमता जोड़ने की आवश्यकता होती है। खोलें ऐप.जेएसएक्स फ़ाइल और आयात करें useState प्रतिक्रिया हुक और मॉडल अवयव।

आयात {यूज़स्टेट} से"प्रतिक्रिया";
आयात मॉडल से"./घटक/मोडल";

फिर एक बनाएँ modalOpen डिफ़ॉल्ट मान सेट के साथ स्थिति असत्य.

कॉन्स्ट [modalOpen, setModalOpen] = useState(असत्य);

अगला, एक फ़ंक्शन को परिभाषित करें closeModal जो सेट करता है modalOpen असत्य को।

समारोहcloseModal() {
 सेटमॉडलओपन(असत्य)
}

रिएक्ट खंड के शीर्ष पर, सशर्त रूप से रेंडर करें मॉडल घटक और उपयुक्त पारित करें मूलपाठ क्लोजमोडल प्रोप के साथ प्रोप।

{modalOpen && <मॉडलमूलपाठ="यह फ्रैमर मोशन के साथ एनिमेटेड एक मोडल है"}

फिर, दूसरे में अनुभाग तत्व, रेंडर ए बटन एक ऑनक्लिक ईवेंट हैंडलर वाला तत्व जो modalOpen को गलत पर सेट करता है।

 सेटमॉडलओपन(सत्य)}>मोडल दिखाएं</button>

आप देख सकते हैं कि रिएक्ट बिना एग्जिट एनीमेशन के DOM से मोडल कंपोनेंट को अनमाउंट कर देता है। इसे ठीक करने के लिए, आपको एक की आवश्यकता है AnimatePresence अवयव। से AnimatePresence आयात करें फ्रेमर-गति.

आयात {एनिमेटप्रेसेंस} से'फ्रेमर-मोशन';

अब, मोडल घटक को AnimatePresence घटक में लपेटें और सेट करें प्रारंभिक असत्य का सहारा लेना और तरीका प्रतीक्षा करना"।

असत्य} मोड ="इंतज़ार">
 {modalOpen && <मॉडलमूलपाठ="यह फ्रैमर मोशन के साथ एनिमेटेड एक मोडल है"closeModal={क्लोज़मॉडल} />}
</AnimatePresence>

AnimatePresence घटक रिएक्ट को DOM से अनमाउंट करने से पहले एग्जिट एनिमेशन को पूरा करने की अनुमति देता है।

फ्रैमर मोशन का उपयोग करके स्क्रॉल पर घटकों को एनिमेट कर सकता है जबकि इनव्यू सहारा। खोलें स्क्रॉलएलिमेंट.जेएसएक्स, और आयात करें गति उपयोगिता। परिवर्तन डिव को गति.दिव्य वर्ग "स्क्रॉल-तत्व" के साथ।

 प्रारंभिक = {{ अस्पष्टता: 0, पैमाना: 0, घुमाएँ: 14 }}
 जबकि इनव्यू = {{ अस्पष्टता: 1, पैमाना: 1, घुमाएँ: 0 }}
 संक्रमण = {{ अवधि: .8 }}
 व्यूपोर्ट = {{ एक बार: सत्य }}
 वर्गनाम ='स्क्रॉल-एलिमेंट'
>
 स्क्रॉल तत्व
</motion.div>

व्यूपोर्ट प्रोप उस वस्तु को इंगित करता है जो सेट करता है एक बार को सत्य. अगला, में ऐप.जेएसएक्स फ़ाइल, आयात करें स्क्रॉल एलिमेंट घटक और एक पूर्णांक मान रखने वाले चर स्क्रॉल एलिमेंटकाउंट को परिभाषित करें।

होने देना स्क्रॉल एलिमेंटकाउंट =14;

आखिर में अनुभाग तत्व, द्वारा परिभाषित एक विशिष्ट लंबाई के साथ एक सरणी बनाएँ scrollElementCount जो सरणी के प्रत्येक तत्व पर मैप करता है और सूचकांक के आधार पर एक अद्वितीय कुंजी के साथ एक घटक उत्पन्न करता है मैं.

{[...सरणी (scrollElementCount)].नक्शा ((एक्स, आई) =><स्क्रॉल एलिमेंटचाबी={मैं} />)}

अब, ब्राउज़र पर वापस लौटने पर, जब आप उन्हें दृश्य में स्क्रॉल करते हैं तो तत्वों को एनिमेट करना चाहिए।

फ्रैमर मोशन के विकल्प

फ्रैमर मोशन बाजार पर एकमात्र एनीमेशन लाइब्रेरी नहीं है। यदि आपको फ्रैमर मोशन जिस तरह से काम करता है वह पसंद नहीं है, तो आप अन्य पुस्तकालयों को आजमा सकते हैं प्रतिक्रिया वसंत.

आप सीएसएस एनिमेशन का भी उपयोग कर सकते हैं, जो सभी आधुनिक ब्राउज़र मूल रूप से समर्थन करते हैं, लेकिन इसमें शामिल तकनीकें सीखने और स्थापित करने में मुश्किल हो सकती हैं।

एनिमेशन के साथ उपयोगकर्ता अनुभव में सुधार

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