एसवीजी को एनिमेटेड करना थोड़ा अनूठा है कि इसमें तीन अलग-अलग तरीके हैं जो आप इसे एनिमेट कर सकते हैं।
1. सीएसएस @keyframes के साथ एनिमेटेड
एसवीजी तत्वों को सीएसएस के साथ लक्षित और स्टाइल किया जा सकता है। मतलब, आप @keyframes के माध्यम से एनीमेशन लागू कर सकते हैं। इस कदर:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )आप इस तरह से एनिमेट कर सकते हैं यदि…
- एनीमेशन काफी सरल है।
- आपको केवल उन गुणों को चेतन करने की आवश्यकता है जो CSS एनिमेट कर सकते हैं।
- आप पहले से ही जानते हैं और सीएसएस एनिमेशन के साथ सहज हैं।
2. एसएमआईएल के साथ एनिमेटेड
वहाँ सही SVG में निर्मित एनिमेशन के लिए एक वाक्यविन्यास है। यहाँ एक बहुत ही सरल उदाहरण दिया गया है:
यहाँ SMIL पर एक बड़ा ट्यूटोरियल है।
आप इस तरह से एनिमेट कर सकते हैं यदि…
- आपको उन गुणों को चेतन करने की आवश्यकता है जो CSS आकार की तरह नहीं कर सकते।
- आपको अन्य SMIL विशिष्ट विशेषताओं की आवश्यकता है, जैसे कि एक एनीमेशन की शुरुआत जब कोई दूसरा मैन्युअल रूप से ड्यूरेशन / देरी को सिंक्रनाइज़ किए बिना होता है। या इंटरैक्शन सामान, जैसे एक क्लिक पर एनीमेशन शुरू करना।
3. जावास्क्रिप्ट के साथ एनिमेटेड
जावास्क्रिप्ट के साथ, आपके पास requestAnimationFrame (या अन्य लूप) जैसी चीजों तक पहुंच है, इसलिए आप बस तेजी से बदलते संपत्ति मूल्यों के माध्यम से चेतन कर सकते हैं। वहाँ भी SVG के साथ काम करने के लिए रूपरेखाएँ हैं जो आम तौर पर एनीमेशन में निर्मित एनीमेशन सामान है। या एनीमेशन फ्रेमवर्क जो SVG के साथ काम करते हैं। जैसे SnapSVG, GreenSock, SVG.js, या Velocity.js।
यहाँ SnapSVG के साथ एक उदाहरण दिया गया है:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);आप इस तरह से एनिमेट कर सकते हैं यदि…
- आप वैसे भी जावास्क्रिप्ट में काम कर रहे हैं, शायद आपके एनीमेशन को JSON या इस तरह से प्राप्त डेटा के साथ करना होगा।
- आपको वैसे भी जावास्क्रिप्ट की आवश्यकता है, क्योंकि आपको तर्क या गणित की आवश्यकता है या कुछ और वास्तव में केवल वहां संभव है।
- आप जावास्क्रिप्ट में रुचि रखते हैं कि आप के लिए कुछ कीड़े हल कर रहे हैं।
- आपके एनीमेशन का दायरा बड़ा / जटिल है और आपको अमूर्तता की आवश्यकता है और संगठन जावास्क्रिप्ट प्रदान कर सकता है।
डेमो
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा एसवीजी को चेतन करने के तीन तरीके देखें।
यह नहीं है कि आप अंततः एसवीजी का उपयोग अपने विकल्पों को कैसे प्रभावित करते हैं?
ऐसा होता है। यदि आप SVG-as- का उपयोग कर रहे हैं , तो आप किसी अन्य स्टाइलशीट से CSS एनिमेशन का उपयोग नहीं कर पाएंगे। लेकिन, आप SMIL एनिमेशन काम करेंगे, कुछ ब्राउज़रों में (इस लेखन के समय, क्रोम हाँ, फ़ायरफ़ॉक्स नं)। मुझे आश्चर्य नहीं होगा अगर एसवीजी फाइलों में सीएसएस एम्बेडेड है या एक दिन काम करेगा। जावास्क्रिप्ट, शायद नहीं।
यदि आप सीएसएस पृष्ठभूमि-छवि में एसवीजी का उपयोग कर रहे हैं, तो मुझे लगता है कि यह ऊपर की तरह एक समान कहानी है।
यदि आप इनलाइन का उपयोग करते हैं , तो सभी संभावनाएं आपके लिए खुली हैं।
आप एक के माध्यम से एसवीजी उपयोग कर रहे हैं objectया iframeआप सही काम करने के लिए इसके लिए एसवीजी में एम्बेड लिपियों / शैलियों की आवश्यकता होगी।