निम्नलिखित चेतन svg के लिए संभव तरीके हैं:
SVG SMIL ANIMATIONS
SVG को अपनी शक्तिशाली देशी मार्कअप भाषा के माध्यम से एनिमेटेड किया जा सकता है, जिसे SMIL कहा जाता है, जिसे Adobe Animate CC + flash2svg प्लगइन जैसे एनीमेशन टूल्स से सीधे निर्यात किया जाता है।
समर्थन की कमी वाले ब्राउज़रों पर भी SMIL के साथ एक SVG को चेतन करने के लिए, आपको बस एक SMIL पॉलीफ़िल का उपयोग करने की आवश्यकता है।
पॉलीफ़िल कोड का एक विशेष जावास्क्रिप्ट टुकड़ा है जो ब्राउज़र से गायब होने वाली सुविधाओं के लिए समर्थन प्रदान करता है, मूल एन्कोडिंग का अनुवाद करता है जिसे ब्राउज़र समझ सकता है।
एरिक विलिगर्स द्वारा बनाई गई SMIL पॉलीफ़िल बस यही करती है: यह SMIL को वेब एनिमेशन API में अनुवाद करता है जो कि Microsoft ब्राउज़र भी सपोर्ट करता है। यह इतना कुशल है कि Google Chrome डेवलपर्स ने देशी SMIL समर्थन को छोड़ने और वेब एनिमेशन पर ध्यान केंद्रित करने का निर्णय लिया, जिससे एरिक विलिगरर्स ने Chrome में SMIL फ़ाइलों को चलाने के लिए कार्य को छोड़ दिया।
किसी ने इसे गलत तरीके से क्रोम द्वारा एसएमआईएल के एक पदावनति के रूप में व्याख्या की, और इस पसंद के लिए देवों की आलोचना की। लेकिन यह एक सच्चा पदावनति नहीं थी, सिर्फ एक पालीफिल स्तर पर एसएमआईएल की व्याख्या करने के काम का एक स्थानांतरण।
वास्तव में, Chrome देवों ने खुद को SMIL को रद्द करने के अपने इरादे के बारे में बहुत आधिकारिक घोषणा में विलीगर्स पॉलीफिल का हवाला दिया।
इसलिए यदि आप SMIL के निधन के बारे में वेब पर पढ़ते हैं, तो चिंता न करें। एसएमआईएल की "मौत" बहुत अधिक थी। यह पुनर्जन्म जैसा है।
IE और EDGE सहित सभी ब्राउज़रों पर SMIL का उपयोग करने के लिए, आपको बस इस जावास्क्रिप्ट पॉलीफ़िल को अपने वेब पेज पर जोड़ना होगा:
https://github.com/ericwilligers/svg-animation
यहाँ एक फ्लैश पृष्ठ है, जो लोकप्रिय फ्लैश 2svg निर्यातक के लेखक टॉम बर्न द्वारा बनाई गई पॉलीफिल का उपयोग कर रहा है:
पॉलीफ़िल के बिना पृष्ठ:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm
और पॉलीफ़िल के साथ एक ही पेज:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm
यदि आप स्रोत को देखते हैं तो यह बहुत अधिक आत्म-व्याख्यात्मक है।
इसके अलावा पॉलीफ़िल के साथ प्रदर्शन अक्सर मूल एसएमआईएल से बेहतर होते हैं, क्योंकि कई ब्राउज़रों पर वेब एनिमेशन हार्डवेयर त्वरित होते हैं, जबकि एसएमआईएल आमतौर पर नहीं होता है।
एसवीजी एसएमआईएल में निर्यात की गणना
SVG एनिमेशन बनाने का सबसे सरल तरीका है, Adobe Animate CC जैसे टूल्स का उपयोग करना और उन्हें SV2 में एक्सपोर्ट करने के लिए Flash2svg ( https://github.com/TomByrne/Flash2Svg ) जैसे प्लगइन्स । इसके साथ आप लगभग सभी एनिमेशन + साउंड को सिंगल SVG फ़ाइल के रूप में निर्यात कर सकते हैं, इस कार्टून एपिसोड की तरह:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg
SVG ANIMATION JS LIBRARIES
जावास्क्रिप्ट तरीका अधिक जटिल है। सबसे पहले आपको एक जावास्क्रिप्ट प्रोग्रामर होने की आवश्यकता है। फिर आपको कई पुस्तकालयों के बीच चयन करना होगा। अधिक लोकप्रिय हैं:
SnapSVG
http://snapsvg.io
यह लाइब्रेरी एक ही लेखक द्वारा बनाई गई पुरानी और लोकप्रिय राफेल एनीमेशन लाइब्रेरी की उत्तराधिकारी है। बहुत स्थिर है, लेकिन यह एसवीजी को एक आंतरिक प्रारूप में धर्मान्तरित कर देता है। मॉर्फिंग विकल्प भी बहुत बुनियादी हैं, बस रैखिक प्रक्षेप। (नोट: एडोब चेतन सीसी के लिए एक स्नैप। एसवीजी प्लगइन भी है, लेकिन निर्यात की गई फाइलें फूला हुआ है। निर्यातक एनीमेशन के हर फ्रेम के लिए एक स्नैप एसवीजी कमांड का उत्पादन करता है, प्रत्येक कीफ्रेम नहीं, 1000 लाइनों के साथ 18Kb svg फ़ाइल का उत्पादन करता है। कोड, बस 360 डिग्री के माध्यम से एक साधारण आयत को घुमाने के लिए। Flash2svg प्लगइन बहुत अधिक कुशल है, बस एक ही कमांड और कुछ बाइट्स एक ही काम करने के लिए)।
Greensock MorphSVG
http://greensock.com/morphSVG
एक पूरी तरह से चित्रित morphing पुस्तकालय है जो आसानी से SVG को चेतन करने की अनुमति देता है, और उन्हें आंतरिक स्वरूप में परिवर्तित करने की आवश्यकता के बिना। बस Inkscape में 3-4 svg कीफ्रेम बनाएं और ग्रीनॉक SVGMorphing lib स्वचालित रूप से फ़्रेमों के बीच इंटरपोलेट करेगा और एक चिकनी प्लेबैक के लिए सभी इन-द-बीच फ़्रेम बनाएगा। यहाँ एक उदाहरण है:
http://codepen.io/Emasoft/pen/reOqYE
3D Seen.js
http://seenjs.io/demo-svg-canvas.html
यदि आप 3D में चेतन करना चाहते हैं तो यह पुस्तकालय बहुत शक्तिशाली है।
Seen.js 3D को .obj फाइलों को SVG में प्रस्तुत करता है और उन्हें बहुत आसानी से एनिमेट करता है।
SVG इमेजेस एडिटर
उपकरणों के लिए, आप मुख्य रूप से तीन सॉफ्टवेयर के साथ एनीमेशन कीफ्रेम बना सकते हैं:
Inkscape: ओपन सोर्स, में कई सारी विशेषताएं हैं, इसका एक उन्नत वेक्टर संपादन पैकेज है जिसे SVG वर्किंग ग्रुप में पार्टिसिपेट कर रहे हैं। एसवीजी प्रारूप के लिए संदर्भ। सीखना आसान नहीं है।
एडोब इलस्ट्रेटर: वाणिज्यिक, बहुत शक्तिशाली वेक्टर ड्राइंग सॉफ्टवेयर, यह कई सुविधाएँ प्रदान करता है जो अभी भी एसवीजी द्वारा समर्थित नहीं हैं, लेकिन इसमें प्रारूप के साथ सबसे खराब संगतता भी है। इलस्ट्रेटर गड़बड़ को ठीक करने के लिए आपको अक्सर निर्यात की गई SVG फ़ाइल को मैन्युअल रूप से संपादित करने की आवश्यकता होगी। लेकिन यह कला विद्यालय में बहुत लोकप्रिय है, और सभी ग्राफ़िस्ट इसका उपयोग करना जानते हैं।
एफिनिटी डिज़ाइनर: यह इलस्ट्रेटर जैसा एक व्यावसायिक सॉफ्टवेयर है, लेकिन एक उत्कृष्ट एसवीजी संगतता के साथ, लगभग इंक्सस्केप के स्तर पर। UI बहुत अधिक अनुकूल है, और यह अब SVG कलाकारों के बीच बहुत लोकप्रिय हो रहा है।
SVG ANIMATION EDITORS
वर्तमान में केवल एसवीजी एनीमेशन संपादक यह है:
- Adobe Animate CC: पूर्व Adobe Flash Pro को Adobe द्वारा आधुनिक SVG एनिमेशन के अप्रचलित फ्लैश एनिमेशन से माइग्रेट करने के लिए पूरी तरह से फिर से लिखा गया था। आप कस्टम javascript लाइब्रेरी के साथ परिणामी SVG एनिमेशन को निर्यात कर सकते हैं, या "Flash2svg" जैसे प्लगइन्स का उपयोग करके SVG + SMIL में सहेजना चुन सकते हैं। यह अंतिम विकल्प बहुत ही कुशल है, मैं हमेशा इसका उपयोग फूला हुआ मूल निर्यातक के बजाय करता हूं।
आप यहां से मुफ्त प्लगइन डाउनलोड कर सकते हैं:
https://github.com/TomByrne/Flash2Svg
या इसे एडोब प्लगइन्स पैनल से स्थापित करें :
https://creative.adobe.com/addons/products/7232
दुर्भाग्य से एडोब चेतन सीसी वाणिज्यिक है। वहाँ मुक्त खुला स्रोत वैकल्पिक एनीमेशन अनुप्रयोग हैं, लेकिन मैंने उन सभी की कोशिश की और वे अभी भी IMHO चूसते हैं। भविष्य के लिए आशा करते हैं।
सन्दर्भ:
इस विषय पर मेरी अधिक संपूर्ण ब्लॉग पोस्ट: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec
मामला Snap.svg के बारे में संदर्भित है:
/programming/35727635/adobe-animate-snap-svg-plugin-huge-files