SVG मॉर्फ एनीमेशन: एनीमेशन से पहले पाथ मिलाएँ

पूरा चिह्न घूमे लेकिन आउटलाइन वही रहनी हो तो इसके बजाय साझा SVG घूर्णन केंद्र सेट करें।

SVG मॉर्फ एनीमेशन दो स्थितियों के बीच आकार की ज्यामिति बदलता है। SVG के अंतर्निहित पाथ डेटा इंटरपोलेशन के लिए मेल खाती कमांड संरचनाएँ बनाएँ और तय करें कि कौन से बिंदु एक-दूसरे से मेल खाएँ। दो आकर्षक अंतिम चित्र भी बीच में ढही या मुड़ी आकृति दे सकते हैं।

W3C के पाथ डेटा एनीमेशन नियम सहज इंटरपोलेशन के लिए समान संख्या और प्रकार के कमांड उसी क्रम में माँगते हैं। यह संरचनात्मक आवश्यकता है। वह नहीं तय करती कि लोगो का कौन सा कोना अगली स्थिति का कौन सा कोना बने।

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

मेल खाते कोनों वाले दो पाथ बनाएँ

यह हाथ से बनाया वर्ग और हीराकार आकृति दोनों M L L L Z लेते हैं: पहले कोने पर जाएँ, तीन लाइन बनाएँ और आकार बंद करें। हर निर्देशांक जोड़ी की दूसरे पाथ में मेल खाती स्थिति है।

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

SVG का animate एलिमेंट समय के साथ एट्रिब्यूट बदलता है। यहाँ वह दो सेकंड में d बदलता है। एनीमेशन का fill="freeze" अंतिम स्थिति बनाए रखता है; पाथ का हरा fill अलग रंग सेटिंग है।

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

कोनों का संबंध स्पष्ट है:

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

वास्तविक इंटरपोलेशन रोककर देखें

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

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

MDN SVG टाइमलाइन नियंत्रण के लिए pauseAnimations() और setCurrentTime() बताता है। सहायक को 0, 1 और 2 मान वाले बटन से जोड़ें। ये एक इंटरपोलेशन की तीन स्थितियाँ हैं, तीन बदले हुए चित्र नहीं।

एक सेकंड पर रेखीय इंटरपोलेशन हर निर्देशांक को उसके दोनों अंतिम मानों के ठीक बीच में रखता है। इसलिए पहला कोना 55, 25 पर है। इस मौलिक उदाहरण का पूरा मध्य:

M55 25L135 55L105 135L25 105Z

हमने यह SVG का अंतर्निहित एनीमेशन ब्राउज़र में शुरुआत, मध्य और अंत पर जाँचा, फिर एक बार चलाया। मध्य में भरा चतुर्भुज रहा और चलने पर हीराकार आकृति पहुँची। यह अवलोकन परीक्षित ब्राउज़र में इन हाथ से बनाए पाथ पर लागू है; यह PerfectVector रूपांतरण या सभी ब्राउज़र की संगतता जाँच नहीं।

बराबर कमांड संख्या फिर भी खराब मॉर्फ दे सकती है

शुरुआती वर्ग रखें, लेकिन लक्ष्य वर्ग के कोनों का क्रम उलट दें:

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

दोनों अंतिम स्थितियाँ एक ही वर्ग जैसी दिखती हैं। दोनों स्ट्रिंग अब भी M L L L Z लेती हैं। फिर भी दूसरा और चौथा कोना अब स्थान बदलने के लिए आकार के आर-पार जाते हैं। मध्य में उनके निर्देशांक एक हो जाते हैं:

M30 30L80 80L130 130L80 80Z

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

निर्यात जोड़ी मुड़े तो हर पाथ का पहला बिंदु और चलने की दिशा देखें। फिर जाँचें कि कोने और वक्र के विवरण मेल खाती स्थितियों में हैं या नहीं। बिना सोचे नोड जोड़ना इसे देखना कठिन कर सकता है। नोड सफ़ाई मार्गदर्शिका स्थिर चित्र सरल करने में मदद करती है, लेकिन दोनों स्थितियों के बीच तय संबंध सुरक्षित रखें।

छेद और अलग हिस्सों का ध्यान रखें

लोगो में बाहरी सीमा, खुला हिस्सा और अलग सजावटी भाग हो सकता है। उन्हें ऐसे हिस्से मानें जिनके अगली स्थिति में सोच-समझकर चुने साथी चाहिए। एनीमेशन से पहले लिखें कि कौन सा हिस्सा किसमें बदलता है। एक स्थिति में छेद हो और दूसरी में न हो तो तय करें कि वह कैसे गायब हो; यह न मानें कि समान नोड संख्या तय कर देगी।

fill-rule संदर्भ बताता है कि SVG कैसे तय करता है कि कौन से क्षेत्र पाथ के अंदर हैं। कंपाउंड पाथ तैयार और जाँचते समय इच्छित भरण व्यवहार सुरक्षित रखें। स्थिर अंतिम स्थिति में छेद पहले से गलत लगे तो बदलाव जोड़ने से पहले भरे छेद की समस्या मार्गदर्शिका लें।

जाँच का व्यावहारिक क्रम:

1. दोनों अंतिम स्थितियों की बाहरी आकृति, छेद और अलग विवरण सही हों।
2. मेल खाते उपपाथ या अलग एलिमेंट पहचानें।
3. शुरुआती बिंदु, दिशा और उपयोगी विवरण मिलाएँ।
4. बीच की स्थितियों में काटती सीमाएँ या गायब विवरण जाँचें।
5. ज्यामिति स्वीकार करने के बाद ही समय बदलें।

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

अपने एनीमेशन तरीके के नियम जाँचें

अंतर्निहित SVG एनीमेशन वाला उदाहरण सोच-समझकर मेल खाते कमांड लेता है। लाइब्रेरी अतिरिक्त तैयारी कर सकती है, इसलिए उसकी आवश्यकताएँ अलग हो सकती हैं।

GSAP का MorphSVG दस्तावेज़ पाथ डेटा को क्यूबिक वक्र में बदलना और आवश्यक बिंदु जोड़ना बताता है। उसमें shapeIndex जैसे संबंध नियंत्रण भी हैं। दो स्वतंत्र निर्यात आकार पहले से मेल खाते हैं यह मानने के बजाय उन नियंत्रणों से संबंध देखें।

KUTE.js अपनी SVG Morph मार्गदर्शिका में अलग तैयारी मॉडल बताता है, जिसमें उपपाथ का अलग कार्यप्रवाह है। अंतर्निहित SVG पाथ के प्रतिबंध या दूसरी लाइब्रेरी की सलाह लागू करने से पहले वास्तविक संस्करण और कंपोनेंट देखें।

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

स्थितियाँ मिलाने से पहले रास्टर चित्र तैयार करें

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

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

जोड़ी में हर अर्थपूर्ण बदलाव के बाद मध्य जाँचें। सरल अंतिम स्थिति तभी उपयोगी है जब बदलाव अब भी इच्छित विवरण अपनाता है। ब्लॉग के संपादन लेख संबंधित स्रोत तैयारी मार्गदर्शन देते हैं।

अक्सर पूछे जाने वाले प्रश्न

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

अंतिम स्थितियाँ सही होने पर भी SVG मॉर्फ क्यों मुड़ता है? बिंदु अनचाहे क्रम में मेल खा सकते हैं। शुरुआती बिंदु, दिशा और विवरण संबंध जाँचें, फिर मध्य देखें। समान अंतिम बाहरी आकृतियाँ बीच में सिमटा आकार छिपा सकती हैं।

क्या दो अलग SVG फ़ाइल अपने आप मॉर्फ हो सकती हैं? एनीमेटर को संगत या सामान्यीकृत ज्यामिति और स्थितियों के बीच उपयोगी संबंध चाहिए। केवल दो फ़ाइल एक्सटेंशन संबंध नहीं देते; पाथ, छेद और अलग हिस्से देखें।

क्या दो PNG को SVG बनाने से मेल खाती मॉर्फ जोड़ी बनती है? नहीं। रूपांतरण जाँच के लिए प्रारंभिक स्थिर वेक्टर चित्र बनाता है। आपको अब भी हिस्से और बिंदु मिलाने, एनीमेशन तरीका चुनने और बदलाव जाँचने हैं।

स्रोत

1. W3C — SVG पाथ — SVG के अंतर्निहित पाथ डेटा इंटरपोलेशन संरचना और पैरामीटर मेल परिभाषित करता है।
2. MDN — animate — समय के साथ एट्रिब्यूट एनीमेशन बताता है।
3. MDN — pauseAnimations — निरीक्षण टाइमलाइन रोकने का समर्थन।
4. MDN — setCurrentTime — SVG टाइमलाइन सेकंड में खिसकाना बताता है।
5. MDN — fill-rule — कंपाउंड चित्र के आंतरिक क्षेत्र का व्यवहार समझाता है।
6. GSAP — MorphSVG — सामान्यीकरण और बिंदु संबंध नियंत्रण बताता है।
7. KUTE.js — SVG Morph — कंपोनेंट की विशेष तैयारी और उपपाथ कार्यप्रवाह बताता है।

समय बेहतर करने से पहले हिस्से मिलाएँ और मध्य देखें। शुरुआती चित्र रास्टर हो तो जाँच के लिए प्रारंभिक SVG तैयार करें, उसकी स्थिर ज्यामिति सत्यापित करें और फिर मेल खाती एनीमेशन स्थितियाँ बनाएँ।