इस लेख में
Cubic Bezier वक्र क्या हैं?
एक cubic Bezier वक्र एक गणितीय फ़ंक्शन है जिसका उपयोग CSS में एनिमेशन और ट्रांज़िशन के समय को परिभाषित करने के लिए किया जाता है। cubic-bezier(x1, y1, x2, y2) के रूप में लिखा जाने वाला यह वर्णन करता है कि एक एनिमेशन शुरू से अंत तक कैसे आगे बढ़ता है, समय को चार नियंत्रण बिंदुओं द्वारा परिभाषित एक सहज वक्र के साथ प्रगति पर मैप करके।
CSS में, cubic-bezier() फ़ंक्शन transition-timing-function और animation-timing-function प्रॉपर्टीज़ के easing को नियंत्रित करता है। रैखिक गति के बजाय, यह आपको प्राकृतिक-महसूस होने वाली त्वरण और मंदन बनाने देता है जो वास्तविक-दुनिया की भौतिकी की नकल करते हैं, जिससे UI एनिमेशन परिष्कृत और सुविचारित महसूस होते हैं।
चार नियंत्रण मानों को समझना
cubic-bezier() फ़ंक्शन चार मान लेता है जो वक्र पर दो नियंत्रण बिंदुओं को परिभाषित करते हैं। ये नियंत्रण बिंदु आकार देते हैं कि एनिमेशन कैसे त्वरित और मंदित होता है।
- X1 (0-1) — पहले नियंत्रण बिंदु की क्षैतिज स्थिति, जो तय करती है कि प्रारंभिक त्वरण चरण कब समाप्त होता है
- Y1 (कोई भी मान) — पहले नियंत्रण बिंदु की ऊर्ध्वाधर स्थिति, जो नियंत्रित करती है कि एनिमेशन कितनी तेज़ी से शुरू होता है। 1 से ऊपर के मान एक ओवरशूट प्रभाव बनाते हैं
- X2 (0-1) — दूसरे नियंत्रण बिंदु की क्षैतिज स्थिति, जो तय करती है कि मंदन चरण कब शुरू होता है
- Y2 (कोई भी मान) — दूसरे नियंत्रण बिंदु की ऊर्ध्वाधर स्थिति, जो नियंत्रित करती है कि एनिमेशन कैसे समाप्त होता है। 1 से ऊपर के मान एक उछलता ओवरशूट बनाते हैं
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
एक Cubic Bezier वक्र बनाएँ →आम Easing प्रीसेट और उन्हें कब उपयोग करें
CSS कई अंतर्निहित easing कीवर्ड प्रदान करता है जो विशिष्ट cubic-bezier मानों से मेल खाते हैं। इन प्रीसेट को समझने से आपको अपने एनिमेशन के लिए सही अनुभूति चुनने में मदद मिलती है।
- ease (0.25, 0.1, 0.25, 1.0) — CSS डिफ़ॉल्ट, तेज़ी से शुरू होता है फिर धीरे-धीरे मंदित होता है। अधिकांश सामान्य-उद्देश्य ट्रांज़िशन के लिए अच्छा
- ease-in (0.42, 0, 1.0, 1.0) — धीरे-धीरे शुरू होता है और त्वरित होता है। स्क्रीन छोड़ने या फीके पड़ने वाले एलिमेंट के लिए सर्वोत्तम
- ease-out (0, 0, 0.58, 1.0) — तेज़ी से शुरू होता है और मंदित होता है। स्क्रीन में प्रवेश करने या प्रकट होने वाले एलिमेंट के लिए आदर्श
- ease-in-out (0.42, 0, 0.58, 1.0) — धीमी शुरुआत और धीमा अंत, बीच में तेज़ गति के साथ। लूपिंग एनिमेशन या स्क्रीन पर बने रहने वाले एलिमेंट के लिए उपयुक्त
- linear (0, 0, 1, 1) — शुरू से अंत तक स्थिर गति। प्रोग्रेस बार, लोडिंग स्पिनर या रंग ट्रांज़िशन के लिए उपयोग करें जहाँ एक समान गति स्वाभाविक लगती है
अक्सर पूछे जाने वाले प्रश्न
क्या सभी ब्राउज़र cubic-bezier() का समर्थन करते हैं?
हाँ। cubic-bezier() फ़ंक्शन IE 10 (2012) से सभी प्रमुख ब्राउज़रों में समर्थित है। यह CSS Transitions और CSS Animations विनिर्देशों का हिस्सा है, जिनका Chrome, Firefox, Safari, Edge और सभी आधुनिक मोबाइल ब्राउज़रों में पूर्ण समर्थन है।
क्या मैं cubic-bezier() के साथ स्प्रिंग या बाउंस एनिमेशन बना सकता हूँ?
Cubic Bezier वक्र 1 से अधिक Y मानों (ओवरशूट) का उपयोग करके सरल बाउंस प्रभावों का अनुमान लगा सकते हैं। उदाहरण के लिए, cubic-bezier(0.34, 1.56, 0.64, 1) एक हल्का ओवरशूट बनाता है। हालाँकि, कई बाउंस के साथ वास्तविक स्प्रिंग भौतिकी के लिए CSS spring() (जो अभी व्यापक रूप से समर्थित नहीं है) या GSAP या Framer Motion जैसी JavaScript एनिमेशन लाइब्रेरी की ज़रूरत होती है।
CSS ट्रांज़िशन और CSS एनिमेशन में क्या अंतर है?
CSS ट्रांज़िशन दो अवस्थाओं के बीच एनिमेट करते हैं जब कोई प्रॉपर्टी बदलती है (जैसे होवर पर)। CSS एनिमेशन बहु-चरणीय अनुक्रमों को परिभाषित करने के लिए कीफ़्रेम का उपयोग करते हैं जो लूप कर सकते हैं और स्वतंत्र रूप से चल सकते हैं। दोनों अवस्थाओं या कीफ़्रेम के बीच easing को नियंत्रित करने के लिए cubic-bezier() सहित समान समय फ़ंक्शन का उपयोग करते हैं।