मुख्य बिंदु
- 01संख्यात्मक मानों का अनुमान लगाने के बजाय दो नियंत्रण-बिंदु हैंडल को ड्रैग करके easing वक्र को दृष्टिगत रूप से sculpt करें।
- 02एक लाइव बॉल एनिमेशन timing को चलाता है ताकि आप इसे प्रतिबद्ध करने से पहले गति को महसूस कर सकें।
- 03सभी पांच CSS built-in presets (ease, linear, ease-in, ease-out, ease-in-out) शुरुआती बिंदु के रूप में उपलब्ध हैं।
- 04cubic-bezier() मान दो-दशमलव सटीकता के साथ लाइव अपडेट होता है, किसी भी CSS प्रॉपर्टी में पेस्ट करने के लिए तैयार।
UI गति के लिए कस्टम Easing Curves महत्वपूर्ण क्यों हैं
CSS के निर्मित timing फ़ंक्शन — ease, ease-in-out, linear — बहुत कुछ कवर करते हैं, लेकिन हर UI में ऐसे पल होते हैं जहाँ डिफ़ॉल्ट गलत लगता है। एक tooltip जो बहुत तेजी से दिखाई देता है, एक modal जो खुलने पर overshoots, एक progress bar जो mechanical महसूस होता है। Cubic-bezier वक्र आपको गति को mechanical के बजाय प्राकृतिक महसूस करने के लिए tune करने देते हैं, लेकिन cubic-bezier(0.4, 0, 0.2, 1) में चार नंबर सीधे समझने के लिए लगभग असंभव हैं।
Handytool का cubic-bezier एडिटर उन नंबरों को दो ड्रैग करने योग्य हैंडल वाले एक दृश्य वक्र में बदलता है। एक हैंडल को हिलाएं और बॉल एनिमेशन तुरंत चलाता है, इसलिए आप महसूस करके iterate कर सकते हैं जब तक गति आपके intent से मेल न खाए। फिर मान को कॉपी करें और इसे अपने CSS में गिराएं — तैयार।
एक CSS Easing वक्र कैसे डिज़ाइन करें
- 01
एक प्रीसेट से शुरू करें
ease, linear, ease-in, ease-out या ease-in-out को एक baseline के रूप में चुनें। हैंडल प्रत्येक प्रीसेट के लिए सही positions पर snap करते हैं।
- 02
नियंत्रण बिंदु हैंडल को ड्रैग करें
प्रत्येक हैंडल वक्र के एक सिरे को नियंत्रित करता है — शुरुआती हैंडल शुरुआती acceleration को आकार देता है, ending हैंडल अंतिम deceleration को आकार देता है। एक हैंडल को हिलाना प्रीसेट को 'custom' में स्वचालित रूप से स्विच करता है।
- 03
बॉल एनिमेशन को देखें
एक बॉल आपके वक्र का उपयोग करके बाएं से दाएं एनिमेट होता है। slow बनाम fast संक्रमण को पूर्वावलोकन करने के लिए अवधि स्लाइडर को समायोजित करें।
- 04
Overshoot के साथ प्रयोग करें
Y-axis हैंडल को 1 से ऊपर या 0 से नीचे ड्रैग करें overshoot और undershoot बनाने के लिए — 'bouncy' effect जो एक मेनू को energetically snap खुल देता है।
- 05
CSS मान को कॉपी करें
cubic-bezier() स्ट्रिंग पकड़ने के लिए कॉपी पर क्लिक करें और इसे अपनी stylesheet में transition-timing-function या animation-timing-function में पेस्ट करें।
पूरी तरह आपके ब्राउज़र में चलता है
एडिटर एक self-contained ब्राउज़र टूल है — कोई फॉन्ट, कोई स्क्रिप्ट, और पृष्ठ के खुलने के बाद कोई डेटा लोड नहीं होता है। हैंडल को ड्रैग करना और एनिमेशन को पूर्वावलोकन करना ऑफलाइन काम करता है। pूर्वावलोकन बॉल के लिए cubic-bezier फॉर्मूला वही है जो ब्राउज़र CSS संक्रमण के लिए उपयोग करते हैं, इसलिए एडिटर में आप जो देखते हैं वह बिल्कुल वही है जो आपकी stylesheet का उत्पादन करेगा।
install करने के लिए कुछ नहीं है और sign up करने के लिए कुछ नहीं है। आउटपुट एक एकल CSS मान है — पेस्ट करें और आप तैयार हैं।
Cubic-Bezier एडिटर FAQ
cubic-bezier easing वक्र क्या है?
यह एक गणितीय वक्र है जिसे दो नियंत्रण बिंदु द्वारा परिभाषित किया जाता है जो निर्धारित करता है कि CSS संक्रमण या एनिमेशन समय के साथ कैसे तेजी लाता है। cubic-bezier(x1, y1, x2, y2) में चार नंबर उन नियंत्रण बिंदुओं की positions निर्धारित करते हैं।
Y मान 1 से ऊपर या 0 से नीचे क्यों जा सकते हैं?
0–1 के बाहर Y मान overshoot और undershoot का उत्पादन करते हैं — वक्र अपने endpoint को settle करने से पहले पार करता है। यह 'bouncy' easing वक्र बनाता है। X मान 0–1 के अंदर रहना चाहिए।
मैं आउटपुट का उपयोग कैसे करूँ?
cubic-bezier(...) स्ट्रिंग को कॉपी करें और इसे किसी भी CSS transition-timing-function या animation-timing-function मान में पेस्ट करें। यह हर आधुनिक ब्राउज़र में काम करता है।
ease-in-out वास्तव में क्या मतलब है?
Ease-in-out धीमी शुरुआत करता है, बीच में तेजी लाता है, और अंत में धीमा हो जाता है — cubic-bezier(0.42, 0, 0.58, 1)। यह real objects को कैसे तेजी लाता है और decelerate करता है यह दर्पण करता है और अधिकांश polished UI गति के लिए डिफ़ॉल्ट विकल्प है।
क्या बॉल एनिमेशन पूर्वावलोकन CSS के लिए सटीक है?
हाँ — पूर्वावलोकन वही cubic bezier फॉर्मूला का उपयोग करता है जो ब्राउज़र CSS संक्रमण पर लागू करते हैं। अवधि स्लाइडर आपको तैयार होने से पहले slow बनाम fast वक्र को महसूस करने देता है।