मैंने टेलविंड और सीएसएस के साथ एनिमेशन के लिए एक रिएक्ट यूटिलिटी कंपोनेंट बनाया: एनिमेटइन

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

हम संक्रमण करने वाले अन्य गुणों को जोड़कर, अवधि को बदलकर, देरी जोड़कर, या कस्टम ईज़िंग सेट करके इसके शीर्ष पर निर्माण कर सकते हैं।

<AnimateIn/> एक पुन: प्रयोज्य रिएक्ट घटक है जिसे मैंने जब भी अपनी परियोजनाओं में शीघ्रता से कुछ एनीमेशन प्रभाव जोड़ना चाहता हूं, शामिल कर लिया है। एक सरल उपयोगिता घटक, यह न्यूनतम प्रयास के साथ तरल, आंख को पकड़ने वाले एनिमेशन बनाने के लिए सीएसएस एनीमेशन को टेलविंड कक्षाओं के साथ जोड़ता है।

आइए देखें कि इसका उपयोग कैसे किया जाता है। घटक आयात करने के बाद, टेलविंड कक्षाओं के साथ राज्यों from और to परिभाषित करें। एनीमेशन को जीवंत होते देखने के लिए लक्ष्य तत्व को <AnimateIn/> के भीतर लपेटें।

 import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn>

यहां थोड़ा अधिक जटिल उदाहरण दिया गया है जो शीर्षक और उपशीर्षक में चेतन करने के लिए अधिक गुणों का उपयोग करता है।

 import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header>

शीर्षक उदाहरण में, <AnimateIn/> का उपयोग फ़ेड-इन के साथ संयुक्त स्लाइडिंग प्रभाव बनाने के लिए किया जाता है। यहां बताया गया है कि प्रत्येक संपत्ति एनीमेशन में कैसे योगदान देती है:

• संपत्ति as : as="h1" सेट करके, हम AnimateIn को एनीमेशन को <h1> तत्व के रूप में प्रस्तुत करने के लिए कहते हैं।

• from और संपत्तियों to : from संपत्ति शीर्षक को ऑफ-स्क्रीन शुरू करती है ( translate-y-32 , इसे 32 इकाइयों को नीचे ले जाती है) और अदृश्य ( opacity-0 )। फिर to शीर्षक को उसकी अंतिम स्थिति में लाती है (वापस translate-y-0 पर) और इसे पूरी तरह से दृश्यमान बनाती है ( opacity-100 )।

• duration संपत्ति: एनीमेशन बिना किसी देरी के तुरंत शुरू होने के लिए सेट है और त्वरित 300ms तक चलता है।

• className संपत्ति: className="text-4xl" फ़ॉन्ट आकार सेट करने के लिए टेलविंड की उपयोगिता क्लास को लागू करता है, जिससे शीर्षक प्रमुखता से सामने आता है।

• style प्रॉपर्टी: कस्टम transitionTimingFunction ( cubic-bezier(0.25, 0.4, 0.55, 1.4) ) एनीमेशन में एक अद्वितीय आसानी जोड़ता है, जिससे इसे बाउंस जैसा प्रभाव मिलता है।

उपशीर्षक एक सुसंगत दृश्य प्रवाह बनाते हुए, शीर्षक को पूरक करने के लिए एनिमेशन के एक अलग सेट का उपयोग करता है।

• संपत्ति as : यहां, as="h2" घटक को एक <h2> तत्व के रूप में प्रस्तुत करता है, जो उपशीर्षक के लिए उपयुक्त है।

• from और गुणों to : उपशीर्षक को शून्य ( scale-0 ) और अदृश्य ( opacity-0 ) तक स्केल किया जाता है, फिर अपने प्राकृतिक आकार ( scale-100 ) तक बढ़ाया जाता है और पूरी तरह से दृश्यमान ( opacity-100 ) हो जाता है। फ़ेड-इन के साथ जोड़ा गया यह स्केलिंग प्रभाव एनीमेशन में गहराई जोड़ता है।

• delay और duration गुण: उपशीर्षक भी 800 एमएस विलंब के बाद शुरू होता है ताकि यह शीर्षक के पूरी तरह से एनिमेटेड होने के बाद शुरू हो। यह क्रमबद्ध दृष्टिकोण सुनिश्चित करता है कि प्रत्येक तत्व को फोकस का क्षण मिले।

• className संपत्ति: className="text-lg" उपशीर्षक का फ़ॉन्ट आकार सेट करता है, जिससे यह शीर्षक से छोटा होता है लेकिन फिर भी महत्वपूर्ण होता है।

क्या हो रहा है इसे बेहतर ढंग से समझने के लिए, आइए Github पर <AnimateIn/> के स्रोत कोड को देखें:

<AnimateIn/> एनीमेशन स्थिति को from संपत्ति के साथ आरंभ करने के लिए एक useState हुक का उपयोग करता है, जो एक या अधिक टेलविंड उपयोगिता वर्ग होना चाहिए, जो किसी भी एनीमेशन के होने से पहले एनीमेशन के शुरुआती बिंदु के लिए चरण निर्धारित करता है।

घटक में पहला useEffect हुक कम गति के लिए उपयोगकर्ता की प्राथमिकताओं का सम्मान करने के लिए है। (prefers-reduced-motion: reduce) मीडिया क्वेरी को सुनकर, एनीमेशन व्यवहार उपयोगकर्ता की सिस्टम सेटिंग्स पर आधारित होता है। यदि कम गति को प्राथमिकता दी जाती है, तो एनीमेशन को पूरी तरह से छोड़ दिया जाता है, एनीमेशन स्थिति को सीधे to प्रॉपर्टी पर सेट किया जाता है, जिससे एक सुलभ अनुभव प्राप्त होता है।

दूसरा useEffect हुक वह जगह है जहां एनीमेशन तर्क रहता है। यदि उपयोगकर्ता ने कम गति के लिए प्राथमिकता का संकेत नहीं दिया है, तो घटक एक टाइमर सेट करता है जो निर्दिष्ट देरी के बाद एनीमेशन स्थिति को शुरुआती मूल्य from अंतिम मूल्य to बदलता है। यह परिवर्तन एनीमेशन का दृश्य प्रभाव पैदा करता है।

इस हुक का क्लीनअप फ़ंक्शन (रिटर्न स्टेटमेंट) टाइमर को साफ़ करता है, संभावित मेमोरी लीक को रोकता है जैसे कि एनीमेशन पूरा होने से पहले घटक अनमाउंट हो जाता है।

React.createElement फ़ंक्शन कॉल घटक का रेंडरिंग तंत्र है। यह गतिशील रूप से as प्रोप के आधार पर एक HTML तत्व बनाता है, जो विभिन्न HTML तत्वों में घटक के उपयोग की अनुमति देता है। className निर्माण shadcn द्वारा लोकप्रिय cn फ़ंक्शन का उपयोग करके किया गया है, जो टेलविंड की उपयोगिता कक्षाओं, एक प्रोप के रूप में पारित कस्टम className और वर्तमान एनीमेशन स्थिति को जोड़ता है। यह गतिशील वर्ग असाइनमेंट वह है जो तत्व में वांछित शैलियों और बदलावों को लागू करता है।

इसके अतिरिक्त, एक style विशेषता है जिसे एनीमेशन कंटेनर पर सीधे स्टाइलिंग गुणों को सेट करने के लिए पारित किया जा सकता है। transitionDuration duration प्रोप के आधार पर निर्धारित की जाती है, लेकिन यदि उपयोगकर्ता कम गति पसंद करता है तो यह बुद्धिमानी से 0ms पर स्विच हो जाता है, घटक की कार्यक्षमता को बनाए रखते हुए एनीमेशन को प्रभावी ढंग से अक्षम कर देता है।

यदि आप अपने स्वयं के प्रोजेक्ट में <AnimateIn/> का उपयोग करना चाहते हैं और यह पहले से ही shadcn का उपयोग करता है, तो आपके पास पहले से ही वह सब कुछ है जो आपको चाहिए, बस AnimateIn.tsx डाउनलोड करें और इसे अपने घटकों में जोड़ें।

अन्यथा, आप टेलविंड कक्षाओं को मर्ज करने के लिए सहायक उपयोगिता mxcn साथ-साथ टेलविंड भी इंस्टॉल करना चाहेंगे।

Shadcn की तरह, <AnimateIn/> का मतलब एक पुन: प्रयोज्य घटक है जिसे आप कॉपी करके अपने ऐप्स में पेस्ट कर सकते हैं और अपनी आवश्यकताओं के अनुसार अनुकूलित कर सकते हैं। कोड आपका है.

इसके अलावा, मैंने <AnimateIn/> के साथ animate-in.vercel.app पर अलग-अलग एनिमेशन बनाने के लिए एक अच्छा डेमो पेज भी तैयार किया है।

यहाँ भी प्रकाशित किया गया