Create and animate SVG polygons

Sep 13, 2025

कैसे करना है

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

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

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

हम के मूल्यों को एनिमेट करने के लिए tweenmax का उपयोग करेंगे से के मूल्यों के लिए सरणी सेवा मेरे सरणी। जब एनीमेशन पूरा हो जाता है, तो हम सेट करेंगे सेवा मेरे नया बनने के लिए सरणी से सरणी।

पहले रन पर, से सरणी में सभी बिंदु मान और वर्तमान में दृश्यमान बहुभुज के सभी भरे रंग होंगे।

 & lt; a href = "# nat" & gt; nat & lt; / a & gt;
& lt; a href = "# bwl" & gt; bwl & lt; / a & gt;
& lt; a href = "# केविन" & gt; केविन & lt; / a & gt;

& lt; svg class = "svg-धारक" & gt;
  #nat के लिए बहुभुज यहाँ जाओ
& lt; / svg & gt;

& lt; svg id = "nat" वर्ग = "छुपा" & gt;
 #nat के लिए बहुभुज यहाँ जाओ
& lt; / svg & gt;

& lt; svg id = "bwl" वर्ग = "छुपा" & gt;
 #bwl के लिए बहुभुज यहाँ जाओ
& lt; / svg & gt;
& lt; svg id = "केविन" वर्ग = "छुपा" & gt;
 #kevin के लिए बहुभुज यहाँ जाओ
& lt; / svg & gt;

01. छवियों को बहुभुज में कनवर्ट करें

two images before and after Primitive — आदिम के माध्यम से चलने से पहले और बाद की छवि कैसे दिखाई देगी

पहला कदम वास्तव में छवियों को बनाना है। इसके लिए मैंने एक उपकरण का इस्तेमाल किया प्राचीन (इसकी जाँच पड़ताल करो गिटहूब रेपो )। ट्यूटोरियल में उपयोग की गई छवियां कुछ दोस्तों की व्यक्तिगत छवियां हैं।

कमांड लाइन का उपयोग करके आदिम उपयोगिता के माध्यम से अपनी चुनी हुई छवियों को चलाएं:

 Primitive -i input.jpg -o output.svg -n 250 -m 1

-n 250 250 बहुभुज निर्दिष्ट करता है, -m 1 एक त्रिभुज आकार निर्दिष्ट करता है, और -मैं इनपुट.जेपीजी -ओ आउटपुट। एसवीजी इनपुट और आउटपुट हैं। यह महत्वपूर्ण है कि सभी एसवीजी में बहुभुज की संख्या समान है और वही आकार है। Output.svg बहुभुज का संग्रह होगा।

02. अपने SVGS को HTML में पेस्ट करें

एसवीजी बनाने के बाद उन्हें एचटीएमएल के शरीर में पेस्ट करें। पहले SVG को डुप्लिकेट करें और कक्षा को डुप्लिकेट करें .svg- धारक ।

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

फिर चर घोषित करें:

 Topolygonarray = [];
polygonarray = [] से चलो;

03. बहुभुज निर्देशांक निकालें

अब हमें अपने प्रत्येक बहुभुज के माध्यम से भागना होगा और अंक विशेषता में निर्देशांक प्राप्त करना होगा। हम regex का उपयोग कर ऐसा कर सकते हैं:

 कॉन्स्टकोर्डिनेट्स = (बहुभुज) = & gt; {
  लौटें polygon.getattribute ("अंक")। मैच (/ (-? [0-9] [0-9 \।] *), (-? [0-9] [0-9 \।] *) \ ( -? [0-9] [0-9 \] *), (-? [0-9] [0-9] [0-9 \।] *) \ (-? [0-9] [0-9 \।] *), (-? [0-9] [0-9 \।] *) /);
};

04. बहुभुज सरणी अपडेट करें

image saved as an SVG with text — एक एसवीजी के रूप में सहेजा गया, सभी त्रिकोण तत्व बन जाते हैं

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

 कॉन्स अपडेट्पोलिगोनैरेज़ = (iDtoanimateto) = & gt; {
  TOPOLYGONARRAY = CREATEPOLYGONPOINTSOBJECT (DOCUMENT.GETELEMENTBYID (IDTOANIMATETO)। प्रश्नवर्ती ("पॉलीगॉन"));

  AnimatePolygons ();

  polygonarray = topolygonarray से;
}

यह फ़ंक्शन दो अन्य कार्यों को कॉल करता है - CreatePolygonPointSobject तथा एनिमेटपोलियग्स ।

CreatePolygonPointSobject सभी बहुभुज तत्वों को वस्तुओं में परिवर्तित करता है जिन्हें हम के मूल्यों को एनिमेट कर सकते हैं, और एनिमेटपोलियग्स अंदर बहुभुज को एनिमेट करता है .svg- धारक ।

 contepolygonpointsobject = (बहुभुज) = & gt; {
  const polygonsarray = [];

  polygons.foreach ((बहुभुज, i) = & gt; {
    कॉन्स कोऑर्डिनेट्स = गेटकोर्डिनेट्स (बहुभुज);

    polygonsarray.push ({
      भरें: polygon.getattribute ("भरें"),
      एक: निर्देशांक ,
      दो: निर्देशांक ,
      तीन: निर्देशांक ,
      चार: निर्देशांक ,
      पांच: निर्देशांक ,
      छह: निर्देशांक 
    });
  });

  Polygonsarray लौटें;
}

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

05. बहुभुज को एनिमेट करें

[18 9] [1 9 0]

अंतिम संस्करण में, एसवीजी बहुभुज एक एनीमेशन के माध्यम से संक्रमण करेगा

चलो बहुभुज को एनिमेट करने के लिए TweenMax का उपयोग करें।

 कॉन्स एनिमेटपोलियगोन = () = & gt; {
  कॉन्स पॉलीगोन = दस्तावेज़। प्रश्नोत्तरीक्टर ("एसवीजी-धारक")। क्वेरीसेक्टरल ("बहुभुज");
  polygonarray = createpolygonpointsobject (बहुभुज);

  polygonarray.foreach ((obj, i) = & gt; {
    Tweenmax.to (obj, 1, {
      एक: topolygonarray [i] .one,
      दो: topolygonarray [i] .two,
      तीन: Topolygonarray [i] .three,
      चार: topolygonarray [i] .four,
      पांच: topolygonarray [i] .five,
      छह: topolygonarray [i] .six,
      आसानी: power3.easeout,
      onupdate: () = & gt;
      {
        बहुभुज [i]। SsetTribute ("अंक", `$ {obj.one}, $ {obj.two} $ {obj.three}, $ {obj.four} $ {obj.five}, $ {obj.six } `);
      }
    });
  });
}

एनीमेशन के हर फ्रेम पर, यह लूप वर्तमान में दिखाई देने वाले बहुभुज की विशेषताओं को एनिमेट करता है .svg- धारक ऊपर सेट किए गए नए मानों के लिए। अवज्ञा विधि Tweenmax.to हर बार एनीमेशन अपडेट कहा जाता है, इसलिए यहां के मूल्यों में हर बदलाव पर यह चल जाएगा obj.one , obj.two , obj.three , और इसी तरह। इस तरह, अंक मूल्यों को अलग-अलग निर्देशांक रखने के लिए एनिमेट और आकार के रूप में मानते हैं।

इसके बाद हम भरने को एनिमेट कर सकते हैं। प्रत्येक बहुभुज के लिए .svg- धारक , भरने के लिए भरें topolygonarray यह एक ही सूचकांक में है।

 polygons.foreach ((बहुभुज, i) = & gt; {
    कॉन्स टोलर = topolygonarray [i] .fill;

    Tweenlite.to (बहुभुज, 1, {
      भरें: टोकोलर,
      आसानी: power3.easeout
    });
});

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

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

अधिक पढ़ें:

[25 9]

एसवीजी के लिए पूर्ण गाइड

जावास्क्रिप्ट के साथ एसवीजी एनिमेट करें

अपने वर्कफ़्लो को गति देने के लिए 30 सर्वश्रेष्ठ वेब डिज़ाइन टूल्स

Create and animate SVG polygons

01. छवियों को बहुभुज में कनवर्ट करें

02. अपने SVGS को HTML में पेस्ट करें

03. बहुभुज निर्देशांक निकालें

04. बहुभुज सरणी अपडेट करें

05. बहुभुज को एनिमेट करें

कैसे करना है - सर्वाधिक लोकप्रिय लेख

चेहरा मुखौटा पहनते समय अपने चश्मे को फॉगिंग कैसे रोकें

सुपर शीघ्र जावास्क्रिप्ट के लिए 21 कदम

Use brain.js to build a neural network

फ़ोटोशॉप में एक छवि का आकार बदलने के लिए

How to design responsive and device-agnostic forms

इलस्ट्रेटर में 3 डी लेटरिंग कैसे बनाएं

The secret to painting like Monet

Top tips for sculpting a creature in ZBrush

श्रेणियाँ