CSS में टाइमिंग फ़ंक्शन और Cubic Bezier की भूमिका
CSS transitions और animations में गति के बदलाव को नियंत्रित करने के लिए timing functions का उपयोग किया जाता है। जब आप किसी एलिमेंट को एक स्थान से दूसरे स्थान पर ले जाते हैं, तो वह पूरी दूरी एक समान गति से तय कर सकता है, या शुरुआत में धीमा और अंत में तेज़ हो सकता है। इस गति और प्रगति (progress) के बदलाव को गणितीय रूप से परिभाषित करने के लिए cubic-bezier(x1, y1, x2, y2) फ़ंक्शन का इस्तेमाल होता है।
यह जेनरेटर आपको विज़ुअल रूप से दो कंट्रोल पॉइंट खींचकर अपनी पसंद का easing कर्व बनाने की सुविधा देता है। जैसे ही आप कर्व को बदलते हैं, एक डॉट उस कर्व के अनुसार चलता है और दूसरा डॉट एक समान (steady) गति से चलता है, जिससे आप दोनों की गति की तुलना कर सकते हैं।
कंट्रोल पॉइंट और इनपुट सीमाएं
एक cubic Bezier कर्व को परिभाषित करने के लिए चार मानों (x1, y1, x2, y2) की आवश्यकता होती है। ये मान दो कंट्रोल पॉइंट की स्थिति को दर्शाते हैं जो कर्व के आकार को मोड़ते हैं:
- पहला कंट्रोल पॉइंट (x1, y1): पहला हैंडल जो कर्व की शुरुआती गति को प्रभावित करता है।
- दूसरा कंट्रोल पॉइंट (x2, y2): दूसरा हैंडल जो कर्व की अंतिम गति को प्रभावित करता है।
इस टूल में इनपुट सेट करने के लिए निम्नलिखित नियम और सीमाएं लागू होती हैं:
| इनपुट पैरामीटर | न्यूनतम मान | अधिकतम मान | व्यवहार और सीमाएं |
|---|---|---|---|
| पहला कंट्रोल पॉइंट X | 0 |
1 |
समय की प्रगति को दर्शाता है। मान हमेशा 0 और 1 के बीच होना चाहिए। |
| पहला कंट्रोल पॉइंट Y | -0.70 |
1.70 |
प्रगति की स्थिति को दर्शाता है। यह सीमा से बाहर जाकर overshoot इफ़ेक्ट बना सकता है। |
| दूसरा कंट्रोल पॉइंट X | 0 |
1 |
समय की प्रगति को दर्शाता है। मान हमेशा 0 और 1 के बीच होना चाहिए। |
| दूसरा कंट्रोल पॉइंट Y | -0.70 |
1.70 |
प्रगति की स्थिति को दर्शाता है। यह सीमा से बाहर जाकर pull-back इफ़ेक्ट बना सकता है। |
इनपुट फ़ील्ड के नियम और शॉर्टकट
- ऑटो-करेक्शन: यदि आप "पहला कंट्रोल पॉइंट X" में
9जैसा अमान्य मान दर्ज करते हैं और फ़ील्ड से फ़ोकस हटाते हैं, तो यह स्वतः सुधरकर अधिकतम सीमा यानी1पर आ जाता है। - रीसेट व्यवहार: यदि आप किसी संख्यात्मक इनपुट फ़ील्ड को पूरी तरह से खाली कर देते हैं और फ़ोकस हटाते हैं, तो पिछला मान्य मान स्वतः वापस आ जाता है।
- कीबोर्ड शॉर्टकट: जब कोई कंट्रोल पॉइंट हैंडल फ़ोकस में होता है, तब Left arrow की दबाने पर उसका मान सूक्ष्म रूप से बदलकर
0.99जैसी सटीक वैल्यू पर आ जाता है। - अपूर्ण इनपुट: खाली या गैर-संख्यात्मक इनपुट दर्ज करने पर टूल एक पूर्ण और मान्य मान का इंतज़ार करता है।
प्रीसेट और आउटपुट विकल्प
मैन्युअल रूप से हैंडल खींचने के अलावा, आप टूल में दिए गए प्रीसेट का उपयोग कर सकते हैं। इन प्रीसेट को चुनने पर संबंधित cubic-bezier() मान तुरंत जेनरेट हो जाते हैं:
- मानक प्रीसेट: "ease", "ease-in", "ease-out", और "ease-in-out"।
- एडवांस्ड प्रीसेट: "शुरुआत में पीछे", "अंत में पीछे", और "दोनों सिरों पर पीछे"। उदाहरण के लिए, "अंत में पीछे" प्रीसेट चुनने पर
cubic-bezier(0.34, 1.56, 0.64, 1)वैल्यू सेट होती है।
आउटपुट परिणाम
- आपका कर्व: यह आपके द्वारा तैयार किए गए easing कर्व का विज़ुअल ग्राफ़ दिखाता है।
- cubic-bezier(x1, y1, x2, y2): यह आपके कर्व का सटीक CSS फ़ंक्शन मान है जिसे आप सीधे कॉपी कर सकते हैं।
- Copied: मान को सफलतापूर्वक कॉपी करने के बाद इंटरफ़ेस पर यह स्टेटस दिखाई देता है। इस प्रक्रिया में केवल सफलता का संकेत मिलता है, कोई विफलता या रिजेक्शन प्रॉम्प्ट नहीं होता है।
गणितीय सिद्धांत और सीमाएं
Cubic Bezier कर्व ग्राफ़िकल रूप से नीचे-बाएँ कोने (शुरुआत) से शुरू होकर ऊपर-दाएँ कोने (अंत) तक जाता है। इसमें दो मुख्य अक्ष होते हैं:
- X-अक्ष (बाएँ से दाएँ): यह समय की प्रगति को दर्शाता है। चूंकि समय पीछे नहीं जा सकता, इसलिए X1 और X2 के मान हमेशा
0और1के बीच सीमित रहते हैं। - Y-अक्ष (नीचे से ऊपर): यह एनीमेशन की प्रगति को दर्शाता है।
Overshoot और Pull-back इफ़ेक्ट
Y-अक्ष के मान 0 से नीचे (न्यूनतम -0.70) या 1 से ऊपर (अधिकतम 1.70) जा सकते हैं। जब Y का मान 1 से अधिक होता है, तो एनीमेशन अपने अंतिम बिंदु से आगे निकल जाता है और फिर वापस लौटता है, जिसे overshoot कहा जाता है। जब Y का मान 0 से नीचे जाता है, तो एनीमेशन शुरू होने से पहले थोड़ा पीछे खिंचता है, जिसे pull-back या anticipation इफ़ेक्ट कहते हैं।
सिंगल कर्व की सीमाएं
एक सिंगल cubic-bezier फ़ंक्शन केवल एक बार आगे निकल सकता है (overshoot) और एक बार पीछे खिंच सकता है (anticipate) और फिर स्थिर हो सकता है। यह ऐसे जटिल प्रभावों को नहीं दर्शा सकता जो बार-बार अपनी दिशा बदलते हैं, जैसे कि bounce (गेंद का टप्पा खाना) या elastic (लचीलापन) इफ़ेक्ट।
डेटा प्रोसेसिंग और गोपनीयता
कर्व आपके ब्राउज़र में ही बनता है। यहाँ जो भी सेट करते हैं वह BroBroGo पर अपलोड नहीं होता।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
दो हैंडल और चार नंबर का क्या मतलब है?
कर्व नीचे-बाएँ (शुरुआत) से ऊपर-दाएँ (अंत) तक जाता है: बाएँ से दाएँ समय, और नीचे से ऊपर प्रगति। दोनों हैंडल वही कंट्रोल पॉइंट हैं जो कर्व को मोड़ते हैं — हर एक का एक X और एक Y होता है, यानी मिलकर cubic-bezier(x1, y1, x2, y2)। X हमेशा 0 और 1 के बीच रहता है, जबकि Y ऊपरी किनारे से ऊपर या निचले किनारे से नीचे जा सकता है, ताकि गति रुकने से पहले आगे निकल जाए या थोड़ा पीछे खिंचे।
यह वैल्यू अपने CSS में कैसे इस्तेमाल करूँ?
cubic-bezier() कॉपी करें और जहाँ भी timing function चाहिए वहाँ लगाएं — transition-timing-function, animation-timing-function, या शॉर्टहैंड में, जैसे transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)। ease, ease-in, ease-out और ease-in-out कीवर्ड असल में तय cubic-bezier कर्व ही हैं, इसलिए उनका प्रीसेट चुनने पर आपको कीवर्ड के पीछे की सटीक वैल्यू दिख जाती है।
क्या इससे bounce या elastic इफ़ेक्ट बन सकता है?
अकेले नहीं। एक cubic-bezier आगे निकल सकता है और थोड़ा पीछे खिंच सकता है — “back” प्रीसेट एक हैंडल को बॉक्स के बाहर खींचकर यही करते हैं — पर वह सिर्फ़ एक दिशा में चलकर रुक सकता है। bounce और elastic कई बार दिशा बदलते हैं, जो किसी एक cubic-bezier से नहीं हो सकता; उनके लिए CSS keyframes या कई स्टॉप वाला linear() फ़ंक्शन चाहिए।