CSS का उपयोग करके SVG एनीमेशन कैसे बनाएं

एनिमेटेड एसवीजी को देशी तत्वों जैसे के माध्यम से किया जा सकता है तथा . लेकिन जो लोग सीएसएस एनीमेशन से अधिक परिचित हैं, चिंता न करने के लिए, हम सीवी एनीमेशन गुणों का उपयोग एसवीजी को एनिमेटेड करने के लिए भी कर सकते हैं.

CSS एनिमेशन SnapSVG जैसी जावास्क्रिप्ट लाइब्रेरी का उपयोग करने का एक वैकल्पिक तरीका भी हो सकता है। इस पोस्ट में हम देखेंगे कि हम एसवीजी में सीएसएस एनीमेशन के साथ क्या कर सकते हैं.

1. आकृतियाँ बनाना

सबसे पहले, हमें उन आकृतियों और वस्तुओं को आकर्षित करना होगा जिन्हें हम चेतन करना चाहते हैं। आप जैसे अनुप्रयोगों का उपयोग कर सकते हैं स्केच, एडोब इलस्ट्रेटर, या इंकस्केप एक बनाने के लिए.

इस उदाहरण के लिए, मैंने एक बादल आकाश को पृष्ठभूमि के रूप में खींचा है, और ऊपर की ओर एक रॉकेट जहाज शूटिंग कर रहा है, इसमें शामिल हैं:

एक बार ड्राइंग के साथ किए जाने के बाद, हमें एसवीजी में बनाई गई प्रत्येक वस्तु को निर्यात करना होगा.

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

2. HTML में SVG डालें

जब आप कोड संपादक में SVG फ़ाइल खोलते हैं, तो आप पाएंगे कि SVG कोड काफी गड़बड़ हैं। इसलिए, इससे पहले कि हम एसवीजी फ़ाइल को तैनात करते हैं, आइए कोड को साफ करें और इसे एसवीजीओ नामक इस कमांड लाइन टूल के साथ अनुकूलित करें.

प्रक्षेपण टर्मिनल या सही कमाण्ड, और इस कमांड लाइन के साथ SVGO स्थापित करें:

 [sudo] npm install -g svgo 

कमांड को ट्यून करें, svgo, का उपयोग कर SVG फ़ाइल पर --सुंदर पठनीय एसवीजी कोड का उत्पादन करने के लिए:

 svgo राकेट। svg - व्याख्या 

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

 svgo -f छवियाँ - व्याख्या 

एसवीजीओ का उपयोग करने से पहले और बाद में अंतर देखें.

SVG फ़ाइल के भीतर कोड कॉपी करें और HTML फ़ाइल में पेस्ट करें। हम 800px चौड़े द्वारा 800px के कार्यक्षेत्र पर काम करेंगे, तो चलिए परिभाषित करना नहीं भूलते चौड़ाई एसवीजी तत्व पर.

SVG HTML फ़ाइल में सेट किया गया है। हमें प्रत्येक ऑब्जेक्ट के लिए एक आईडी परिभाषित करने की आवश्यकता होगी, इसलिए हम उन्हें बाद में CSS में चुन सकते हैं.

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

3. सीएसएस का उपयोग कर चेतन

अब कुछ मस्ती करते हैं। अंतरिक्ष में रॉकेट को बढ़ावा देने की योजना है। रॉकेट दो समूहों में विभाजित है; रॉकेट ही और लौ.

सबसे पहले, हम रॉकेट को कार्यक्षेत्र के बीच में रखते हैं, जो निम्नानुसार है:

 #rocket ट्रांसफ़ॉर्म: ट्रांसलेट (260px, 200px); 

आप जो देख रहे हैं वह यह है:

अब रॉकेट जैसा दिखने के लिए यह ऊपर की तरफ जा रहा है, हमें बादलों के गिरने का भ्रम पैदा करने की जरूरत है। इसके लिए हम जो CSS इस्तेमाल करते हैं वह है:

 # क्लाउड 1 एनीमेशन: फॉल 1 एस रैखिक अनंत;  @keyframes रूपांतरण: ट्रांसवाई (-100px) से गिरता है;  से ट्रांस्फ़ॉर्म: TranslY (1000px) 

इसे और भी यथार्थवादी बनाने के लिए, आइए चार बादलों को एनिमेटेड करें, और उन्हें बनाएं “गिरना” विभिन्न गति से। हम उन्हें एक्स-एक्सिस से अलग स्थिति में भी लाएँगे.

दूसरे क्लाउड में इस तरह कोड होगा:

 # क्लाउड 2 एनीमेशन: फॉल -2 2s रैखिक अनंत;  @keyframes Fall-2 from ट्रांसफॉर्म: ट्रांसलेशन (200px, -100px);  से परिवर्तन: अनुवाद (200px, 1000px) 

ध्यान दें कि हमने क्लाउड # 2 को दाईं ओर थोड़ा सा स्थानांतरित कर दिया है 200px साथ में अनुवाद करना. इस स्तर पर, परिणाम इस तरह दिखना चाहिए.

इसके बाद, रॉकेट को जीवन में आने दें। हम एक एनीमेशन कीफ़्रेम असाइन करेंगे, जो निम्नानुसार है:

 #rocket एनीमेशन: पॉपअप 1s आसानी से अनंत;  @keyframes popup 0% ट्रांसफ़ॉर्म: ट्रांसलेशन (260px, 200px);  50% परिवर्तन: अनुवाद (260px, 240px);  100% परिवर्तन: अनुवाद (260px, 200px);  

और रॉकेट लौ में एनीमेशन जोड़ें:

 #flame एनीमेशन: शेक .2s रैखिक अनंत;  @keyframes शेक 0% ट्रांसफ़ॉर्म: ट्रांसलेशन (55px, 135px) रोटेट (7 डीजी);  20% परिवर्तन: अनुवाद (55px, 135px) घुमाएँ (0deg);  40% ट्रांसफ़ॉर्म: ट्रांसलेशन (55px, 135px) रोटेट (-7 डीजी);  60% परिवर्तन: अनुवाद (55px, 135px) घुमाएँ (0deg);  100% ट्रांसफ़ॉर्म: ट्रांसलेशन (55px, 135px) रोटेट (0deg);  

सही! अब जब हमारे कोड सब सेट हो गए हैं, तो एनीमेशन को हमारे एसवीजी पर काम करना चाहिए.

अंतरिक्ष में विस्फोट करने वाले हमारे रॉकेट को देखें.

फाइनल थॉट

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

यदि आप बहुत मूल बातों के साथ शुरू करना चाहते हैं, तो आप इस पोस्ट के साथ यहां शुरू कर सकते हैं: ए लुक इनटू: स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) एनिमेशन या एसवीजी श्रृंखला के बाकी हिस्सों का पालन करें.

• डेमो देखें
• स्रोत डाउनलोड करें