SVG स्ट्रोक एनीमेशन: एक चित्रण मार्ग तैयार करें

SVG स्ट्रोक एनीमेशन पाथ पर डैश खिसकाकर लाइन उजागर कर सकता है। डैश और अंतर तय करने के लिए stroke-dasharray लें, फिर स्ट्रोक दिखने तक stroke-dashoffset एनीमेट करें। MDN इन्हें स्ट्रोक चित्रण गुण बताता है।

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

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

पूरा आइकन वक्र पर खिसकाने के लिए SVG गति पाथ कार्यप्रवाह लें, जो यात्रा मार्ग को चित्र से अलग रखता है।

खुले स्ट्रोक वाले पाथ से शुरू करें

यह मौलिक पाथ दाएँ जाता है, फिर ऊपर। उसका fill बंद है, इसलिए दिखाई देने वाला निशान पूरी तरह स्ट्रोक से आता है:

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

दो सेकंड में उजागर करने के लिए यह CSS लें:

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" दूरी आधारित ऑपरेशन को लिखी लंबाई 100 के अनुसार कैलिब्रेट करता है। pathLength संदर्भ यह सामान्यीकरण बताता है। एक डैश ऐरे मान डैश और अंतर की तरह दोहरता है, इसलिए 100 पूरी लंबाई का डैश और उतना ही लंबा अंतर देता है। इस उदाहरण में पैटर्न 100 खिसकाने से स्ट्रोक छिपता है; ऑफ़सेट शून्य करने से उजागर होता है।

यहाँ बिना इकाई के संख्याएँ लें। stroke-dashoffset: 100%, 100 सामान्यीकृत पाथ इकाइयों का विकल्प नहीं है। MDN का डैश ऑफ़सेट संदर्भ बताता है कि प्रतिशत पाथ की कुल लंबाई के बजाय SVG व्यूपोर्ट का सामान्यीकृत विकर्ण इस्तेमाल करते हैं।

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

मार्ग की भरी आउटलाइन से तुलना करें

मोटी मुड़ी पट्टी उस स्ट्रोक लाइन जैसी दिख सकती है लेकिन उसकी ज्यामिति अलग है। यह दूसरा हाथ से लिखा पाथ पट्टी की सीमा पर घूमता है और Z से बंद होता है:

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

इस रंग के साथ उसका डैश ऑफ़सेट बदलने से कोई दृश्य असर नहीं होता:

.filled {
  fill: #ef8067;
  stroke: none;
}

पट्टी भरी रहती है क्योंकि डैश करने के लिए स्ट्रोक नहीं है। W3C का SVG चित्रण विनिर्देश आकार का अंदर रंगना और उसका स्ट्रोक रंगना अलग बताता है।

इसके बजाय fill: none करें, स्ट्रोक जोड़ें और बंद पाथ एनीमेट करें तो स्ट्रोक परिधि अपनाता है: एक किनारे पर, एक सिरे के आर-पार और दूसरे किनारे पर वापस। वह पट्टी के बीच का एकल मार्ग नहीं बनता।

यह अंतर बताता है कि ट्रेसिंग से दोहरी कटिंग लाइन क्यों बन सकती हैं। एनीमेशन में अनचाहा परिणाम कलम के निशान के बाहर घूमती लाइन हो सकता है। इच्छित प्रभाव को बीच का मार्ग चाहिए तो एकल लाइन SVG मार्गदर्शिका से वह ज्यामिति देखें या तैयार करें।

शुरुआत, मध्य और अंत जाँचें

उदाहरण रोककर देखने के लिए एनीमेशन बंद करें और stroke-dashoffset को 100, 50 और 0 रखें। इस सामान्यीकृत पाथ में ये शुरुआत, आधा उजागर होना और अंतिम स्थिति हैं। ये CSS गुण में टाइप किए प्रतिशत नहीं हैं।

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

हमने हाथ से बनाए पाथ ब्राउज़र में ऑफ़सेट 100, 50 और 0 पर जाँचे और दो सेकंड का एनीमेशन एक बार चलाया। भरी पट्टी दिखती रही, जबकि मार्ग और परिधि अलग तरह उजागर हुए। यह परीक्षण उन मौलिक पाथ का प्रदर्शन है; यह PerfectVector ट्रेस या सभी ब्राउज़र का परीक्षण नहीं।

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

शुरुआत और पाथ क्रम तय करें

पहला पाथ M30 90 से शुरू होता है, क्षैतिज रूप से x=100 तक जाता है, फिर ऊर्ध्व रूप से y=30 तक। यह क्रम उजागर होने की दिशा देता है। चित्र ऊपर के सिरे से शुरू होना चाहिए तो उसी दिशा में पाथ तैयार करें; यह न मानें कि एनीमेशन इच्छित कलम गति जानता है।

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

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

एनीमेशन लाइब्रेरी क्रम नियंत्रित करने में मदद कर सकती है, लेकिन इनपुट को अब भी सही ज्यामिति चाहिए। Motion का SVG एनीमेशन दस्तावेज़ एनीमेट किए pathLength मान से लाइन बनाना देता है। वह लाइब्रेरी नियंत्रण यहाँ इस्तेमाल SVG के अंतर्निहित pathLength="100" कैलिब्रेशन से अलग API है; API देखे बिना एक उदाहरण के मान दूसरे में न डालें।

गति के बिना तैयार चित्र उपलब्ध रखें

CSS उदाहरण डिफ़ॉल्ट ऑफ़सेट शून्य रखता है और केवल एनीमेशन के दौरान बदलता है। कम गति की पसंद के लिए मीडिया क्वेरी उजागर करना बंद करता है और पूरी लाइन दिखाता है। MDN की prefers-reduced-motion मार्गदर्शिका बताती है कि क्वेरी उपयोगकर्ता की पसंद कैसे पहचानता है।

इंटरैक्टिव प्रदर्शन में दोबारा चलाने के बटन के साथ स्थिर परिणाम नियंत्रण दें। इंटरफ़ेस आइकन में क्रिया बताने वाला दृश्य टेक्स्ट लेबल या सुलभ नाम रखें। ग्राफ़िक का अर्थ समझने का एकमात्र रास्ता एनीमेशन नहीं होना चाहिए।

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

कलम मार्ग का वादा किए बिना रास्टर चित्र तैयार करें

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

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

पहले स्थिर चित्र स्वीकार करें, फिर बनने का क्रम। ब्लॉग की संपादन मार्गदर्शिकाएँ एनीमेशन लेयर से पहले स्रोत सफ़ाई बताती हैं।

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

स्ट्रोक एनीमेशन की शुरुआत में SVG दिखाई क्यों रहता है? देखें कि दिखाई देने वाला हिस्सा भरण तो नहीं है। डैश ऐरे और डैश ऑफ़सेट स्ट्रोक को प्रभावित करते हैं, इसलिए स्ट्रोक छिपा होने पर भरा क्षेत्र दिखता रह सकता है।

एनीमेशन लाइन के दोनों किनारों पर क्यों बनता है? पाथ मोटे निशान के चारों ओर बंद आउटलाइन बता सकता है। उस पाथ पर स्ट्रोक उसकी परिधि अपनाता है। प्रभाव को बीच में एकल लाइन चाहिए तो खुला चित्रण मार्ग तैयार करें।

क्या मैं पूरी पाथ लंबाई के लिए 100% इस्तेमाल कर सकता हूँ? stroke-dashoffset में सामान्य विकल्प के रूप में नहीं। उसके प्रतिशत व्यूपोर्ट के सामान्यीकृत विकर्ण को संदर्भित करते हैं। उदाहरण SVG का अंतर्निहित pathLength="100" और बिना इकाई के डैश मान लेता है।

क्या PNG को SVG करने से वह हाथ से लिखने के एनीमेशन के लिए तैयार हो जाता है? वेक्टराइज़ेशन से कलम क्रम या केंद्ररेखा की स्वचालित गारंटी नहीं मिलती। परिणामी ज्यामिति देखें और चित्रण पाथ तथा समय अलग तैयार करें।

स्रोत

1. MDN — stroke-dasharray — स्ट्रोक रंग के लिए बारी-बारी डैश और अंतर लंबाई परिभाषित करता है।
2. MDN — stroke-dashoffset — पैटर्न ऑफ़सेट और प्रतिशत का संदर्भ समझाता है।
3. MDN — pathLength — पाथ और स्ट्रोक के लिए अंतर्निहित दूरी कैलिब्रेशन बताता है।
4. W3C — SVG चित्रण — भरण और स्ट्रोक व्यवहार अलग करता है।
5. MDN — prefers-reduced-motion — स्थिर परिणाम के लिए इस्तेमाल उपयोगकर्ता पसंद बताता है।
6. Motion — SVG एनीमेशन — लाइब्रेरी की अलग लाइन चित्रण API बताता है।

पूरे चित्र का क्रम तय करने से पहले एक मार्ग शुरुआत, मध्य और अंत पर जाँचें। स्रोत रास्टर निशान हो तो संपादन योग्य जाँच के लिए प्रारंभिक SVG तैयार करें, ज्यामिति देखें और चित्रण मार्ग अलग तय करें।