SVG मोशन पाथ: कस्टम आइकन को वक्र पर चलाएँ

SVG तत्व को रास्ते पर चलाने के लिए animateMotion दें और भीतर mpath से मौजूदा पाथ संदर्भित करें। rotate="auto" चलती कलाकृति रास्ते की दिशा में घुमाता है। कलाकृति की स्थानीय मूलबिंदु पाथ पर चलती है, इसलिए इंपोर्ट आइकन का आधार जानबूझकर चुनना चाहिए।

कस्टम तीर, प्रतीक या छोटा चित्र आकार बदले बिना चलाना हो तो यह उपयोगी है। अपने-आप खिंचती दिखने वाली रेखा के लिए स्ट्रोक एनीमेशन दें। एक आकृति को दूसरी में बदलने के लिए पाथ मॉर्फिंग दें। ये तकनीकें अलग दृश्य काम करती हैं।

रास्ता और कलाकृति अलग रखें

रास्ता आइकन का चलने का स्थान तय करता है। आइकन पाठक को दिखने वाली चीज़ तय करता है। MDN का animateMotion संदर्भ मोशन तत्व और mpath संदर्भ संदर्भ से पाथ फिर इस्तेमाल करना बताते हैं।

नीचे मौलिक उदाहरण में नीला-हरा तीर और सुनहरा बिंदु हैं। तीर धनात्मक X में है, जिससे अपने-आप घुमाव देखना आसान है। कलाकृति बड़े एक्सपोर्ट कैनवस में दूर होने के बजाय (0, 0) के आसपास बनी है।

इसे motion.html सेव करके ब्राउज़र में खोलें। पहले स्थिर प्रतीक दिखता है। चार सेकंड का एक चक्कर चलाने के लिए Play दबाएँ; Show static शुरुआती चित्र लौटाता है।

<!doctype html>
<meta charset="utf-8">
<title>Arrow following a curve</title>
<style>
  svg { display: block; width: min(100%, 800px); }
  .moving { display: none; }
  .playing .moving { display: inline; }
  .playing .still { display: none; }
</style>
 
<svg id="scene" viewBox="0 0 480 240"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="An arrow emblem follows a curved route">
  <defs>
    <path id="route" d="M60 180 C160 20 300 20 420 180" />
    <g id="emblem">
      <path fill="#147d78"
            d="M-18-12 H4 V-22 L30 0 L4 22 V12 H-18 Z" />
      <circle cx="-7" cy="0" r="4" fill="#e5a340" />
    </g>
  </defs>
 
  <use href="#route" fill="none" stroke="#a9bab6" stroke-width="2" />
  <use class="still" href="#emblem" transform="translate(60 180)" />
  <g class="moving">
    <use href="#emblem" />
    <animateMotion id="motion" dur="4s" begin="indefinite"
                   fill="freeze" rotate="auto">
      <mpath href="#route" />
    </animateMotion>
  </g>
</svg>
 
<button id="play" type="button">Play</button>
<button id="stop" type="button">Show static</button>
<script>
  const scene = document.querySelector("#scene");
  const motion = document.querySelector("#motion");
  const preference = matchMedia("(prefers-reduced-motion: reduce)");
 
  function showStatic() {
    scene.pauseAnimations();
    scene.classList.remove("playing");
  }
 
  document.querySelector("#play").addEventListener("click", () => {
    if (preference.matches) return;
    scene.pauseAnimations();
    scene.setCurrentTime(0);
    scene.classList.add("playing");
    motion.beginElement();
    scene.unpauseAnimations();
  });
  document.querySelector("#stop").addEventListener("click", showStatic);
  preference.addEventListener("change", showStatic);
  showStatic();
</script>

दिखता धूसर वक्र रास्ते का अलग use है। पाथ अदृश्य चाहिए तो वह use हटाएँ; एनीमेशन संदर्भ देने के लिए परिभाषा defs में रखें। मोशन तत्व उस समूह के भीतर है जिसका तीर और बिंदु साथ चलना चाहिए।

fill="freeze" अंतिम एनीमेशन स्थिति बचाता है। इसका तीर के नीला-हरे रंग से संबंध नहीं। उदाहरण एक बार चलता है, जिससे अंतहीन चक्र के मुकाबले अंतिम स्थान जाँचना आसान है।

रास्ते से दूर तैरता आइकन ठीक करें

मोशन तत्व के निर्देशांक तंत्र पर लगता है। वह लोगो का दृश्य केंद्र अपने-आप नहीं खोजता। इंपोर्ट पाथ (200, 120) के आसपास हों तो उन्हें रखने वाला समूह रास्ते पर चलाने से भीतर का खिसकाव बना रहता है।

कलाकृति का रास्ता छूने वाला बिंदु चुनें, फिर चलने वाले समूह के भीतर उसे (0, 0) पर खिसकाएँ। (200, 120) आधार के लिए संरचना है:

<g class="moving">
  <g transform="translate(-200 -120)">
    <!-- Place the original artwork paths here. -->
  </g>
  <animateMotion dur="4s" rotate="auto">
    <mpath href="#route" />
  </animateMotion>
</g>

भीतरी खिसकाव कलाकृति तैयार करता है; बाहरी समूह मोशन पाता है। आकार या सुधार वाला घुमाव जोड़ते समय काम अलग रखें। SVG एनीमेशन विनिर्देश मोशन को अतिरिक्त ट्रांसफ़ॉर्म कहता है, इसलिए मौजूदा ट्रांसफ़ॉर्म अंतिम स्थान प्रभावित करते हैं।

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

स्थिर जगह पर घुमाव की अपनी केंद्र समस्या है। SVG transform-origin मार्गदर्शिका बिना यात्रा पाथ यह मामला समझाती है।

तय करें कि कलाकृति मुड़े या नहीं

MDN का मोशन घुमाव संदर्भ ये मान बताता है। auto-reverse कलाकृति का मुँह किस दिशा में है, यह बदलता है; रास्ते पर चलने का क्रम नहीं उलटता।

स्रोत ऊपर की ओर हो तो auto नहीं जानता कि ऊपर का मतलब आगे है। भीतरी कलाकृति समूह धनात्मक X में आने तक घुमाएँ, फिर बाहरी समूह को मोशन दें। आइकन की स्थानीय दिशा सुधारने के लिए रास्ता न घुमाएँ।

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

शुरुआत, बीच और अंत जाँचें

हमने Chrome में वही रास्ता और प्रतीक खोला तथा छोटे परीक्षण उपकरण से SVG टाइमलाइन 0, 2 और 4 सेकंड पर रोकी। आइकन नीचे बाएँ शुरू, शिखर के पास गया और नीचे दाएँ खत्म हुआ। auto में उसकी दिशा वक्र के साथ बदली। घुमाव 0 पर बीच का स्थान वही रहा, जबकि तीर क्षैतिज रहा।

यह एक ब्राउज़र में इस नमूने की जाँच है। यह डिज़ाइन टूल में एनीमेशन इंपोर्ट परीक्षण या हर ब्राउज़र एम्बेड तरीके की गारंटी नहीं।

अपनी कलाकृति के लिए:

1. रास्ते की शुरुआत पर संपर्क बिंदु देखें। समय बदलने से पहले स्रोत खिसकाव सुधारें।
2. मोड़ के पास रोकें और पुष्टि करें कि प्रतीक का इच्छित हिस्सा रेखा पर है।
3. अपने-आप और स्थिर घुमाव तुलना करें। कलाकृति के अनुसार चुनें, विशेषकर उसमें टेक्स्ट हो।
4. अंतिम स्थिति में क्लिपिंग देखें और दोबारा चलने की सही शुरुआत पुष्टि करें।
5. वास्तविक वितरण संदर्भ परखें। यह उदाहरण JavaScript नियंत्रण वाले HTML पेज में इनलाइन SVG देता है।

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

उपयोगी स्थिर रूप दें

उदाहरण स्थिर प्रतीक use से शुरू होता है और Play बटन दबाने के बाद ही चलता है। JavaScript न चले तो स्थिर कलाकृति दिखाई रहती है। कम एनीमेशन की पसंद सक्रिय हो तो हैंडलर उसे उसी स्थिति में छोड़ता है।

prefers-reduced-motion मीडिया सुविधा पेज को उपयोगकर्ता की एनीमेशन संबंधी पसंद के अनुसार काम करने देती है। यहाँ JavaScript SVG मोशन शुरू करने से पहले पसंद पढ़ती और पसंद बदलने पर स्थिर रूप लौटाती है।

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

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

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

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

मौजूदा SVG सीधे समूह और आधार तैयारी में जा सकता है। इस उदाहरण जैसे सरल तीर में सीधे ज्यामिति बनाना भी व्यावहारिक है। इमेज वेक्टराइज़ेशन परिचय रास्टर स्रोत ट्रेस करना कब उपयोगी है बताता है।

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

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

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

क्या अपने-आप घुमाव आइकन की आकृति बदलता है? नहीं। मोशन स्थान और दिशा बदलता है। यह पाथ ज्यामिति मॉर्फ नहीं करता। उदाहरण के अपने-आप घुमाव में स्रोत की आगे दिशा धनात्मक X में होनी चाहिए।

क्या दृश्य गाइड रेखा हटा सकता हूँ? हाँ। रास्ते की परिभाषा और ID रखें, लेकिन अलग रेखा बनाने वाला तत्व हटाएँ। मोशन mpath से अब भी पाथ संदर्भित कर सकता है।

स्रोत

1. MDN animateMotion — मोशन पाथ, घुमाव मान और डिफ़ॉल्ट दूरी आधारित गति बताता है।
2. MDN mpath — मोशन तत्व में मौजूदा रास्ता संदर्भित करना समझाता है।
3. SVG एनीमेशन विनिर्देश — मोशन ट्रांसफ़ॉर्म और कलाकृति निर्देशांकों से उनका संबंध परिभाषित करता है।
4. MDN rotate एट्रिब्यूट — स्थिर, अपने-आप और उलटी ओर मुँह करने वाली मोशन दिशा बताता है।
5. MDN कम एनीमेशन पसंद — उपयोगकर्ता की एनीमेशन संबंधी पसंद पहचानना समझाता है।