8 जावास्क्रिप्ट पुस्तकालय चेतन SVG के लिए
एसवीजी एक संकल्प-स्वतंत्र ग्राफिक है। इसका मतलब है कि यह होगा गुणवत्ता के किसी भी नुकसान को सहन किए बिना किसी भी प्रकार की स्क्रीन पर अच्छा देखें. इसके अलावा, आप एसवीजी को कुछ एनीमेशन प्रभावों के साथ जीवंत बना सकते हैं.
हमारी एसवीजी श्रृंखला के पहले के एक पोस्ट में, हमने आपको दिखाया है कि एसवीजी एनीमेशन कैसे काम करता है
Hongkiat.com पर अधिक:
- Animate.css - CSS3 लाइब्रेरी आसानी से एनीमेशन बनाने के लिए
- आसानी से Textillate.js के साथ पाठ चेतन
- Photoshop टेक्स्ट को SVG में कैसे कन्वर्ट करें
- JQuery के साथ सामग्री को छिपाने और स्लाइड करने में सक्षम
1. विवस
विवस एक जावास्क्रिप्ट लाइब्रेरी है आपके एसवीजी को आकर्षित होने का आभास देता है. विवस बिना किसी निर्भरता (जैसे jQuery) की आवश्यकता के बिना बॉक्स से बाहर काम करता है। बस शामिल हैं .js अपने HTML में फ़ाइल, और एनीमेशन को शुरू करने के लिए कुछ पूर्व निर्धारित विकल्पों के साथ-साथ आप जिस SVG तत्व को चेतन करना चाहते हैं, उसे नामित करें.
उदाहरण के लिए:
नया विवस ('svg-element', type: 'oneByOne', अवधि: 200); उपरोक्त मेरे SVG तत्व को चेतन करेगा जिसमें है svg-तत्व 200 मिलीसेकंड में आईडी। इस एसवीजी के प्रत्येक तत्व को उस समय-सीमा के भीतर एक के बाद एक खींचा जाएगा.
2. बोनसाई
बोन्साई एक शक्तिशाली जावास्क्रिप्ट लाइब्रेरी है जो आपको वेब पृष्ठों पर चित्र बनाने के साथ-साथ चेतन चित्रमय तत्वों को आकर्षित करने की अनुमति देती है। यह एचटीएमएल 5 ग्राफिक प्रकार कैनवस और एसवीजी दोनों का समर्थन करता है। बोनसाई के साथ, आप एक साधारण आयत या एक सर्कल बना सकते हैं या यदि आप चाहें, तो ए पूर्ण विकसित मल्टीप्लेयर इस तरह एक एनिमेटेड खेल। आप यह महसूस करने के लिए ऑर्बिट का उपयोग कर सकते हैं कि बोनसाई लाइव एक्शन में कैसे काम करता है या प्रेरणा लेने के लिए इन प्रभावशाली उदाहरणों के एक जोड़े की जाँच करें.
3. वेग
वेलोसिटी एक जावास्क्रिप्ट लाइब्रेरी है जिसे फास्ट एनिमेशन के लिए बनाया गया है। वेग की गति जब एनीमेशन प्रतिपादन अविश्वसनीय रूप से तेज है। यह तुलना में jQuery और यहां तक कि सीएसएस को बेहतर बनाता है। वेलोसिटी का एपीआई jQuery में एनीमेशन के समान काम करता है, सिवाय इसके कि वह कीवर्ड उपनाम का उपयोग करता है $ .Velocity () के बजाय $ .Animate (). एक तरफ, आप ठीक उसी एनीमेशन कीवर्ड का उपयोग कर सकते हैं जैसे कि में फीका तथा फेड आउट.
4. राफेल
राफेलजेएस एक पुस्तकालय है जो आपको वेब पेजों पर सदिश ग्राफिक ग्राफिक एसवीजी के साथ-साथ आकर्षित करने की अनुमति देता है। यह IE6 तक सभी तरह के ब्राउज़रों की एक विस्तृत श्रृंखला का समर्थन करता है, जो बहुत हद तक राफेल को सबसे भरोसेमंद जावास्क्रिप्ट लाइब्रेरी में जगह देता है। राफेलजेएस के साथ, आप काउंटर स्ट्राइक के लिए इंटरेक्टिव एनालिटिक चार्ट, दुनिया के नक्शे और गेम इंटरेक्शन का निर्माण कर सकते हैं.
5. स्नैप
SnapSVG राफेल डेवलपर, दिमित्री बारानोवस्की द्वारा विकसित एसवीजी एनीमेशन के लिए एक और लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है, साथ ही जमीन से एडोब वेब प्लेटफ़ॉर्म टीम भी। हालांकि राफेल के विपरीत, SnapSVG केवल नवीनतम ब्राउज़रों के लिए है। यह लाइब्रेरी को राफेल की तुलना में काफी छोटा और क्लिपिंग और मास्किंग जैसी एसवीजी सुविधाओं का समर्थन करने की अनुमति देता है.
6. आलसी रेखा चित्रकार
आलसी रेखा चित्रकार एसवीजी पथों को विविस के समान ड्राइंग अनुक्रम को एनिमेट करने के लिए एक jQuery प्लगइन है। बुरी खबर यह है कि यह प्लगइन केवल यह बहुत विशिष्ट बात करता है। इसलिए, जब आप इलस्ट्रेटर या इंकस्केप जैसे ऐप से एसवीजी आयात करते हैं, तो सुनिश्चित करें कि आपके एसवीजी पर कोई फिल रंग नहीं बचा है, बस रास्ते.
7. एसवीजी.जेएस
SVG.js एसवीजी में हेरफेर और एनिमेशन के लिए एक हल्का पुस्तकालय है। इस लाइब्रेरी के साथ, आप अपने एसवीजी तत्व के भीतर आकार, स्थिति या रंग को चेतन करने में सक्षम होंगे। यह न केवल हालांकि एनिमेट करता है; आप अतिरिक्त फ़ंक्शंस जोड़ने के लिए अतिरिक्त प्लगिन भी लगा सकते हैं। यह उदाहरण छवि के लिए गाऊसी धब्बा, उजाड़, विपरीत, सेपिया आदि जैसे फिल्टर लगाने के लिए svg.filter.js प्लगइन का उपयोग करता है।.
8. वॉकवे
वॉकवे तीन प्रकार के तत्वों का समर्थन करता है, पथ, लाइन, तथा पॉलीलाइन एसवीजी लाइनों को खींचने के लिए उपयोग किया जाता है। यहाँ बहुभुज से एक उदाहरण है जो PlayStation 4 कंसोल लाइन एनीमेशन दिखाता है.
