स्केलेबल वेक्टर ग्राफिक्स (SVG) एनिमेशन में एक नज़र
आज हम अपनी चर्चा जारी रखने जा रहे हैं स्केलेबल वेक्टर ग्राफिक (SVG), और इस बार हम साथ काम करने जा रहे हैं एसवीजी एनिमेशन. हालांकि डर नहीं है, एसवीजी एनीमेशन अपेक्षाकृत आसान है और वास्तव में इस पोस्ट में हम मूल बातें से शुरू करेंगे.
मूल कार्यान्वयन
एसवीजी में एनीमेशन के माध्यम से किया जा सकता है
जैसा कि आप ऊपर दिए गए कोड स्निपेट से देख सकते हैं, हम जोड़ते हैं
उत्तरदायी ठहराने के लिए नाम: यह विशेषता निर्दिष्ट करती है कि एनीमेशन में किस तत्व की विशेषता प्रभावित होगी.
से: यह विशेषता वैकल्पिक है, हम एक सटीक मान निर्दिष्ट कर सकते हैं या इसे छोड़ सकते हैं इसे शुरू करने के लिए जहां यह था.
सेवा मेरे: यह विशेषता एनीमेशन दिशा को निर्दिष्ट करती है। में निर्दिष्ट मूल्य पर निर्भर करता है उत्तरदायी ठहराने के लिए नाम, परिणाम भिन्न हो सकते हैं। लेकिन इस उदाहरण में इसका विस्तार होगा ऊंचाई.
dur: यह विशेषता एनीमेशन अवधि को निर्दिष्ट करती है। इस विशेषता का मान घड़ी मूल्य सिंटैक्स में व्यक्त किया गया है। उदाहरण के लिए, 2:33 2 मिनट और 33 सेकंड का प्रतिनिधित्व करता है, जबकि 3 ज 3 घंटे के बराबर है, लेकिन हमें उस समय की आवश्यकता नहीं है, इसलिए हमने केवल इसके लिए अवधि निर्दिष्ट की है 3s या 3 सेकंड;
यही बात आगे बढ़ती है आर).
- मूल कार्यान्वयन डेमो
चल रहा तत्व
एसवीजी तत्वों को स्थानांतरित करने में, हमें केवल तत्व के समन्वय को लक्षित करने की आवश्यकता है एक्स तथा y;
ऊपर के उदाहरण में, हम आयत को आगे बढ़ाते हैं 0 सेवा मेरे 200 3 सेकंड में, आयत बाएं से दाएं क्षैतिज रूप से चलती हुई दिखाई देगी। इसके अलावा, यदि आप ध्यान से देखें तो हमने एक और विशेषता भी जोड़ी है भरना.
भरना यहाँ विशेषता अन्य एसवीजी तत्वों की तरह पृष्ठभूमि रंग से कोई लेना-देना नहीं है। यह विशेषता निर्दिष्ट करती है कि अवधि समाप्त होने के बाद एनीमेशन कैसे कार्य करेगा। इस उदाहरण में हम फ्रीज प्रभावित तत्व तो यह रहता है जहां एनीमेशन समाप्त होता है.
यह भी इसी तरह काम करता है cx या cy, इस तरह:
- मूविंग एलिमेंट डेमो
चेतन अनेक गुण
अब तक, हम केवल एनिमेटेड होने के लिए एक विशेषता को लक्षित करते हैं, लेकिन एक बार में एक से अधिक विशेषताओं को एनिमेट करना संभव है। नीचे दिए गए उदाहरण से पता चलता है कि हम यह कैसे करते हैं:
जैसा कि आप देख सकते हैं, यह एक समान तरीके से काम करता है, केवल अब हमारे पास दो हैं
- एकाधिक गुण डेमो
एक पथ का अनुसरण
हमारी पिछली पोस्ट में एसवीजी में पाठ के साथ काम करना, हमने आपको दिखाया है कि टेक्स्ट को एक पथ पर कैसे प्रवाहित करें। में भी यही कार्य करना संभव है एसवीजी एनिमेशन, हम एक पथ का अनुसरण करने के लिए एक तत्व को चेतन कर सकते हैं। यहाँ एक उदाहरण है.
पथ बेहतर एक के भीतर परिभाषित किया गया है आईडी साथ में
यही है, अब इसे कार्रवाई में देखते हैं;
- पाथ डेमो के बाद
रूपांतरण
हम जैसे परिवर्तन का उपयोग कर सकते हैं स्केल, अनुवाद करना तथा घुमाना एनीमेशन के लिए, और ऐसा करने के लिए हम उपयोग करेंगे
एसवीजी में रूपांतरण CSS3 के साथ समान सिद्धांत साझा करता है, और हमने CSS3 2 डी परिवर्तन के बारे में अपनी पिछली पोस्ट में इसके बारे में काफी विस्तार से कवर किया है.
- परिवर्तन डेमो
अंतिम विचार
एसवीजी एनीमेशन पर अपनी प्रवीणता के आधार पर आप कुछ इस तरह से बना सकते हैं.
फ्लैश एनिमेशन पर एसवीजी एनीमेशन का उपयोग करने का एक फायदा यह है कि यह काम करने के लिए तीसरे पक्ष के प्लगइन्स पर भरोसा नहीं करता है और यह फ्लैश की तुलना में काफी तेज है। Adobe ने Android में अपने फ़्लैश समर्थन को रोकने के बाद, आप अपनी अगली वेबसाइट में एनीमेशन की सेवा के लिए इस दृष्टिकोण को आज़माना शुरू कर सकते हैं.
आगे के संदर्भ
- एसवीजी चेतन प्रलेखन
- उन्नत एसवीजी एनिमेशन तकनीक
- डेमो देखें
- स्रोत डाउनलोड करें
