भले ही सीएसएस के साथ एसवीजी को एनिमेट करना औसत फ्रंट-एंड व्यक्ति के लिए अधिक आरामदायक हो सकता है, एसवीजी के पास एक और तरीका है जो एसवीजी सिंटैक्स में ही बनाया गया है। यह ठीक वैसा ही है जैसा कि हम इस वीडियो में संक्षेप में बता रहे हैं, लेकिन यदि आप एक संपूर्ण संदर्भ गाइड चाहते हैं, तो निश्चित रूप से सारा सोएदान द्वारा ए गाइड टू एसवीजी एनिमेशन (एसएमआईएल) को सीएसएस-ट्रिक्स पर यहां देखें।
SMIL सिंक्रोनाइज़्ड मल्टीमीडिया इंटीग्रेशन लैंग्वेज के लिए है। जैसा कि मैं इसे समझता हूं, यह स्वयं के लिए एक "बात" है जो एसवीजी में निर्मित होती है। लेकिन एसवीजी के पास एसएमआईएल जैसे कुछ अतिरिक्त हैं। मैं सिर्फ एसएमआईएल के रूप में यह सब उल्लेख करूंगा, हालांकि मुझे यकीन है कि मैं कभी-कभी तकनीकी रूप से गलत हूं।
बहुत ही सरल एनिमेशन के लिए, यह बहुत मायने नहीं रखता है यदि आप इसे SMIL या CSS में करते हैं, तो यह समान स्तर की कठिनाई के बारे में एक ही काम करेगा। CSS में कुछ चीजें और भी आसान हो सकती हैं। लेकिन यहाँ कुछ चीजें हैं जहाँ SMIL जाने का रास्ता है:
- आपको ऐसी चीज़ को चेतन करने की आवश्यकता है जिसे CSS स्पर्श नहीं कर सकता है। बहुभुज या पथ के आकार की तरह।
- तुम एक तरह, एनीमेशन को प्रभावित करने की घटनाओं का उपयोग करना चाहते
clickयाmouseoverया कुछ और। - आप additive एनिमेशन करना चाहते हैं, जैसे, जहाँ आप अब एक और x पिक्सेल हैं, उससे चेतन।
- आप ऐसे एनिमेशन चाहते हैं जो सीधे अन्य एनिमेशन से संबंधित हों, जैसे, जब यह एनीमेशन खत्म हो जाता है तो यह अगला एनीमेशन (मैन्युअल रूप से अवधि में हेरफेर किए बिना) बंद कर देता है।
- मुझे पूरा भरोसा है कि वहां और अधिक चीजे हैं।
वाक्य-विन्यास पहली बार में डराने वाला लगता है, लेकिन यह वास्तव में बहुत आसान है जिसका मैं वादा करता हूं। यहाँ एक मूल उदाहरण दिया गया है:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन jAipI देखें।
"आकार आकार देने वाली" बात वास्तव में एसएमआईएल के साथ सुपर अनोखी है, इसलिए यहां एक अजीब उदाहरण है जो हमने वीडियो में किया था:
कोडपेन पर क्रिस कॉयर (@chriscoyier) द्वारा पेन शेप मॉर्फ बटन देखें।
उस डेमो में, घटनाओं को SMIL के बजाय जावास्क्रिप्ट द्वारा नियंत्रित किया जाता है। बस आपको यह जानकर अच्छा लगा। SMIL ईवेंट ट्रिगर्स कूल हैं लेकिन फिर जिस चीज़ पर क्लिक करने की ज़रूरत है वह उस SVG में होनी चाहिए बजाय DOM में कहीं और।