सभी एसवीजी एनिमेशन के बारे में

इस लेख में मैं एसवीजी ग्राफिक्स, एसवीजी एनीमेशन (पथ सहित), समस्याओं और उन्हें हल करने के तरीकों के साथ काम करने की जटिलताओं को उजागर करना चाहता हूं, साथ ही विभिन्न नुकसान भी, जिनमें से बहुत सारे एसवीजी हैं। मैं इस लेख को एक विस्तृत मार्गदर्शिका के रूप में रखता हूं।



प्लगइन्स, लाइब्रेरी आदि नहीं होंगे, हम केवल शुद्ध एसवीजी के बारे में बात करेंगे।
मेरे द्वारा उपयोग किया जाने वाला एकमात्र उपकरण Adobe Illustrator है।

प्रस्तावना

यह सब एक उबाऊ व्याख्यान के साथ शुरू हुआ और कम से कम कुछ के साथ खुद को मनोरंजन करने की उम्मीद में, मैंने एसवीजी ग्राफिक्स, अर्थात् एनीमेशन का अध्ययन करने का फैसला किया। मेरे आश्चर्य के लिए, इंटरनेट पर बहुत कम जानकारी थी। हर जगह मूलरूपों की व्याख्या करने वाली डुप्लिकेट जानकारी थी, लेकिन सामान्य रूप से समान लिंक वाली 2-3 लिंक की ताकत से एनीमेशन के बारे में, जो कि लेख ए गाइड टू एसवीजी एनिमेशन (एसएमआईएल) द्वारा सारा सुयडान का अनुवाद है।

उसका लेख सब कुछ के बारे में बात करता है, लेकिन सतही तौर पर। फिर भी, मैं दृढ़ता से सलाह देता हूं कि आप इसके साथ खुद को परिचित करें। * अनुवाद के लिए लिंक *

अगले कुछ हफ़्ते मैंने विभिन्न स्रोतों से टुकड़े द्वारा जानकारी इकट्ठा करने में बिताया। इन खोजों का परिणाम यह लेख है।

इलस्ट्रेटर से उचित एसवीजी निर्यात

यह अनुभाग एडोब इलस्ट्रेटर की सुविधाओं और समस्याओं पर केंद्रित है, इसलिए यदि आप इलस्ट्रेटर का उपयोग नहीं कर रहे हैं, तो आप इस भाग को छोड़ सकते हैं।

एनीमेशन के लिए एक दस्तावेज तैयार करना एक बहुत ही महत्वपूर्ण चरण है, जिसकी उपेक्षा से बहुत अप्रिय परिणाम हो सकते हैं। आपको यह बताने के लिए कि इलस्ट्रेटर में बेहतर कैसे आकर्षित करें, मैं नहीं करूंगा। केवल एक चीज मैं कहूंगा कि आकृतियों को बनाते समय, आपको मूल्यों का ट्रैक रखना चाहिए, यह वांछनीय है कि उनके पास दशमलव बिंदु के बाद केवल एक ही संख्या है, और पूर्णांक होना बेहतर है। इस नियम का पालन करना आवश्यक नहीं है, लेकिन यह फ़ाइल आकार को कम कर देगा, आगे के एनीमेशन को सरल करेगा और सूचना की मात्रा को कम करेगा। देख लेना

<path d="M 17.7 29 C 28.2 12.9 47 5.6 62.8 10.4 c 28.2 8.5 30 50.5 24.8 53.1 c -2.6 1.3 -10.4 -6.1 -29.2 -34.6"/> <path d="M 17.651 28.956 c 10.56 -16.04 29.351 -23.359 45.12 -18.589 c 28.151 8.516 29.957 50.5 24.841 53.063 c -2.631 1.318 -10.381 -6.148 -29.235 -34.643"/> 

उदाहरण में, एक ही वक्र, लेकिन पहले मामले में, दशमलव बिंदु के बाद एक अंक, और दूसरे तीन में। इस वक्र में केवल 4 अंक हैं, और दूसरा उदाहरण पहले की तुलना में एक तिहाई लंबा है। कल्पना कीजिए कि 20-बिंदु वक्र कितना स्थान लेगा।

वायरफ्रेम तैयार होने के बाद, आपको एसवीजी फ़ाइल के रूप में छवि को सहेजना होगा। इसे करने के दो तरीके हैं - Save As या Export As। लेकिन कौन सा रास्ता चुनना है? यदि आप मुझ पर भरोसा करते हैं, तो बेहतर उपयोग करें "के रूप में सहेजें।" यदि आप जानना चाहते हैं कि क्यों, तो एक स्पॉइलर को तैनात करें।

HTML में SVG डॉक्यूमेंट आयात करने के तरीके

इससे पहले कि मैं सीधे एनीमेशन से शुरू करूं, मैं एक पृष्ठ पर एसवीजी को एम्बेड करने के बारे में बात करना चाहता हूं। प्रत्येक विधि की अपनी "विशेषताएं" होती हैं जिनका एनीमेशन पर सीधा प्रभाव पड़ता है। और अगर आप उनके बारे में बात नहीं करते हैं, तो लेख अधूरा होगा।
मान लीजिए कि आपके पास इंटरैक्टिव एनीमेशन के साथ पहले से ही तैयार एसवीजी है और यह इस दस्तावेज को साइट पर एम्बेड करने के लिए बना हुआ है। यह कैसे करें?

विकल्प नंबर एक यह याद रखना है कि एसवीजी भी एक छवि है और इसे मानक एचटीएमएल टूल्स का उपयोग करके आयात किया जा सकता है। आप किसी दस्तावेज़ के लिंक के साथ <img> टैग बना सकते हैं

 <img src="Hello_SVG.svg" /> 

या पृष्ठभूमि छवि के रूप में SVG सेट करें

 #box { background-image: url("Hello_again.svg"); } 

इस पद्धति का मुख्य नुकसान छवि का अलगाव है। संग्रहालय में एसवीजी एक प्रदर्शनी के रूप में - आप देख सकते हैं, कोई स्पर्श नहीं। अंदर का एनीमेशन काम करेगा, लेकिन कोई अन्तरक्रियाशीलता की बात नहीं हो सकती है। यदि, उदाहरण के लिए, एक एनीमेशन उपयोगकर्ता क्लिक द्वारा ट्रिगर होता है, या एसवीजी दस्तावेज़ की सामग्री को गतिशील रूप से बदलने की आवश्यकता होती है, तो यह विधि आपके लिए नहीं है।

विकल्प संख्या दो <ऑब्जेक्ट> या <एम्बेड> टैग का उपयोग करके एसवीजी से एक ऑब्जेक्ट बनाना है। फ़्रेम बनाने के लिए <iframe> का उपयोग करना भी संभव है, लेकिन मैं इस पद्धति का उपयोग करने की अनुशंसा नहीं करता, क्योंकि सभी ब्राउज़रों के लिए एक बैसाखी आवश्यक है ताकि यह विकल्प सही ढंग से प्रदर्शित हो

 <object data="My_SVG.svg" type="image/svg+xml"></object> <embed src="My_SVG.svg" type="image/svg+xml" /> <iframe src="My_SVG.svg"></iframe> 

यहां हालात बेहतर हैं। एनिमेशन को संवादात्मक होने का अवसर मिलता है, लेकिन केवल अगर वे एक एसवीजी दस्तावेज़ के अंदर घोषित किए जाते हैं, और सामग्री बाहरी जावास्क्रिप्ट के लिए उपलब्ध है। फिर भी <ऑब्जेक्ट> और <iframe> एक स्टब दिखा सकता है अगर अचानक छवि लोड नहीं होती है।

ऑप्शन नंबर तीन बस एसवीजी दस्तावेज़ की सामग्री को सीधे HTML में पेस्ट करना है। हाँ, आप कर सकते हैं। एसवीजी समर्थन एचटीएमएल 5 मानक में दिखाई दिया। चूंकि एसवीजी अनिवार्य रूप से पेज का ही हिस्सा है, इसलिए हर जगह इसकी पहुंच है। तत्वों के एनिमेशन और शैलियों को एसवीजी के अंदर और बाहरी फ़ाइलों में दोनों घोषित किया जा सकता है। नकारात्मक पक्ष यह है कि ऐसी छवियां केवल पृष्ठ से अलग से कैश नहीं करती हैं

 <body> ... <svg> <!--  --> </svg> </body> 

एसवीजी एनीमेशन

एसवीजी तत्व को चेतन करने के दो मुख्य तरीके हैं:

• सीएसएस एनीमेशन
• SMIL एनीमेशन SVG में बनाया गया (वास्तव में, यह एक SVG एनीमेशन है जो SMIL पर आधारित है और इसकी कार्यक्षमता बढ़ाता है)

व्यक्तिगत रूप से, मैं उन्हें "बाहरी" और "आंतरिक" के एनिमेशन के रूप में अलग करता हूं। यह विभाजन सशर्त है, लेकिन फिर भी उनके पास कार्यात्मक अंतर हैं। अगर हम सामान्य रूप से मतभेदों के बारे में बात करते हैं: CSS - में ब्राउज़रों के लिए बेहतर समर्थन है; एसएमआईएल - की बड़ी कार्यक्षमता है। यह कहना कठिन है कि कौन सा उपयोग करना बेहतर है क्योंकि वे एक जैसे हैं। पसंद कार्य पर निर्भर करती है, इसलिए मैं सीएसएस के बजाय एसएमआईएल का उपयोग करने के मुख्य कारणों को कहूंगा

SMIL - जब जरूरत हो:

1. CSS क्या नहीं कर सका (एक असमर्थित विशेषता को एनिमेट करें, आदि)
2. एनीमेशन पर अधिक सटीक नियंत्रण रखें।
3. पथ मॉर्फिंग करें ( पथ टैग पर विशेषता d का एनीमेशन)
4. सिंक एनिमेशन
5. संवादात्मक एनिमेशन बनाएं

अगर मैंने लिखा है कि एसएमआईएल का उपयोग इंटरएक्टिव एनिमेशन के लिए किया जाना चाहिए, इसका मतलब यह नहीं है कि सीएसएस के साथ ऐसा नहीं किया जा सकता है। बस SMIL एक अधिक कार्यात्मक और परिष्कृत उपकरण है। और इसीलिए इसका उपयोग आवश्यक होने पर ही किया जाना चाहिए। यदि एनीमेशन सरल है और सीएसएस के साथ तिरस्कृत किया जा सकता है, तो यह किया जाना चाहिए।

सीएसएस एनीमेशन

यहां कुछ भी नया नहीं है। हम किसी भी SVG तत्व को उसी तरह से एनिमेट कर सकते हैं जैसे हम HTML के साथ करते हैं। सभी एनिमेशन @keyframes का उपयोग करके बनाए गए हैं। चूंकि सीएसएस एनीमेशन एक अन्य विषय है, इसलिए मैं इस बिंदु पर विस्तार से नहीं बताऊंगा, नेटवर्क इस विषय पर प्रलेखन और गाइड से भरा है। वहाँ वर्णित सब कुछ एसवीजी पर लागू होता है, लेकिन मैं सिर्फ कुछ उदाहरण दूंगा।

एसवीजी दस्तावेज़ में आंतरिक स्टाइलशीट हैं, इसलिए हम उनमें एनिमेशन लिखेंगे

 <svg> <style> <!--   --> </style> <!--   SVG  --> </svg> 

एसवीजी विशेषता को एनिमेटेड करना सीएसएस विशेषताओं के समान सरल है

 @keyframes reduce_radius { from { r: 10; } to { r: 3; } } @keyframes change_fill { 0% { fill: #49549E; } 75% { fill: #1bceb1; } 100% { fill: #1bce4f; } } 

आप मानों को प्रतिशत के रूप में और निर्माण के लिए निर्दिष्ट कर सकते हैं

तब यह केवल वांछित तत्व को बनाए गए एनिमेशन को लागू करने के लिए रहता है

 .circle { animation: change_fill 1s, popup 2s; } 

ऊपर मैंने जो कुछ भी वर्णित किया है, वह सभी स्थैतिक एनिमेशन हैं, वहां पर अन्तरक्रियाशीलता की कोई गंध नहीं है। लेकिन अगर तुम सच में चाहते हो तो क्या होगा? खैर, कुछ अभी भी संवादात्मक और सीएसएस में किया जा सकता है। उदाहरण के लिए, यदि आप मंडराना छद्म वर्ग के साथ संयोजन में संक्रमण का उपयोग करते हैं

 .circle { fill: #49549E; transition: .3s; } .circle:hover { fill: #1bceb1; } 

जब आप किसी आइटम पर होवर करते हैं, तो वह 300 मीटर के लिए अपने रंग को नीले से नीले रंग में बदल देगा

विशेषताओं का एनीमेशन और अन्तरक्रियाशीलता का एक छोटा सा टुकड़ा - यह वह जगह है जहाँ सीएसएस एनीमेशन की विशेषताएं समाप्त होती हैं। लेकिन यह कार्यक्षमता पर्याप्त है, क्योंकि अधिकांश कार्य कुछ विशेषता को एनिमेट करने के लिए नीचे आते हैं। लगभग कोई भी एसवीजी विशेषता एनिमेटेड हो सकती है। और जब मैं "लगभग किसी भी" लिखता हूं, तो मेरा मतलब है कि यदि आप एक यादृच्छिक विशेषता चुनते हैं और यह गैर-अपरिवर्तनीय है, तो आप बहुत भाग्यशाली हैं।

SMIL एनीमेशन

यह कहना सही है कि SMIL एनीमेशन दुनिया के रूप में पुराना है और यह मर रहा है, ब्राउज़र समर्थन सभ्य है, लेकिन अभी भी CSS एनीमेशन से कम है, लेकिन एक कारण है कि SMIL अभी भी आकर्षक है - यह इसलिए हो सकता है क्योंकि CSS नहीं कर सकता।

मैं एसएमआईएल के बारे में अधिक बात करूंगा, क्योंकि ऐसे कई नुकसान हैं जिनके बारे में वे शायद ही कभी लिखते हैं। और यह विषय CSS से कम लोकप्रिय नहीं है। एनीमेशन के लिए मुख्य टैग <चेतन> , <सेट> , <चेतन ट्रांसफॉर्मर> , <चेतन भाव> हैं ।

<चेतन>

चलो भारी तोपखाने के साथ शुरू करते हैं। <चेतन> - किसी भी विशेषता को चेतन करने के लिए प्रयोग किया जाता है और मुख्य उपकरण है। शेष टैग अत्यधिक विशिष्ट हैं, लेकिन पहले चीजें पहले।

किसी तत्व में एनीमेशन कैसे लागू करें?

तत्व को निर्दिष्ट करने के दो तरीके हैं जिनमें एनीमेशन लागू किया जाएगा।

1. तत्व के अंदर टैग लगाएं। यह विधि आपको ऑब्जेक्ट के अंदर एनीमेशन को एनकोड करने की अनुमति देती है, जिससे कोड को पढ़ना आसान हो जाता है
   
   

    <circle ...> <animate .../> </circle> 

   इस मामले में, एनीमेशन को सर्कल तत्व पर लागू किया जाएगा।
2. आइटम के लिंक को पास करें। उपयोगी है यदि आप चाहते हैं कि सभी एनिमेशन एक ही स्थान पर एकत्र किए जाएं
   
   

    <svg xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="blue" .../> ... <animate xlink:href="#blue" .../> </svg> 

   यहाँ xlink: href विशेषता का उपयोग किया जाता है, जिसमें हम उस तत्व की आईडी को निर्दिष्ट करते हैं जिसमें एनीमेशन को लागू करना चाहिए। इस विधि को काम करने के लिए, आपको xlink नामस्थान को परिभाषित करना होगा। यह <svg> टैग में किया जाता है ।
   

SVG 2 के साथ, xlink: href विशेषता को हटा दिया जाता है, विनिर्देश इसके बजाय href का उपयोग करने की सलाह देता है, जिसे xlink नाम स्थान की आवश्यकता नहीं होती है।

 <circle id="blue" .../> ... <animate href="#blue" .../> 

लेकिन यहां, सब कुछ इतना आसान नहीं है - सफारी द्वारा href समर्थित नहीं है। यह गतिरोध की स्थिति को बताता है, एक विशेषता पुरानी है, दूसरी आंशिक रूप से समर्थित नहीं है। तो क्या विधि का उपयोग करें, हर कोई खुद के लिए फैसला करता है।

उन लोगों के लिए जिन्होंने सीएसएस चयनकर्ताओं के साथ समानताएं देखी हैं: मुझे निराशा के लिए खेद है, मैं कक्षा तक तत्वों का उपयोग नहीं कर पाऊंगा

 <circle class="blue_circle" .../> <animate href=".blue_circle" .../> 

यह काम नहीं करता है!

एनीमेशन के लिए एक विशेषता कैसे निर्दिष्ट करें?

इसके लिए विशेषतानाम है। मान उस विशेषता का नाम है जिसे हम चेतन करेंगे।

 <circle r="25" ...> <animate attributeName="r" ... /> </circle> 

विशेषतानाम में r निर्दिष्ट करके, हम रिपोर्ट करते हैं कि हम वृत्त की त्रिज्या को चेतन करने जा रहे हैं

क्या विशेषता है और आपको इसकी आवश्यकता क्यों नहीं है?

क्योंकि वह बेकार है
सिद्धांत रूप में, सीएसएस और एक्सएमएल मैच में विशेषता नामों के कारण एक क्षण उत्पन्न हो सकता है, जिससे समस्याएं हो सकती हैं। और इस संघर्ष को हल करने के लिए, आपको स्पष्ट रूप से एक नामस्थान निर्दिष्ट करना होगा। दो तरह की कुर्सियां ​​हैं : एक उपसर्ग निर्दिष्ट करें या विशेषता टाइप का उपयोग करें। चलो उपसर्ग के साथ शुरू करते हैं।

हर जगह वे निम्नलिखित की तरह कुछ लिखते हैं:

आप अपने नाम स्थान को स्पष्ट रूप से निर्दिष्ट करने के लिए किसी विशेषता के लिए XMLNS उपसर्ग निर्दिष्ट कर सकते हैं

इस विधि का उल्लेख और उदाहरण के बिना पारित करने में किया जाता है। इसलिए मैं परंपराओं को नहीं बदलूंगा। (मैं आपको यहाँ रुकने की सलाह देता हूँ, दुःस्वप्न के रूप में उपसर्गों के बारे में भूल सकता हूं और एट्रीब्यूट में जा सकता हूं, मैंने आपको चेतावनी दी है)


यह स्पष्ट रूप से इंगित करने के लिए कि एनिमेटेड विशेषता क्या है, विशेषता टाइप का उपयोग किया जाता है। यह 3 मान लेता है: सीएसएस , एक्सएमएल , ऑटो । जब तक विशेषता टाइप स्पष्ट रूप से निर्दिष्ट नहीं किया जाता है, तब तक ऑटो का उपयोग किया जाएगा। इस स्थिति में, CSS गुणों को पहले चेक किया जाता है, और यदि कोई मिलान नहीं हैं, तो लक्ष्य तत्व की विशेषताओं की जांच की जाती है। उदाहरण में, हम इंगित करते हैं कि हम सीएसएस संपत्ति को ठीक से चेतन करने जा रहे हैं

 <animate attributeType="CSS" attributeName="opacity" .../> 

खैर, विशेषता टाइप आपको आसानी से और बिना बैसाखी के यह बताने की अनुमति देता है कि एनिमेटेड विशेषता क्या है, जिससे "समस्या" का समाधान होता है, जो मौजूद भी नहीं है।

अप्रत्याशित रूप से, है ना? जैसा कि मैंने अध्याय की शुरुआत में कहा था - एसएमआईएल मर रहा है और यह इस तथ्य के कारण है कि एनीमेशन सीएसएस की पटरियों पर स्थानांतरित हो गया है। अधिकांश डुप्लिकेट विशेषताएँ एक दूसरे के लिए बिल्कुल समान हैं, अर्थात इससे कोई फर्क नहीं पड़ता कि सीएसएस या एसएमआईएल विशेषता क्या है - परिणाम समान होगा। और डिफ़ॉल्ट ऑटो वैल्यू के संयोजन में, स्पष्ट रूप से विशेषता टाइप को परिभाषित करने की आवश्यकता नहीं है।

दिलचस्प तथ्यों का एक क्षण: विशेषता टाइप एसवीजी द्वारा समर्थित नहीं है। वह तब कहां से आया था? वह SMIL एनीमेशन से हमारे पास आया, जिस पर SVG एनीमेशन आधारित है। और एसवीजी 1.1 सेकंड संस्करण के बाद भी एटिट्यूड हटा दिया गया है। यहां सभी प्रमाण

एनीमेशन मान कैसे निर्धारित करें?

एनीमेशन के लिए एक विशेषता निर्दिष्ट करना पर्याप्त नहीं है; आपको इसके मूल्यों को परिभाषित करना होगा। यहाँ, से , से , मूल्यों से आते हैं ।

आइए एक ऐसे जोड़े से शुरू करें जो हमेशा एक साथ: से और तक । उनके अस्तित्व का अर्थ स्पष्ट है, शुरुआत से लेकर अंत तक इंगित करता है

 <circle r="25" ...> <animate attributeName="r" from="10" to="45" .../> </circle> 

एनीमेशन का परिणाम 10 से 45 तक सर्कल के त्रिज्या में एक चिकनी बदलाव होगा

हालांकि मैंने कहा कि वे हमेशा एक साथ हैं, इसका उपयोग स्पष्ट रूप से घोषित किए बिना भी किया जा सकता है । इस मामले में, से लक्ष्य तत्व में परिभाषित मूल्य पर ले जाएगा। ऊपर दिए गए उदाहरण के लिए, एनीमेशन 25 से शुरू होगा।

यदि कई मानों का एक सेट निर्दिष्ट करने की आवश्यकता है, तो मूल्यों का उपयोग किया जाता है। मान एक अर्धविराम के साथ सूचीबद्ध हैं।

 <circle r="25" ...> <animate attributeName="r" values="15;50;25" .../> </circle> 

त्रिज्या मान 15 तक घट जाता है, फिर 50 तक बढ़ जाता है और फिर अपनी मूल स्थिति में लौट आता है।

द्वारा लाइन में अंतिम। वह "कहाँ" और "कहाँ" की परवाह नहीं करता है, जो उसके लिए सभी हित "कितना" है। दूसरे शब्दों में, पूर्ण मूल्यों के बजाय, यह सापेक्ष के साथ काम करता है

 <circle r="25" ...> <animate attributeName="r" by="15" .../> </circle> 

एनीमेशन के परिणामस्वरूप, त्रिज्या 15 से बढ़ जाएगा, अर्थात, 25 + 15 = 40 प्राप्त करें

एक किंवदंती मैनुअल के विस्तार के चारों ओर घूमती है जो " द्वारा उस राशि को इंगित करने के लिए उपयोग किया जा सकता है जिसके द्वारा एनिमेशन को आगे बढ़ना चाहिए । " मैं इसे इस तरह से समझता हूं: यदि = 20 से , = 50 तक , और = 10 से दिया जाता है , तो इस मार्ग को 10 में "कूद" से दूर किया जाना चाहिए, अर्थात्। २०, ३०, ४०, ५०। लेकिन मैंने और उसके बिना, किसी भी तरह की कोशिश नहीं की, एनीमेशन थोड़ा नहीं बदला। इसके अलावा, मुझे विनिर्देश में पुष्टि नहीं मिली। ऐसा लगता है कि यह सिर्फ एक गलती है।

मानों की सर्वोच्च प्राथमिकता है, फिर - से , अंतिम तक । सबसे कम प्राथमिकता बताती है कि सिद्धांत में "किंवदंती" काम क्यों नहीं कर सकती है। हालाँकि, इस मामले में, इस मामले में, तत्व की वर्तमान स्थिति को ओवरराइड करता है

 <circle cy="50" ...> <animate attributeName="cy" from="70" by="30" .../> </circle> 

यहां 50 के बजाय एनीमेशन 70 पर शुरू होता है और 100 पर समाप्त होता है

रिश्तेदार एनिमेशन के बारे में अधिक

आप अन्य विशेषताओं को उसी के अनुसार काम कर सकते हैं। यह योगात्मक विशेषता का उपयोग करके किया जाता है, जिसमें दो स्थान हैं - प्रतिस्थापित और योग ।पहला डिफ़ॉल्ट है, इसलिए हम दूसरे में रुचि रखते हैं। राशि के मूल्य के साथ , सभी गुण लक्ष्य तत्व के वर्तमान मूल्य में जोड़ दिए जाएंगे, अर्थात। जब मानों का फॉर्म = ५ और १५ के साथ २० की त्रिज्या को एनिमेशन करते हैं, तो एनीमेशन २० + ५ से २० + १५ तक होगा

 <circle r="20" ...> <animate attributeName="r" from="5" to="15" additive="sum" .../> </circle> 

एनीमेशन का प्रदर्शन करते समय, 25 की स्थिति के लिए एक तेज कूद होगा, जो अच्छा नहीं है (जब तक, निश्चित रूप से, यह इरादा नहीं है)। इसे फॉर्म = 0 से बचा जा सकता है , लेकिन तब योग का उपयोग करने का अर्थ खो जाता है , क्योंकि एक ही प्रभाव का उपयोग किए बिना योगात्मक के बिना प्राप्त किया जा सकता है

 <animate attributeName="r" from="0" to="15" additive="sum" .../> <animate attributeName="r" by="15" .../> 

मेरे लिए, दूसरी विधि बहुत अधिक समझने योग्य और सुविधाजनक है।

एनीमेशन की अवधि निर्दिष्ट करने के लिए कहां है?

अंतिम आवश्यक विशेषता कार्य एनीमेशन बनाने के लिए छोड़ दी जाती है - और यह ड्यूर है । विशेषता मान एनीमेशन की अवधि निर्धारित करता है, जिसे सेकंड और मिलीसेकंड दोनों में निर्दिष्ट किया जा सकता है

 <animate dur="0.5s" .../> <animate dur="500ms" .../> <animate dur="00:00:00.5" .../> 

अंतिम पंक्ति से आप अनुमान लगा सकते हैं कि कुछ और है ...

आप मिनटों और घंटों में भी मूल्यों का संकेत दे सकते हैं

 <animate dur="1.2min" .../> <animate dur="0.02h" .../> 

बकवास जानता है, नरक को आपने घंटों में मानों को इंगित करने का प्रबंधन क्यों किया, लेकिन मैं अन्य लोगों के मामलों में नहीं जाता, यदि आप चाहते हैं, तो इसका मतलब यह है कि ...
अन्य विशेषताओं के लिए, अस्थायी मान समान रूपों में सेट किए जाते हैं,

मैं शुरुआत में लौटने से पहले एनीमेशन को रोकने के लिए क्या कर सकता हूं? भरण

विशेषता (अपने नाम के साथ इस विशेषता को भ्रमित न करें) एनीमेशन के अंत के बाद तत्व के व्यवहार के लिए जिम्मेदार है। दो विकल्प हैं:

• निकालें (डिफ़ॉल्ट मान) - जैसे ही एनीमेशन अपने अंत तक पहुँचता है, सभी परिवर्तन रीसेट हो जाते हैं और तत्व एनीमेशन से पहले एक स्थिति लेता है
• फ्रीज - तत्व एनीमेशन की अंतिम स्थिति में जमा देता है

क्या लूप एनिमेशन करना संभव है?

जवाब है हां। ऐसा करने के लिए, दोहराव विशेषता एक अनिश्चित मान निर्दिष्ट करता है । विशेषता एनीमेशन की पुनरावृत्ति की संख्या निर्धारित करती है और डिफॉल्ट से 1 होती है, लेकिन आप किसी भी संख्या को निर्दिष्ट कर सकते हैं

 <animate repeatCount="indefinite" .../> <animate repeatCount="3" .../> 

पहला अंतहीन दोहराएगा, दूसरा 3 बार काम करेगा।

अब अंतहीन एनिमेशन मुझे नाराज कर देंगे, क्या मैं थोड़ी देर बाद उन्हें बंद कर सकता हूं?

इस तरह के कष्टप्रद लोगों के लिए रिपीटडूर किया । यह विशेषता एनीमेशन की शुरुआत से एक निश्चित समय के बाद एनीमेशन को रोकती है ! सीधे शब्दों में कहें, रिपीटड्यूर एनिमेशन की अवधि को सीमित करता है। रिपीटाउंट से मुख्य अंतरयह है कि एनीमेशन को बीच में रोका जा सकता है

 <animate dur="2s" repeatCount="indefinite" repeatDur="3s" .../> 

एनीमेशन दूसरी पुनरावृत्ति के बीच में टूट जाएगा।

और क्या होगा यदि मैं चाहता हूं कि एनीमेशन अभी शुरू न हो?

फिर आपके लिए, मेरे दोस्त, शुरुआती विशेषता प्रदान की जाती है। एनीमेशन शुरू होने के लिए वह जिम्मेदार है। यह विशेषता बहुत उपयोगी है क्योंकि इसका उपयोग कई एनिमेशन को सिंक्रनाइज़ करने के लिए भी किया जाता है, लेकिन बाद में इस पर अधिक।

यदि आपको लॉन्च करने में सामान्य देरी को निर्दिष्ट करने की आवश्यकता है, तो हम यह लिखते हैं कि दस्तावेज़ को खोलने के बाद एनीमेशन किस अवधि में शुरू होना चाहिए

 <animate begin="1.5s" .../> 

प्लेबैक 1.5 सेकंड के बाद शुरू होता है।

आप एक नकारात्मक मान भी निर्दिष्ट कर सकते हैं। फिर एनीमेशन शुरुआत से शुरू नहीं होगा, लेकिन उस स्थान पर जहां यह निर्दिष्ट अवधि के बाद होगा

 <animate begin="-2s" dur="4s" .../> 

एनीमेशन दस्तावेज़ की खोज के साथ शुरू होता है, लेकिन मध्य से खेला जाएगा

एनीमेशन इंटरैक्टिव करना

मूल्यों के रूप में शुरू , आप घटना निर्दिष्ट कर सकते हैं, जिस पर एनीमेशन शुरू होता है, लेकिन बिना «पर» शान्ति। उदाहरण के लिए, यदि आप "ओनक्लिक" के बजाय क्लिक-थ्रू एनीमेशन बनाना चाहते हैं, तो हम क्लिक लिखते हैं

 <circle ...> <animate begin="click" .../> </circle> 

ऊपर दिए गए उदाहरण में, एनीमेशन शुरू होता है जब आप उस तत्व पर क्लिक करते हैं जिसमें एनीमेशन लागू होता है। यदि आप किसी अन्य तत्व से एक घटना पर एक एनीमेशन शुरू करना चाहते हैं, तो आपको इसकी आईडी निर्दिष्ट करने की आवश्यकता है

 <circle id="button" .../> ... <animate begin="button.click" .../> 

आप एनीमेशन की शुरुआत के लिए कई शर्तें भी बता सकते हैं। ऐसा करने के लिए, उन्हें अर्धविराम से अलग करके सूचीबद्ध करें।

 <animate begin="click; 0s" .../> 

दस्तावेज़ लोड होने और क्लिक करने पर एनीमेशन शुरू हो जाएगा

। सभी घटनाओं का समर्थन नहीं किया जाता है, लेकिन अधिकांश माउस-संबंधी घटनाएँ काम करती हैं। मैं उन सभी को सूचीबद्ध नहीं करूंगा, उपलब्ध कार्यक्रम यहां कहीं भी मिल सकते हैं । साथ ही, किसी ने भी वैज्ञानिक प्रहार की पद्धति को रद्द नहीं किया है।

एनीमेशन अंत तक पहुंचने के बिना पुनरारंभ होता है, मैं इसे कैसे ठीक कर सकता हूं?

मैं एक सरल उदाहरण दूंगा। यहाँ एनीमेशन क्लिक से शुरू होता है। यदि उपयोगकर्ता अभी भी प्रेस नहीं करता है, तो 3 सेकंड में स्वचालित शुरुआत प्रदान की जाती है

 <animate begin="click; 3s" dur="7s" .../> 

लेकिन एक समस्या है: यदि उपयोगकर्ता स्वचालित टाइमर से पहले दबाता है, तो जब 3 सेकंड बीत जाता है, तो एनीमेशन फिर से शुरू होगा, और अंत तक कभी नहीं पहुंचेगा। मान में पुनरारंभ विशेषता जब NotActive बचाव में आएगी । कुल मिलाकर, वह उनमें से तीन हैं

• हमेशा डिफ़ॉल्ट होता है - आपको किसी भी समय एनीमेशन को पुनरारंभ करने की अनुमति देता है
• whenNotActive - अगर यह पहले से ही नहीं चल रहा है एनीमेशन शुरू किया जा सकता
• कभी नहीं - प्रतिबंधित एनीमेशन को प्रतिबंधित करता है

 <animate begin="click; 3s" dur="7s" restart="whenNotActive" .../> 

समस्या हल हो गई है, हालांकि ज्यादातर मामलों में आप इस विशेषता के बिना केवल निर्भरता के निर्माण के द्वारा कर सकते हैं।

एनिमेशन का सिंक्रनाइज़ेशन

मानक घटनाओं के अलावा, क्लिक के प्रकार से, एनीमेशन की शुरुआत, अंत और पुनरावृत्ति की घटनाएं होती हैं। किसी घटना को बांधने के लिए, आपकोएनीमेशनकी आईडी निर्दिष्ट करनी होगीऔर बिंदु के माध्यम सेक्रमशः, अंत , दोहराना शुरू करना होगा

 <animate id="pop" begin="click" .../> <animate begin="pop.begin" .../> <animate begin="pop.end" .../> 

यदि पहले दो के साथ सब कुछ स्पष्ट है, तो दोहराने के साथ सब कुछ इतना स्पष्ट नहीं है। दोहराव की संख्या कोष्ठक में लिखी जाती है, जिसके बाद आपको एनीमेशन शुरू करने की आवश्यकता होती है (यह संख्या अंतिम पुनरावृत्ति नहीं हो सकती है)

 <animate id="flip" repeatCount="5" .../> <animate begin="flip.repeat(2)" .../> 

एनीमेशन दो पुनरावृत्तियों के बाद शुरू होगा , और हर 2 पुनरावृत्ति नहीं

। आप घटना के सापेक्ष देरी भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए, यदि मैंदूसरे की शुरुआत के बाद एनीमेशन 2 सेकंड खेलना चाहता हूं

 <animate id="another" .../> <animate begin="another.begin + 2s" .../> 

या फिर एक पल के लिए एनीमेशन चलाने के अंत से पहले अन्य

 <animate begin="another.end - 1s" .../> 

और क्या शुरू हो सकता है ...
मैं इस अनुभाग को कॉल करना चाहता था, लेकिन इसे कॉल करने के लिए अधिक सही है "वह क्या होना चाहिए, लेकिन सक्षम नहीं?"। मेरे पसंदीदा विनिर्देश के अनुसार , शुरू में दो और मूल्य होने चाहिए जो इसे लेने चाहिए। पहला एक्सेस है , जो यूनिकोड प्रारूप में निर्दिष्ट कुंजी दबाकर एनीमेशन शुरू करता है। दूसरा वॉलकॉक है , जो वास्तविक समय में एनीमेशन की शुरुआत को निर्धारित करता है। और वहां आप न केवल घड़ी को निर्दिष्ट कर सकते हैं, बल्कि यहां तक ​​कि महीने और साल, सामान्य रूप से, एक पूर्ण सेट।

दुर्भाग्य से, उनमें से कोई भी काम नहीं करना चाहता था। हालांकि नुकसान बहुत अच्छा नहीं है, क्योंकि उनके लिए जरूरत अभी भी संदिग्ध है

 <animate begin="accessKey(\u0077)" .../> <animate begin="wallclock(2019-04-09T19:56:00.0Z);" .../> 

मुझे नहीं पता कि समस्या क्या है, शायद मेरा ब्राउज़र उन्हें समर्थन नहीं करता है, या शायद कुछ और ...

क्या मैं एनीमेशन को बाधित कर सकता हूं?

यह अंतिम विशेषता के साथ किया जा सकता है। इसके उपयोग में, यह शुरू करने के लिए समान है, आप समय, घटनाओं आदि को भी निर्दिष्ट कर सकते हैं। जैसा कि आप देख सकते हैं, यह एनीमेशन को बाधित करने का पहला (और अंतिम नहीं) तरीका है, क्योंकि रिपीटडूर है , जहां आप एनीमेशन की अवधि भी ठीक कर सकते हैं। औरजब आप सीधे अंत मेंसमय भी निर्दिष्ट कर सकते हैं, तो इसकी विशिष्ट विशेषताएं ईवेंट बाइंडिंग और मूल्यों की सूची निर्दिष्ट करने की क्षमता है।

मान लीजिए हमारे पास एक तत्व है जिसमें आराम और गतिविधि की स्थिति है। क्लिक करते ही दूसरा सक्रिय हो जाता है। और हम गतिविधि की शुरुआत के साथ बाकी एनीमेशन को बाधित करना चाहते हैं। आप इस तरह का एक विचार लागू कर सकते हैं

 <animate id="idle" end="action.begin" begin="0s" repeatCount="indefinite" .../> <animate id="action" begin="click" .../> 

बाकी एनीमेशन डिफ़ॉल्ट रूप से शुरू होता है। जब आप किसी तत्व पर क्लिक करते हैं, तो एक गतिविधि एनीमेशन शुरू होता है और बाकी एनीमेशन को बाधित करता है।

विशेषताओं को समाप्त करना और शुरू करना

जैसा कि आप पहले से जानते हैं, दोनों शुरू और अंत मूल्यों की एक सूची ले सकते हैं, लेकिन यह अभी भी स्पष्ट नहीं है कि यदि आप दोनों विशेषताओं में सूची निर्दिष्ट करते हैं तो एनीमेशन कैसे व्यवहार करेगा। और यह निकल जाएगा, एक तरह से, उनके बीच एक विन्यास अवधि और अंतराल के साथ पुनरावृत्ति ... क्या यह स्पष्ट नहीं है? मैं अब सब कुछ समझाता हूँ।

पहली बात यह है कि सूचियों में मूल्यों की संख्या का मिलान होना चाहिए। शुरू - अंत मूल्यों की प्रत्येक जोड़ीएक "दोहराव" को परिभाषित करता है। और एक "पुनरावृत्ति" के अंत और अगले की शुरुआत के बीच का समय देरी को निर्धारित करता है। मैं उन्हें एक कारण के लिए "पुनरावृत्ति" कहता हूं, एनीमेशन रुकता नहीं है और जारी रहता है, लेकिन बाधित होता है और शुरुआत से शुरू होता है। यह पता चला है कि हम प्रत्येक पुनरावृत्ति की अवधि को अलग-अलग समायोजित कर सकते हैं और प्रत्येक पुनरावृत्ति के बाद अलग देरी निर्धारित कर सकते हैं

 <animate dur="3s" begin="1s; 5s; 9s" end = "2s; 8s; 11s" .../> 

उदाहरण में, एनीमेशन में 3 "दोहराव" हैं। दस्तावेज़ लोड करने के बाद पहला एक सेकंड शुरू होगा और तीन में से केवल एक सेकंड तक चलेगा। फिर 3 सेकंड की देरी, और इसके बाद 3 सेकंड का पूरा एनीमेशन। फिर, एक देरी, लेकिन 1 सेकंड में। एनीमेशन के दो सेकंड के बाद अंतिम पुनरावृत्ति बाधित हो जाएगी।

क्या आप अभी भी एनीमेशन को किसी तरह बाधित कर सकते हैं?
सूअर का बच्चा बैंक
Keeeeee के लिए बेकार विशेषताओं के एक जोड़े , दो और विशेषताएं हैं - न्यूनतम और अधिकतम । जैसा कि नाम से पता चलता है, न्यूनतम न्यूनतम परिभाषित करता है, और अधिकतम अधिकतम अवधिको परिभाषित करता है। सबसे पहले, एनीमेशन की अवधि मूल्यों के अनुसार गणना की जाती है dur , repeatCount , repeatDur ,अंत । और उसके बाद, प्राप्त अवधि को न्यूनतम और अधिकतम द्वारा निर्दिष्ट फ़्रेम पर समायोजित किया जाता है । कागज पर सब कुछ सुंदर है, आइए देखें कि यह व्यवहार में कैसे काम करता है। अधिकतम के

साथ , सब कुछ सरल है, यह एक और विशेषता है जो ऊपरी सीमा को परिभाषित करता है। यदि गणना की गई अवधि अधिकतम से कम है , तो इसे अनदेखा कर दिया जाता है, और यदि यह लंबा है, तो एनीमेशन की अवधि अधिकतम के बराबर हो जाती है

 <animate dur="10s" repeatDur="7s" end="5s" max="4s" .../> 

यह 4 सेकंड के लिए बाधित हो जाएगा।

लेकिन मिनट कम भाग्यशाली था। यदि गणना की गई एनीमेशन अवधि न्यूनतम से अधिक है, तो इसे अनदेखा कर दिया जाता है, जो तार्किक है। हालांकि, यदि गणना की गई अवधि न्यूनतम से कम है, तो यह ... कभी-कभी अनदेखा किया जाता है, और कभी-कभी नहीं।
क्यों! यह क्षण भ्रमित होने में बहुत आसान है, इसलिए ध्यान से पढ़ें। गणना की अवधि न्यूनतम से कम

होने पर हमारे पास दो विकल्प हैं:

1. क्योंकि एनीमेशन ही खत्म हो गया है, अर्थात् dur * repeatCount < मिनट
   
   

    <animate dur="2s" repeatCount="2" min="5s" .../> 

   इस विकल्प में, न्यूनतम विशेषता को अनदेखा किया जाता है, एनीमेशन चौथे सेकंड में बंद हो जाएगा
2. repeatDur end .
   
   
   • repeatDur , , min , min
     
     

      <animate dur="1s" repeatCount ="indefinite" repeatDur="3s" end="5s" min="4s" .../> 

     repeatDur , min , 3
   • repeatDur , end min , end , min
     
     

      <animate dur="1s" repeatCount ="indefinite" end="2s" min="4s" .../> 

     4 , .. min end

एनीमेशन को बाधित करने वाले गुणों की प्रचुरता के कारण बहुत भ्रम होता है। नतीजतन, अधिकतम और न्यूनतम में कोई बड़ी भावना नहीं है , क्योंकि अच्छी तरह से लिखा एनीमेशन उनके लिए आवश्यकता को समाप्त करता है।

कीफ़्रेम का प्रबंधन कैसे करें और समय फ़ंक्शन को कहां इंगित करें?

ऐसा करने के लिए, आपको विशेषताओं कीटाइम्स , कीसप्लिन्स , कैल्कोड की जानकारी होनी चाहिए । मूल्यों में सूची निर्दिष्ट करने के बाद , हम कुंजी फ़्रेम की घोषणा करते हैं, लेकिन वे समान रूप से वितरित किए जाते हैं। KeyTimes विशेषता के लिए धन्यवादहम एक राज्य से दूसरे राज्य में संक्रमण को गति या धीमा कर सकते हैं। इसमें, एक सूची के रूप में भी, प्रत्येक फ्रेम के मूल्यों को इंगित किया गया है। मान समय के अक्ष पर कीफ्रेम की स्थिति को एक प्रतिशत के रूप में दर्शाते हैं, पूरे एनीमेशन की अवधि के सापेक्ष (0 - 0%; 0.5 - 50%; 1 - 100%)।

कई नियम हैं: प्रत्येक मान 0 से 1 तक एक फ्लोटिंग-पॉइंट संख्या का प्रतिनिधित्व करता है, सूचियों में मूल्यों की संख्या का मिलान होना चाहिए, पहला मान 0 होना चाहिए, और अंतिम 1, प्रत्येक अगला मान पिछले एक से अधिक होना चाहिए। मुझे लगता है कि आप समझते हैं कि यह बिना मूल्यों के की- टाइम्स का उपयोग करने का कोई मतलब नहीं है । और अब एक उदाहरण है

 <animate values="15; 10; 45; 55; 50" keyTimes="0; 0.1; 0.6; 0.9; 1" .../> 

डिफ़ॉल्ट रूप से, सभी रूपांतरण रैखिक रूप से होते हैं, इसे बदलने के लिए, आपको कैल्कोड में एक अलग मोड निर्दिष्ट करने की आवश्यकता होती है । और कई विकल्प नहीं हैं:

• रैखिक - मानक मूल्य, कोई स्पष्टीकरण की जरूरत है
• पुस्तक - समय अंतराल की गणना की जाती है ताकि कुंजी फ़्रेम के बीच की गति स्थिर हो
• असतत - एनीमेशन में बिना जकड़न के प्रमुख फ्रेम के बीच एनीमेशन स्विच
• तख़्ता - हम कह सकते हैं कि यह एक मैनुअल कंट्रोल मोड है (इसके बारे में बाद में)

दुर्भाग्य से, ये सभी बिल्ट-इन फ़ंक्शंस हैं, यहाँ आपको सीएसएस की तरह आसानी से नहीं मिलेगा। तो इन जरूरतों को शासन को संतुष्ट करना होगा, जिसे मैंने "मैनुअल" कहा था।

सबसे कठिन समझने के लिए - यह है paced , तो यह और अधिक विस्तार से व्याख्या करेगा। आरंभ करने के लिए, देखें कि मानक मोड में एनीमेशन कैसे काम करता है। एनीमेशन 2 सेकंड तक रहता है और हमारे पास 3 मुख्य फ्रेम हैं - प्रारंभिक, मध्यवर्ती, अंतिम

 <animate dur="2s" values="100; 200; 150" .../> 

यदि आप एनीमेशन देखते हैं, तो यह स्पष्ट हो जाएगा कि कुंजी फ़्रेमों के बीच नियमित अंतराल पर चलना होता है। पहले और दूसरे के बीच की दूरी 100 है, और दूसरे और तीसरे के बीच की दूरी 50 है, अर्थात्। पहले रास्ते का आधा। सरल गणनाओं के माध्यम से, यह स्पष्ट हो जाता है कि तत्व पहले की तरह दो बार दूसरे खंड से गुजरेगा । अब कैल्कमोड = "पुस्तक" जोड़ें और देखें कि क्या बदल गया है।

 <animate dur="2s" values="100; 200; 150" calcMode="paced" .../> 

और तत्व की गति बदल गई है। अब इसे इस तरह से डिज़ाइन किया गया है कि एक ही गति से पूरी दूरी को कवर किया जाए, दूसरे शब्दों में, तत्व समान रूप से दोनों खंडों को स्थानांतरित करेगा।

अब की विधा को देखो पट्टी और विशेषता keySplines । उनमें कुछ समानताएं हैं ... हम्म ...


यदि पट्टी एक मैनुअल मोड परिभाषित करता है, विशेषता keySplines इस विधा के लिए मूल्यों को परिभाषित करता है। जाहिर है, एक दूसरे के बिना काम नहीं करता है। KeySplines में मूल्यों को एक सूची द्वारा निर्धारित किया जाता है जहां क्यूबिक बेजियर के लिए दो बिंदुओं के निर्देशांक इंगित किए जाते हैं।


में मानों की संख्या keySplines से कम 1 कम होना चाहिए मान । यह इस तथ्य के कारण है कि हम मूल्यों को मुख्य फ़्रेमों के लिए नहीं, बल्कि उनके बीच के अंतराल के लिए इंगित करते हैं।

 <animate values="100; 200; 150" keySplines=".25 .1 .25 1; 0 0 .58 1" calcMode="spline" .../> 

बेज़ियर फ़ंक्शन के बिंदुओं के निर्देशांक रिक्त स्थान या अल्पविराम द्वारा अलग किए जाते हैं, और अर्धविराम द्वारा अलग किए गए सूची मान।

पहला और सबसे अप्रिय ऋण यह है कि आप सभी प्रमुख फ़्रेमों के लिए एक सामान्य समय फ़ंक्शन सेट नहीं कर सकते हैं, आपको प्रत्येक फ़्रेम के लिए फ़ंक्शन को डुप्लिकेट करना होगा।
दूसरा - अगर आप विशेषताओं के लिए एक समारोह निर्दिष्ट करना चाहते हैं से - करने के लिए , या द्वारा , जरूरत बैसाखी पूछने के लिए keyTimes मूल्यों के साथ "0, 1"

 <animate from="10" to="50" keyTimes="0; 1" keySplines=".25 .1 .25 1;" calcMode="spline" .../> 

हैं, के बजाय से - करने के लिए उपयोग करने के मूल्यों दो मूल्यों से है, तो यह समस्या नहीं है

कैसे एनीमेशन के बचत का एहसास के लिए?

सबसे पहले, एक छोटा सिद्धांत - संचयी एनीमेशन का अगला दोहराव जारी रहेगा जहां पिछले एक समाप्त हुआ। यह शांत होगा, लेकिन बहुत नहीं ... तथ्य यह है कि संचयी एनिमेशन केवल दोहराव के भीतर काम करते हैं निराशाजनक है।

अब एनीमेशन संचयी बनाने के तरीके के बारे में: आपको योग करने के लिए संचित विशेषता(जो कि डिफ़ॉल्ट रूप से कोई नहीं है) कोसेट करने की आवश्यकता है

 <animate by="100" repeatCount="3" accumulate="sum".../> 

यह बात ध्यान में वहन किया जाना चाहिए कि अगर आप का उपयोग मान या से - करने के लिए पहले को छोड़कर, तो सभी घटनाओं की, वे खुद के रूप में यदि का संचालन करेंगे Additive = "राशि" । और संचित को अनदेखा किया जाता है यदि केवल एक निर्दिष्ट किया जाता है ।

हम समोच्च के रूपांकन को समझते हैं

अब जब मैंने मूल बातें बताई हैं, तो यह वास्तव में शांत और जटिल चीजों पर आगे बढ़ने का समय है। मुझे यकीन है कि किसी ने यह लेख पूरी तरह से इस खंड के लिए खोला है।

पाथ मॉर्फिंग पथ टैग की d विशेषता का एक एनीमेशन है , जो आपको आकार के आकार को आसानी से बदलने के प्रभाव को बनाने की अनुमति देता है। वर्तमान में, अंतर्निहित टूल के साथ, यह केवल SMIL का उपयोग करके किया जा सकता है।मान उस d विशेषता के लिए मानों की सूची को इंगित करता है जिसके माध्यम से तत्व गुजरता है। यह भी इस्तेमाल किया जा सकता से - करने के लिए । सामान्य तौर पर, रूपरेखा रूप इस तरह दिखता है

 <animate attributeName="d" values=" 1;  2; ..." .../> 

और अब चलो इस प्रक्रिया की पेचीदगियों पर आगे बढ़ते हैं:

उन लोगों के लिए जो टैंक में हैं, डी विशेषता में बिंदुओं का एक सेट होता है जो बाद में एक आकृति बनाने के लिए बदले में जुड़े होते हैं। करीब से पता चलता है कि मानों की सूची सीएनसी मशीन (या "रोबोट" कंप्यूटर विज्ञान के पाठों में) के निर्देशों के समान है। बहुत सारी टीमें हैं, कुछ "कर्सर ले जाने" के लिए जिम्मेदार हैं, दूसरों के लिए "ड्राइंग", कुछ के लिए कितना वक्र रेखा होगी, आदि। ( सभी टीमें यहां हैं )

काम करने के लिए मॉर्फ करने के लिए, कमांड की संख्या से मेल खाना चाहिए , और उन्हें एक ही प्रकार का होना चाहिए । यदि आप इस स्थिति को अनदेखा करते हैं, तो कोई प्रक्षेप नहीं होगा - एनीमेशन एक राज्य से दूसरे तक, साथ ही कूद जाएगाcalcMode = "असतत" । पहली नज़र में, यह कुछ भी जटिल नहीं है, और ऐसा इसलिए है जब आप घटता के बिना चेतन आकार लेंगे। अगर नहीं, तो मुश्किलें शुरू हो जाती हैं।

जटिल ग्राफिक्स बनाते समय, हर कोई वेक्टर संपादकों का उपयोग करता है, और उन्हें यथासंभव "कोड" को अनुकूलित करने की आदत होती है। यह आमतौर पर एक प्लस है, लेकिन हमारे मामले में नहीं। आउटपुट पर, हमारे पास एक लंबाई की एक सूची हो सकती है, लेकिन विभिन्न प्रकार की टीमों के साथ, और यह नियमों में से एक का उल्लंघन है। मैंने एडोब इलस्ट्रेटर का उपयोग किया और एक विकल्प नहीं मिला जो चीजों को ठीक कर सके। कभी-कभी, विचित्र के देवताओं की इच्छा से, यह समस्या अनुपस्थित है। लेकिन गंभीरता से, एक समस्या की संभावना सीधे आकृति और मॉर्फिंग की जटिलता के आनुपातिक है।

फिलहाल, समस्या का एकमात्र समाधान आकृति शिफ्टर वेब एप्लिकेशन में "कुटिल कोड" का रूपांतरण है । यह वह विकल्प है जिसका मैं उपयोग करता हूं। टूटे हुए कोड को ठीक करने के अलावा, आकृति शिफ्टर आपको परिणाम देखने की अनुमति देता है, वैकल्पिक रूप से एक अन्य प्रकार का एनीमेशन जोड़ता है और परिणाम को एक सुविधाजनक प्रारूप में निर्यात करता है।

अगला एक चरण-दर-चरण ट्यूटोरियल होगा जहां मैं आपको बताऊंगा कि इस तरह के सुंदर एनीमेशन कैसे बनाएं

<सेट>

सेट टैग चेतन का एक छोटा संस्करण है , सिवाय इसके कि यह प्रक्षेप नहीं कर सकता है। इसका उपयोग निश्चित समय के लिए विशेषता को बदलने के लिए किया जाता है, अर्थात। एक स्विच के सिद्धांत पर काम करता है। नतीजतन, यह प्रक्षेप से जुड़ी विशेषताओं की उपेक्षा करता है और संचयी या सापेक्ष एनिमेशन का समर्थन नहीं करता है। मूल्य विशेषता के आधार पर पूरी तरह से सेट किया गया है करने के लिए , विशेषता मूल्यों , से , द्वारा नजरअंदाज कर दिया

 <set attributeName="cx" to="200" begin="click" dur="5s" .../> 

तत्व क्लिक करके स्थिति बदलता है, 5 सेकंड के बाद यह अपनी मूल स्थिति में लौट आता है।

यदि आप ड्यूर विशेषता को निर्दिष्ट नहीं करते हैं, तो तत्व इस स्थिति में रहेगा जब तक दस्तावेज़ पुनः लोड नहीं किया जाता है। अन्यथा, यह चेतन के समान है।

<AnimateTransform>

जैसा कि नाम से पता चलता है, इसका उपयोग किसी तत्व में विभिन्न परिवर्तनों को लागू करने के लिए किया जाता है। सभी प्रकार के परिवर्तन CSS परिवर्तनों के समान हैं। सीएसएस और एसएमआईएल परिवर्तनों के एक साथ उपयोग के साथ, वे एक-दूसरे को ओवरराइड करेंगे, इसलिए एक चीज का उपयोग करना बेहतर है, या देखना ताकि वे ओवरलैप न हों।

कैसे बदलना है?

एनिमेटेड विशेषता परिवर्तन है । परिवर्तन मोड को प्रकार की विशेषता में दर्शाया गया है और अक्षों के साथ 4 प्रकार के मूल्य - आंदोलन, रोटेशन, स्केलिंग, शिफ्ट लेता है।

अनुवाद - किसी तत्व को उसकी वर्तमान स्थिति के सापेक्ष स्थानांतरित करना। यह प्रारूप में एक ऑफसेट लेता है [x, y] , जहां y एक वैकल्पिक पैरामीटर है

 <animateTransform attributeName="transform" type="translate" from="0, -10" to="0, 10" .../> 

वाई के अनुसार चालें तत्व अक्ष

घुमाने घूर्णी केंद्र के बारे में सदस्य घूमता है -। यह रोटेशन कोण और रोटेशन के केंद्र के निर्देशांक को ले जाता है [deg, x, y] मानों के रूपमें, केंद्र के निर्देशांक वैकल्पिक होते हैं। डिफ़ॉल्ट रूप से, रोटेशन का केंद्र एसवीजी दस्तावेज़ के ऊपरी बाएं कोने में है

 <animateTransform attributeName="transform" type="rotate" from="0, 150, 150" to="45, 150, 150" .../> 

निर्देशांक 150 के साथ एक बिंदु के चारों ओर 45 डिग्री घुमाएँ, 150

इसके अलावा, रोटेशन के केंद्र को ट्रांसफॉर्म-मूल सीएसएस संपत्ति का उपयोग करके बदला जा सकता है, जहां निर्देशांक के अलावा, आप प्रतिशत निर्दिष्ट कर सकते हैं। डिफ़ॉल्ट रूप से, प्रतिशत की गणना पूरे दस्तावेज़ के आकार से की जाती है, ताकि प्रतिशत तत्व के सापेक्ष गणना की जाती है, आपको भरने-बॉक्स मूल्य के साथ ट्रांसफॉर्म-बॉक्स सीएसएस संपत्ति सेट करने की आवश्यकता है। पैमाना - वस्तु को तराजू। मानों के रूप में, यहदोनों अक्षों के लिए [स्केल] प्रारूप में फ़्लोटिंग-पॉइंट नंबर लेता है, या प्रत्येक अक्ष के लिए अलग-अलग [स्केलएक्स, स्केल] (1 तत्व के सामान्य आकार से मेल खाता है)। यदि आप ट्रांसफॉर्म-बॉक्स को नहीं बदलते हैं

जैसा कि मैंने ऊपर उल्लेख किया है, तत्व पूरे दस्तावेज़ के सापेक्ष छोटा है। तत्व के आसपास की खाली जगह भी इसके साथ बदल जाती है, इसलिए नेत्रहीन ऐसा लगता है कि तत्व पक्ष में स्थानांतरित हो गया है

 <animateTransform attributeName="transform" type="scale" from="1, 1" to="2, 1" .../> 

एक्स अक्ष

skewX या skewY के साथ एक तत्व खींचता है - एक अक्ष के बारे में एक तत्व को स्थानांतरित करता है। मान झुकाव [गिरावट] का कोण लेता है। डिफ़ॉल्ट रूप से, शिफ्ट का केंद्र ऊपरी बाएँ कोने में होता है, इसलिए ट्रांसफ़ॉर्मेशन बॉक्स और ट्रांसफॉर्म-मूल के साथ एक ही मज़ाकअन्यकामों की तरह यहाँ भी काम करता है

 <animateTransform attributeName="transform" type="skewX" from="0" to="45" .../> <animateTransform attributeName="transform" type="skewY" from="90" to="0" .../> 

एक्स के लिए एक चाल, वाई के अन्य

योग और ओवरराइड परिवर्तन

में animateTransform अभी भी संभव बचत और रिश्तेदार एनीमेशन बनाने के लिए है, लेकिन यहां का श्रेय additive अलग ढंग से व्यवहार करता है। प्रतिस्थापन के मूल्य में , परिवर्तन पिछले सभी को ओवरराइड करता है। योग मान में,परिवर्तन पिछले के साथ सम्‍मिलित है

 <rect transform="skewY(115)" ...> <animateTransform type="translate" from="-10" to="10" additive="replace" .../> <animateTransform type="rotate" from="0" to="90" additive="sum" .../> </rect> 

इस उदाहरण में, स्थानांतरित करने और घुमाने के लिए आयत शिफ्ट को फिर से परिभाषित किया जाएगा

<AnimateMotion>

एक पथ के साथ एक तत्व के आंदोलन को चेतन करने की आवश्यकता है। animateMotion समर्थन का श्रेय चेतन और अपनी खुद की 3 है - पथ , घुमाने , keypoints ।

एक पथ का निर्धारण करने के लिए विकल्प

कई मायनों में गति की प्रक्षेपवक्र का निर्धारण - परिचित विशेषताओं का उपयोग से , करने के लिए , द्वारा या मूल्यों एक नई विशेषता, पथ या बच्चे टैग <mpath> । मैंने प्राथमिकता बढ़ाने के तरीके सूचीबद्ध किए हैं और मैं उन्हें उसी क्रम में समझाऊंगा। से , के लिए

विशेषताएँ, बिंदुओं के निर्देशांक, समान मूल्यों को इंगित करते हैं , लेकिन पहले से ही एक सूची के रूप में

 <animateMotion from="0,0" to="50,100" .../> <animateMotion values="0,0; 0,100; 100,100; 0,0" .../> 

इस पद्धति का प्रभाव विस्थापन के सामान्य परिवर्तन के बराबर है। एक तत्व रेक्टिलीनियरली एक बिंदु से दूसरे तक जाता है। और यहाँ, चेतन रूप में , निर्देशांक सापेक्ष हैं । बिंदु 0,0 दस्तावेज़ के ऊपरी बाएं कोने को इंगित नहीं करता है, लेकिन लक्ष्य तत्व की वर्तमान स्थिति। यह विशेषता प्रक्षेपवक्र के निर्धारण के अन्य तरीकों में मौजूद है। पथ

विशेषता डी विशेषता के अनुसार, कमांड का एक सेट निर्दिष्ट करती है । यदि d विशेषता में आज्ञाओं को आकृति की रूपरेखा के रूप में व्याख्या की जाती है, तो पथ विशेषता में वे वह रेखा होती है जिसके साथ तत्व जाएगा। बिंदुओं के निर्देशांक भी सापेक्ष होते हैं, इसलिए पथ बिंदु 0,0 से शुरू होता है

 <animateMotion path="M 0 0 c 3.4 -6.8 27.8 -54.2 56 -37.7 C 73.3 -27.5 89.6 -5.1 81.9 5.9 c -5.8 8.3 -24.7 8.7 -45.4 -0.4" .../> 

यह पथ ऐसे वक्र का वर्णन करता है


अंतिम तरीका पथ के रूप में तृतीय-पक्ष <पथ> तत्व का उपयोग करना है । ऐसा करने के लिए, आपको <mpath> टैग में इस तत्व का लिंक निर्दिष्ट करना होगा, और टैग को <aimateMotion> के अंदर रखना होगा । इस विकल्प में सापेक्ष निर्देशांक के साथ एक ही विशेषता है। इसके मूल में, यह विधि तत्व से < d > विशेषता में d विशेषता के मूल्य को "कॉपी" करती है

 <path id="movement" .../> ... <animateMotion ...> <mpath href="#movement"/> </animateMotion> 

पथ को परिभाषित करने वाला तत्व भी दस्तावेज़ में दिखाई नहीं दे सकता है। आप इसे केवल <defs> में परिभाषित कर सकते हैं

; प्रक्षेपवक्र के सापेक्ष एक तत्व

को घुमा सकते हैं। घूर्णन विशेषता का उपयोग करके तत्व को गति की दिशा में घुमाना संभव है। यह 3 प्रकार के मूल्यों को स्वीकार करता है: ऑटो , ऑटो-रिवर्स और एक संख्या जो डिग्री में रोटेशन का संकेत देती है

 <animateMotion rotate="auto" .../> 

डिफ़ॉल्ट रूप से, रोटेट 0. है। कोई भी संख्यात्मक मान पूरे एनीमेशन में कोण को दर्शाता है। स्वचालित मोड ऑटो और ऑटो-रिवर्स तत्व के रोटेशन के कोण को क्रमशः पथ के लिए स्पर्शरेखा में बदलते हैं। और वे इस स्पर्शरेखा की दिशा में भिन्न हैं। में ऑटो इसे आगे निर्देश दिया जाता है, जबकि ऑटो रिवर्स पहले


पथ के साथ आंदोलन को कैसे नियंत्रित किया जाए?

प्रक्षेपवक्र एक वक्र है जिसमें एक शुरुआत और एक अंत है, इन बिंदुओं को क्रमशः 0 और 1 संख्याओं से दर्शाया जाता है। वक्र की कोई भी स्थिति इस सीमा में एक संख्या द्वारा निर्धारित की जा सकती है। KeyPoints विशेषता में अंक सूचीबद्ध करके , आप पथ के साथ किसी भी प्रकार के आंदोलन को परिभाषित कर सकते हैं। लेकिन यह आंदोलन को नियंत्रित करने के लिए पर्याप्त नहीं है, इसके लिए आपको विशेषताओं की एक पूरी प्रणाली की आवश्यकता है।

सबसे पहले आपको कैलेकोड को रैखिक या तख़्ता पर सेट करने की आवश्यकता है । अन्य टैगों के विपरीत, चेतन भावना को गति प्रदान करता है (किसी कारण से, एनीमेशन इस मोड में काम नहीं करना चाहता है)। आपको एक विशेषता भी बतानी होगी।कीमते । इन चरणों को पूरा करने के बाद ही, एनीमेशन को काम करना चाहिए

 <animateMotion keyPoints="0.5; 1; 0; 0.5" keyTimes="0; 0.25; 0.75; 1" calcMode="linear" .../> 

उदाहरण में, एनीमेशन पथ के बीच में शुरू होता है, अंत तक जाता है, फिर शुरुआत में, और बीच में फिर से आंदोलन को समाप्त करता है

पुनश्च

चेतनता के साथ व्यवहार करते हुए , मुझे जानकारी मिली कि सीएसएस पर एक ही चीज़ की जा सकती है, जैसे कि, किया जा सकता है। लेकिन इस लेख के अंत में, मेरे पास इससे निपटने की न तो ताकत थी और न ही इच्छा। उत्साही लोगों के लिए, मैं सिर्फ प्रलेखन के लिए एक लिंक छोड़ता हूं ।

विशेष धन्यवाद

लेख को सही करने पर जबरदस्त काम के लिए भू