सीएसएस के साथ एसवीजी एनिमेशन के लिए एक शुरुआती गाइड

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

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

HTML और CSS के साथ SVG को एनिमेट करना

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

HTML के अंदर एक SVG इमेज बनाना

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

एसवीजी संरचना

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

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

<!-- उत्तरदायी आकार के साथ एसवीजी -->
<एसवीजी आईडी ="MUOSVGAएनिमेशन" व्यूबॉक्स ="0 0 800 600">
<!-- एसवीजी सामग्री -->
</svg>

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

 एसवीजी साथ एक स्थिर आकार 
<एसवीजी आईडी ="MUOSVGAएनिमेशन" चौड़ाई ="800" ऊंचाई ="600">
<!-- एसवीजी सामग्री -->
</svg>

एसवीजी आकार

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

• SVG Ellipse: यह एक वृत्त/अंडाकार उपकरण है। यह y/x अक्ष त्रिज्या (rx/ry), रंग भरें, और स्ट्रोक चौड़ाई के लिए गुण निर्दिष्ट करता है। यह याद रखना महत्वपूर्ण है कि इस उपकरण के साथ आप जो त्रिज्या चुनते हैं, वह आकार के व्यास का आधा होगा।

<अंडाकार आईडी ="घेरा" आरएक्स ="100" रे ="100" भरना ="#ffed00" स्ट्रोक-चौड़ाई ="0"/>

• एसवीजी रेक्ट: एसवीजी रेक्ट टूल एक वर्ग या आयत बनाता है। इसमें चौड़ाई/ऊंचाई, एक परिवर्तन, रंग भरने, और स्ट्रोक चौड़ाई के गुण हैं।

<रेक्ट आईडी ="वर्ग" चौड़ाई ="200" ऊंचाई ="200" परिवर्तन ="अनुवाद (300 200)" भरना ="#05f"
 स्ट्रोक-चौड़ाई ="0"/>

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

<बहुभुज आईडी ="त्रिकोण" अंक ="15,-97 115,102 -84,102 15,-97"
 परिवर्तन ="अनुवाद करें (0,0)" भरना ="#f00" स्ट्रोक-चौड़ाई ="0"/>

एक बार एनीमेशन होने के बाद, आकृतियाँ एक दूसरे के बगल में पंक्तिबद्ध हो जाएँगी।

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

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

सीएसएस के साथ एसवीजी को कैसे चेतन करें

अब जब आपके SVG में कुछ आकृतियाँ हैं, तो CSS एनिमेशन पर जाने का समय आ गया है। आपके पास मौजूद कुछ विकल्पों को प्रदर्शित करने के लिए प्रत्येक आकार में एक अलग एनीमेशन है, लेकिन आपके स्वयं के डिज़ाइनों के साथ अन्वेषण करने के लिए और भी बहुत कुछ है। वृत्त पूरे स्क्रीन पर घूमता है, वर्ग के कोने गोल हो जाते हैं और त्रिभुज घूमता है। ये सभी उपयोग सहज एनिमेशन बनाने के लिए CSS कीफ़्रेम.

ट्रांसफॉर्म और ट्रांसलेट का उपयोग करके सर्कल को स्थानांतरित करना

एसवीजी उदाहरण में सर्कल अपने एनीमेशन चक्र के दौरान स्क्रीन के नीचे से ऊपर की ओर बढ़ता है। CSS प्रॉपर्टी के माध्यम से, सर्कल को स्थानांतरित करने से पहले आपको एक एनीमेशन असाइन करने की आवश्यकता है:

#घेरा {
 एनिमेशन: सर्कल_एनिम 2000ms लीनियर इनफिनिट नॉर्मल फॉरवर्ड
}

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

@कीफ़्रेम सर्कल_एनिम {
 0% { परिवर्तन: अनुवाद करना(155पीएक्स, 305px) }
 45% { परिवर्तन: अनुवाद करना(155पीएक्स, -123px) }
 50% { परिवर्तन: अनुवाद करना(-123px, -123px) }
 55% { परिवर्तन: अनुवाद करना(-123px, 728px) }
 60% { परिवर्तन: अनुवाद करना(155पीएक्स, 728px) }
 100% { परिवर्तन: अनुवाद करना(155पीएक्स, 305px) }
}

इस एनिमेशन में छह मुख्य-फ़्रेम हैं, इसलिए सर्कल प्रत्येक चक्र में छह अलग-अलग स्थानों पर चला जाएगा। रूपांतरित करना: अनुवाद करना संपत्ति प्रत्येक चरण में सर्कल की स्थिति निर्धारित करती है। 0% पर वृत्त स्क्रीन के बीच में होता है और 45% ऊपर और दृश्य से बाहर हो जाता है। 55% पर व्यूपोर्ट से नीचे जाने से पहले यह 50% तक स्क्रीन के बाईं ओर चला गया है। सर्कल अपनी क्षैतिज स्थिति में 60% तक वापस चला जाता है, और स्क्रीन के बीच में सर्कल के साथ एनीमेशन 100% पर पूरा होता है।

स्क्वायर की सीमा त्रिज्या संपत्ति को चेतन करें

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

#वर्ग { एनीमेशन: वर्ग_एनिम 2000ms सहज-इन-आउट अनंत सामान्य आगे }

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

@कीफ़्रेम वर्ग_एनिम {
 0% { आरएक्स: 0px; रयू: 0px }
 45% { आरएक्स: 40px; रयू: 40px }
 55% { आरएक्स: 40px; रयू: 40px }
 100% { आरएक्स: 0px; रयू: 0px }
}

जैसा कि आप देख सकते हैं, इस एनिमेशन में चार मुख्य-फ़्रेम हैं। X और Y बॉर्डर-त्रिज्या 0px से 40px में 0% और 45% के बीच बदलता है, 40px पर 55% तक रुकता है। एनीमेशन के 100% तक पहुंचने तक यह प्रत्येक त्रिज्या के लिए 0px पर वापस चला जाता है।

एसवीजी त्रिकोण को ट्रांसफॉर्म के साथ घुमाएं

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

#त्रिकोण { एनीमेशन: त्रिकोण_एनिम 2000ms सहज-बाहर अनंत सामान्य आगे }

इस एनिमेशन में दो मुख्य-फ़्रेम हैं, एक 0% पर और दूसरा 100% पर। ट्रांसफ़ॉर्म रोटेट प्रॉपर्टी त्रिभुज को 0deg से 0% पर 360deg पर 100% पर घुमाती है, एक पूर्ण स्पिन बनाती है।

@कीफ़्रेम त्रिकोण_एनिम {
 0% { परिवर्तन: अनुवाद करना(644पीएक्स, 297px) घुमाएँ(0 डिग्री) }
 100% { परिवर्तन: अनुवाद करना(644पीएक्स, 297px) घुमाएँ(360डिग्री) }
}

अन्य गुणों को कैसे चेतन करें

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

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

अपनी खुद की एसवीजी एनिमेशन बनाना

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

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

आगे पढ़िए