जावास्क्रिप्ट उन तरीकों में से अंतिम है जिन्हें हम एसवीजी को एनिमेट करने पर कवर करेंगे। हमने सीएसएस को देखा, जो महान और बहुत आरामदायक है, लेकिन यह कई एसवीजी गुणों को नहीं कर सकता है जिन्हें आप चेतन करना चाहते हैं। फिर हमने एसएमआईएल को देखा, जो स्वयं एसवीजी कोड में एक घोषणात्मक वाक्यविन्यास अधिकार है, जो इसमें अधिक शक्तिशाली है कि यह स्वयं तत्व के आकार सहित अधिक चीजों को चेतन कर सकता है।
जावास्क्रिप्ट उन सभी को कर सकता है जो या तो कर सकते हैं, और इसे अच्छी तरह से कर सकते हैं। यह सिर्फ लागत पर आता है या तो वास्तव में खुद को जटिल कोड लिखना, या आपकी मदद करने के लिए एक पुस्तकालय का ओवरहेड। लेकिन एक बार जब आप उठ रहे हैं और चल रहे हैं, तो सिंटैक्स वास्तव में एनिमेशन के लिए अद्भुत और अनुकूल हो सकता है और प्रदर्शन वास्तव में शीर्ष पायदान पर हो सकता है।
SVG एनिमेशन के लिए जावास्क्रिप्ट के साथ जाने का एक और फायदा है। एसवीजी को एनिमेट करते समय बहुत सारे सवाल हैं। कुछ ब्राउज़र तत्वों पर रूपांतरण का समर्थन नहीं करते हैं। कुछ ब्राउज़र पेज जूमिंग के साथ अजीब चीजें करते हैं। कुछ परिवर्तन-मूल के साथ असंगत हैं। जावास्क्रिप्ट पुस्तकालय अक्सर इन समस्याओं के साथ मदद करते हैं।
जब हम विशेष रूप से एनीमेशन के बारे में बात कर रहे हैं, तो कई जावास्क्रिप्ट एसवीजी लाइब्रेरी सामान्य रूप से एसवीजी के साथ काम करने के बारे में हैं। वे इसे बना सकते हैं और इसमें हेरफेर कर सकते हैं, तत्व से गुणों का उपयोग कर सकते हैं, उन्हें बदल सकते हैं, आदि जैसे किवा एसवीजी में एक अधिक मजबूत एपीआई जोड़ सकते हैं।
Snag.svg - "SVG के लिए jQuery"
Snap.svg का उपयोग करने का मूल उदाहरण:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन भीहिक्स देखें।
Snap.svg के साथ इस वीडियो में एक और बात हमने इस CSS एनीमेशन पेन को Snap.svg में परिवर्तित कर दी है, हमें यह सिखाते हुए कि हम Snap.svg का उपयोग इनलाइन SVG के साथ काम करने के लिए पहले ही पृष्ठ पर कर सकते हैं। Adobe ने स्वयं कई उदाहरण एकत्र किए हैं।
राफेल - Snap.svg के समान निर्माता से पुरानी लाइब्रेरी
SVG.js - "एसवीजी में हेरफेर और एनिमेशन के लिए एक हल्का पुस्तकालय।" यहां हमने उस घड़ी के डेमो को देखा, जिसमें दिखाया गया है कि डोम के तेजी से हेरफेर से ये एनिमेशन कैसे काम करते हैं।
D3.js - "D3.js डेटा के आधार पर दस्तावेजों में हेरफेर करने के लिए एक जावास्क्रिप्ट लाइब्रेरी है। डी 3 आपको HTML, SVG और CSS का उपयोग करके जीवन में डेटा लाने में मदद करता है। ” यहाँ पर एक ट्यूटोरियल शुरू किया जा रहा है जिससे SVG और उसके साथ एक और परिचय बनाने की शुरुआत हुई है।
ग्रीनस्कॉक - "आधुनिक वेब के लिए अति-उच्च प्रदर्शन, पेशेवर-ग्रेड एनीमेशन।" ग्रीनसॉक सामान्य रूप से वेब पर एनिमेशन के बारे में है, लेकिन एसवीजी का समर्थन करता है। यहां एक पेन है जहां आप देख सकते हैं कि यह कैसे काम करता है।
वेलोसिटी.जेएस - "त्वरित जावास्क्रिप्ट एनीमेशन।" इसके अलावा सामान्य रूप से वेब पर एनीमेशन के बारे में एक पुस्तकालय, जो एसवीजी का समर्थन करने के लिए होता है। जूलियन शापिरो ने इसे बनाया और इस बारे में लिखा है कि जावास्क्रिप्ट एनीमेशन वास्तव में एनीमेशन की सबसे शानदार शैली क्यों हो सकती है और साथ ही साथ वेलोसिटी.जेएस कैसे काम करता है। यहाँ कुछ एसवीजी-विशिष्ट गुणों को दर्शाते हुए एक बहुत ही सरल डेमो है।
आप बिना किसी फ्रेमवर्क की सहायता से जावास्क्रिप्ट एनिमेशन के साथ अपने लिए जाने के लिए भी स्वतंत्र हैं। याद रखें इनलाइन SVG DOM में है, इसलिए सभी नियमित DOM API सामान आपके लिए उपलब्ध हैं। आप जैसे किंडा को वास्तव में डोम के साथ काम करने के लिए jQuery की आवश्यकता नहीं है, यह अक्सर इसे आसान बनाता है। यहाँ एक उदाहरण है जो चीजों को अपने तरीके से करता है जो बहुत दिलचस्प है।