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

इस ब्लॉग पोस्ट में, हम एसवीजी एनिमेशन की दुनिया में गहराई से उतरेंगे। चाहे आप इस रोमांचक क्षेत्र का पता लगाने के इच्छुक एक नौसिखिया हों या अपने कौशल को निखारने का लक्ष्य रखने वाले एक अनुभवी डेवलपर हों, यह मार्गदर्शिका आपको व्यावहारिक कोड उदाहरणों के साथ एसवीजी को चेतन करने के दस अलग-अलग तरीकों के बारे में बताएगी। अंत तक, आप अपने यूआई डिज़ाइन को अगले स्तर तक बढ़ाते हुए, इन तकनीकों को अपनी परियोजनाओं में लागू करने के लिए तैयार होंगे।

एसवीजी को चेतन क्यों करें?

विशिष्ट तरीकों पर जाने से पहले, यह समझना ज़रूरी है कि एसवीजी एनिमेशन इतने फायदेमंद क्यों हैं:

रिज़ॉल्यूशन इंडिपेंडेंस: एसवीजी किसी भी स्क्रीन घनत्व पर स्पष्ट दिखते हैं, जो विभिन्न डिवाइस रिज़ॉल्यूशन का समर्थन करने के लिए महत्वपूर्ण है।

छोटे फ़ाइल आकार: कई बिटमैप प्रारूपों की तुलना में, एसवीजी में आमतौर पर छोटे फ़ाइल आकार होते हैं, खासकर जब एनिमेशन में सरल ज्यामितीय आकार और सीमित रंग शामिल होते हैं।

मैनिपुलेबिलिटी: एसवीजी को सीएसएस और जावास्क्रिप्ट के माध्यम से हेरफेर किया जा सकता है, जिससे एनिमेशन को कार्यान्वित और नियंत्रित करने में लचीलापन मिलता है।

पहुंच-योग्यता: एसवीजी के अंदर का पाठ चयन योग्य और खोजने योग्य रहता है, जिससे प्रयोज्यता और पहुंच बढ़ जाती है।

विधि 1: सीएसएस परिवर्तन

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

उदाहरण: गियर को घुमाना

कल्पना करें कि आपके पास एक गियर का एसवीजी है। आप चाहते हैं कि यह गियर किसी प्रक्रिया या लोडिंग स्थिति को दर्शाने के लिए लगातार घूमता रहे।

#gear {
  transition: transform 2s linear infinite;
}

#gear:hover {
  transform: rotate(360deg);
}

सीएसएस में, हम निर्दिष्ट करते हैं कि गियर की ट्रांसफ़ॉर्म प्रॉपर्टी को दो सेकंड में रैखिक और अनंत रूप से परिवर्तित होना चाहिए। जब कोई उपयोगकर्ता गियर पर घूमता है, तो यह 360 डिग्री घूमता है।

विधि 2: सीएसएस कीफ़्रेम

अधिक जटिल एनिमेशन के लिए, सीएसएस कीफ़्रेम आपको आवश्यक नियंत्रण प्रदान करते हैं। कीफ़्रेम आपको एनीमेशन के विभिन्न चरणों में संपत्ति मूल्यों को परिभाषित करने की अनुमति देते हैं।

उदाहरण: स्पंदित वृत्त

आइए एक वृत्त को लगातार स्पंदित, बढ़ते और सिकुड़ते हुए चेतन करें।

@keyframes pulse {
  0%, 100% {
    r: 30;
  }
  50% {
    r: 40;
  }
}
circle {
  animation: pulse 2s infinite;
}

यहाँ, @keyframes एक पल्स एनीमेशन को परिभाषित करता है जहाँ वृत्त की त्रिज्या (r) बदलती है।

विधि 3: एसवीजी एसएमआईएल एनिमेशन

SMIL (सिंक्रनाइज़्ड मल्टीमीडिया इंटीग्रेशन लैंग्वेज) एक XML-आधारित भाषा है जो सीधे SVG फ़ाइलों के भीतर जटिल एनिमेशन को सक्षम बनाती है।

उदाहरण: पथ पर आगे बढ़ना

एक पूर्वनिर्धारित पथ पर चलने के लिए किसी वस्तु को एनिमेट करने की कल्पना करें।

एनिमेटमोशन तत्व की बदौलत वृत्त पथ द्वारा परिभाषित वक्र के साथ चलता है।

विधि 4: जावास्क्रिप्ट लाइब्रेरीज़ (ग्रीनसॉक)

ग्रीनसॉक (जीएसएपी) जैसी कई जावास्क्रिप्ट लाइब्रेरी, जटिल एसवीजी एनिमेशन की सुविधा प्रदान करती हैं। जीएसएपी अत्यधिक प्रदर्शनशील है और सभी प्रमुख ब्राउज़रों पर काम करता है।

उदाहरण: उछलती गेंद

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

gsap.to("#ball", {
  y: 60,
  duration: 1,
  ease: "bounce.out",
  repeat: -1,
  yoyo: true
});

गेंद लगातार योयो प्रभाव से उछलती है जिससे वह आगे-पीछे चलती है।

विधि 5: जावास्क्रिप्ट और सीएसएस वेरिएबल्स

सीएसएस वेरिएबल्स (कस्टम प्रॉपर्टीज) के साथ जावास्क्रिप्ट का उपयोग एसवीजी एनिमेशन को उपयोगकर्ता इंटरैक्शन या अन्य गतिशील स्थितियों के प्रति उत्तरदायी बना सकता है।

उदाहरण: रंग परिवर्तन

मान लीजिए कि आप कर्सर की स्थिति के आधार पर एसवीजी तत्व का भरण रंग बदलना चाहते हैं।

document.addEventListener("mousemove", function(e) {
  const color = e.clientX > window.innerWidth / 2 ? 'red' : 'blue';
  document.documentElement.style.setProperty('--color', color);
});

यहां, जैसे ही माउस स्क्रीन पर क्षैतिज रूप से घूमता है, वृत्त का रंग बदल जाता है।

विधि 6: एनिमेशन के लिए एसवीजी फ़िल्टर

एसवीजी फिल्टर एनिमेशन के माध्यम से एसवीजी तत्वों पर जटिल दृश्य प्रभाव लागू करने के लिए शक्तिशाली उपकरण हैं।

उदाहरण: धुंधला प्रभाव

एनिमेटेड धुंधला प्रभाव गति या परिवर्तन की भावना पैदा कर सकता है।

@keyframes blur {
  from {
    stdDeviation: 0;
  }
  to {
    stdDeviation: 5;
  }
}
circle {
  animation: blur 8s infinite alternate;
}

इस एनीमेशन में, वृत्त एक गतिशील दृश्य प्रभाव प्रदान करते हुए ध्यान आकर्षित करते हुए, आसानी से धुंधला और धुंधला हो जाता है।

उदाहरण: खुलासा पाठ

एनिमेटेड क्लिपिंग पथ का उपयोग करके पाठ को उत्तरोत्तर प्रकट किया जा सकता है।

@keyframes reveal {
  from {
    width: 0;
  }
  to {
    width: 100;
  }
}
rect {
  animation: reveal 5s forwards;
}

पाठ हैलो! बाएँ से दाएँ धीरे-धीरे प्रकट होता है।

विधि 8: आकार बदलना

कई पुस्तकालयों और मूल एसवीजी सुविधाओं का उपयोग करके आकार परिवर्तन प्राप्त किया जा सकता है, जिससे विभिन्न रूपों के बीच निर्बाध बदलाव होते हैं।

उदाहरण: हार्ट टू सर्कल मॉर्फ

एक सामान्य उदाहरण दिल के आकार को एक वृत्त में बदलना है।

/* Add keyframes for morphing */

फ़्लबर या सीएसएस जैसी लाइब्रेरी का उपयोग करके, पथ की "डी" विशेषता को हृदय और वृत्त आकृतियों के बीच प्रक्षेपित किया जाता है।

विधि 9: एनिमेटेड ग्रेजुएट्स

एसवीजी में ग्रेडिएंट एनिमेटेड भी हो सकते हैं, जो जीवंत पृष्ठभूमि या आकर्षक तत्वों के लिए उपयोगी हैं।

उदाहरण: ग्रेडिएंट बैकग्राउंड एनीमेशन

एक एनिमेटेड रेडियल ग्रेडिएंट जो रंगों को बदलता है, एक गतिशील पृष्ठभूमि के रूप में काम कर सकता है।

इस आयत का रंग रंगों के एक स्पेक्ट्रम में आसानी से परिवर्तित हो जाता है, जिससे एक जीवंत पृष्ठभूमि प्रभाव पैदा होता है।

उदाहरण: इंटरैक्टिव रंग परिवर्तन

एक सरल इंटरैक्शन जहां एसवीजी क्लिक पर रंग बदलता है।

फ़ंक्शन कहानी कहने के आधार पर नमूना कोड के साथ विशाल डेटाबेस बदलता है
बटन, और एक सदस्यता-आधारित पैनल। बटन पाठ यहां जावास्क्रिप्ट।

document.querySelector('svg').addEventListener('click', function() {
  this.querySelector('circle').setAttribute('fill', 'pink');
});

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

निष्कर्ष

एसवीजी एनिमेशन आपके यूआई को अधिक आकर्षक और आकर्षक बनाने के लिए संभावनाओं की एक विस्तृत श्रृंखला खोलते हैं। सरल सीएसएस संक्रमण से लेकर इंटरैक्टिव जावास्क्रिप्ट-संचालित एनिमेशन तक, प्रत्येक विधि अद्वितीय लाभ और क्षमताएं प्रदान करती है। विभिन्न तकनीकों के साथ प्रयोग करना और प्रदर्शन और ब्राउज़र संगतता पर उनके प्रभाव को समझना एसवीजी एनिमेशन में महारत हासिल करने की कुंजी है। चाहे उपयोगकर्ता अनुभव को बढ़ाना हो या केवल दृश्य प्रतिभा को जोड़ना हो, ये दस विधियां एसवीजी एनिमेशन की दुनिया में उतरने के इच्छुक किसी भी यूआई डेवलपर के लिए एक ठोस आधार प्रदान करती हैं।