आकृति मोरफिंग के आइकॉन बटन पर क्लिक करें - सीएसएस-ट्रिक्स

यहाँ विचार एक बटन में SVG आइकन का उपयोग करता है और बटन क्लिक होने पर उस आइकन को दूसरे के लिए स्वैप करता है। एक बटन क्लिक अक्सर सुझाव देता है कि एक कार्रवाई की गई है, इसलिए आइकन को स्विच करना संदर्भ में परिवर्तन दिखाने और यह पुष्टि करने के लिए एक अच्छा यूआई स्पर्श हो सकता है कि कार्रवाई हुई है।

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

कोड मोरेन पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा क्लिक पर पेन मोरफस्विजी बटन पर देखें।

आइए एक स्निपेट बनाएं जो इस पैटर्न को पूरा करता है ताकि हम इसे अन्य समान संदर्भों में उपयोग कर सकें।

आवश्यकताओं को

जब हम इसे एसवीजी स्निपेट के रूप में दाखिल कर रहे हैं, तो हम जीएसएपी के ट्वीनमैक्स पर भरोसा करने जा रहे हैं, जो विशेष रूप से एसवीजी और मॉर्फ्सवीजी को एनिमेट करने के लिए जावास्क्रिप्ट लाइब्रेरी है, जो ट्वीनमैक्स का एक घटक है।

हां, एसवीजी के पास वास्तव में एनिमेशन के लिए मूल समर्थन है जो हमें एक ही चीज को पूरा करने की अनुमति देता है। हालाँकि, WebKit और ब्लिंक ब्राउज़र के भविष्य के संस्करणों में एसएमआईएल समर्थन के साथ और यह IE और एज में समर्थन की कुल कमी है, GSAP एक अधिक आकर्षक विकल्प बन जाता है।

चलो उन आग और हमें एक पैटर्न का निर्माण!

चरण 1: एसवीजी आकार चुनें

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

  Download

चरण 2: स्टाइल द बटन और एसवीजी

हम अगले CSS को सेट कर सकते हैं। हमारे उदाहरण में अधिकांश शैलियाँ डेमो के लिए विशिष्ट हैं। यहां इस कार्यक्षमता को बनाने के लिए आवश्यक न्यूनतम हिस्सा है।

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

/* The main SVG */ .button-icons ( width: 1.25em; ) /* The individual icons */ .icon ( fill: #fff; ) /* We hide the checkmark by default */ #checkmark ( visibility: hidden; )

चरण 3: शक्तिशाली मॉर्फिन 'एसवीजी!

यह वह जगह है जहां TweenMax और MorphSVG खेल में आते हैं। उदाहरण के लिए पूर्ण कोड नीचे दिया गया है, लेकिन यह इस सामान्य स्क्रिप्ट का अनुसरण करता है:

शुरू करने के लिए कुछ चर को परिभाषित करें ताकि हम हर बार उन्हें लिखने के बिना पूरे कोड में उनका उल्लेख कर सकें:

icons: पूर्ण एसवीजी तत्व
button: बटन (या लिंक) जिसमें हमारे आकार शामिल हैं
buttonText: बटन के अंदर का पाठ
buttonTL: चेक चिह्न के लिए डाउनलोड आइकन स्वैप करने के लिए MorphSVG कमांड

अरे, जावास्क्रिप्ट, कृपया क्लिक किए जाने वाले बटन को देखें और आगे और वैकल्पिक क्लिक पर MorphSVG एनीमेशन को आगे और पीछे चलाएं।
ओह और, अरे जावास्क्रिप्ट, बटन पर क्लिक करने पर बटन टेक्स्ट को स्वैप भी करते हैं।
धन्यवाद, जावास्क्रिप्ट

// We're going to select some things and make them variables var select = function(s) ( return document.querySelector(s); ), icons = select('#icons'), button = select('.button'), buttonText = document.getElementById("button-text") // Morph the Download icon into the Checkmark icon var buttonTl = new TimelineMax((paused:true)); buttonTl.to('#download', 1, ( morphSVG:(shape:'#checkmark'), ease:Elastic.easeInOut )) // On button click, play the animation button.addEventListener('click', function() ( if (buttonTl.time() > 0) ( buttonTl.reverse(); ) else ( buttonTl.play(0); ) )) // On button click, swap out the button text button.addEventListener('click', function() ( if (button.classList.contains("saved")) ( button.classList.remove("saved"); buttonText.innerHTML = "Download"; ) else ( button.classList.add("saved"); buttonText.innerHTML = "Saved!"; ) ), false);

डेमो

निम्नलिखित उस कोड का डेमो है जिसे हमने कवर किया है:

संदर्भ

GreenSock MorphSVG: प्लगइन का उपयोग करने के लिए प्रलेखन।
एसवीजी शेप मॉर्फिंग कैसे काम करता है: क्रिस ने एसएमआईएल का उपयोग करते हुए इसी अवधारणा को प्रकाशित किया और इस पैटर्न के लिए एक अच्छी नींव प्रदान की।
हैप्पी / सैड पेन: क्रिस गैनन का डेमो जिसने इस पैटर्न के लिए एनीमेशन के निर्माण में मदद की।