CSS क्यूबिक-बेज़ियर जनरेटर

CSS क्यूबिक-बेज़ियर जनरेटर क्या है?

CSS क्यूबिक-बेज़ियर जनरेटर CSS ट्रांज़िशन और एनिमेशन द्वारा उपयोग किए जाने वाले cubic-bezier() टाइमिंग फ़ंक्शन का एक मुफ़्त विज़ुअल एडिटर है, जो फ्रंट-एंड डेवलपर्स और मोशन डिज़ाइनरों के लिए बनाया गया है। ease, linear, ease-in, ease-out या ease-in-out जैसा कोई प्रीसेट चुनें, या दोनों नियंत्रण बिंदुओं को स्वयं बारीकी से समायोजित करें: x मान वैध 0–1 सीमा तक सीमित रहते हैं जबकि y मान ओवरशूट और एंटीसिपेशन बनाने के लिए 1 से ऊपर या 0 से नीचे जा सकते हैं। पूर्वावलोकन कर्व को एक इकाई वर्ग पर बनाता है ताकि आप एक नज़र में त्वरण और मंदन पढ़ सकें, और सटीक cubic-bezier(x1, y1, x2, y2) घोषणा आपके कॉपी करने के लिए तैयार की जाती है। जब भी कोई अंतर्निहित कीवर्ड बहुत सामान्य लगे और आप अधिक तेज़, अधिक लचीली या अधिक सोची-समझी गति चाहें तो इसका उपयोग करें।

CSS क्यूबिक-बेज़ियर जनरेटर का उपयोग कैसे करें

1. सेटिंग्स खोलें और एक शुरुआती प्रीसेट चुनें — ease, linear, ease-in, ease-out या ease-in-out — ताकि नियंत्रण बिंदु तय हो जाएँ।
2. ईज़िंग को फिर से आकार देने के लिए कर्व पूर्वावलोकन पर दो गोल हैंडल खींचें, या x1, y1, x2 और y2 फ़ील्ड में सटीक मान टाइप करें।
3. x1 और x2 को 0 और 1 के बीच रखें; गति में ओवरशूट या एंटीसिपेशन जोड़ने के लिए y1 या y2 को 1 से ऊपर या 0 से नीचे धकेलें।
4. यह आँकने के लिए कि ईज़िंग कैसे तेज़ और धीमी होती है, कर्व को बिंदीदार रैखिक आधार रेखा के सापेक्ष पढ़ें।
5. तैयार cubic-bezier() मान कॉपी करें और इसे अपने transition-timing-function या animation-timing-function में चिपकाएँ।

उदाहरण

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

अक्सर पूछे जाने वाले सवाल

cubic-bezier के चार अंकों का क्या अर्थ है?

ये दो नियंत्रण बिंदुओं के निर्देशांक हैं: पहले बिंदु के लिए x1, y1 और दूसरे के लिए x2, y2। कर्व हमेशा (0,0) पर शुरू होता है और (1,1) पर समाप्त होता है; नियंत्रण बिंदु इसे बीच में मोड़ते हैं, जो यह नियंत्रित करता है कि एनिमेटेड प्रॉपर्टी समय के साथ कैसे तेज़ और धीमी होती है।

मैं x1 या x2 को 1 से ऊपर क्यों नहीं सेट कर सकता?

CSS विनिर्देश के अनुसार दोनों नियंत्रण बिंदुओं के x (समय) निर्देशांक 0 और 1 के बीच रहने चाहिए, ताकि टाइमिंग फ़ंक्शन प्रगति से आउटपुट तक एक वैध मैपिंग बनी रहे। यह टूल x फ़ील्ड और ड्रैग हैंडल को स्वचालित रूप से उस सीमा तक सीमित करता है। हालाँकि y मान ओवरशूट या एंटीसिपेशन बनाने के लिए 1 से अधिक या 0 से कम हो सकते हैं।

मैं उछालभरी या लचीली ईज़िंग कैसे बनाऊँ?

किसी एक y मान को 1 से ऊपर (अंत में ओवरशूट के लिए) या 0 से नीचे (शुरुआत में एंटीसिपेशन के लिए) धकेलें। उदाहरण के लिए cubic-bezier(0.34, 1.56, 0.64, 1) स्थिर होने से पहले आगे बढ़ जाता है, जिससे बिना किसी JavaScript के स्प्रिंग जैसा अनुभव मिलता है।

मैं तैयार मान का उपयोग कहाँ करूँ?

इसे transition-timing-function या animation-timing-function के मान के रूप में चिपकाएँ — उदाहरण के लिए transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)। यह ease या ease-in-out जैसे कीवर्ड को आपके कस्टम कर्व से बदल देता है।

क्या मेरा डेटा किसी सर्वर पर भेजा जाता है?

नहीं। पूरा एडिटर आपके ब्राउज़र में JavaScript के साथ चलता है — नियंत्रण बिंदु और कर्व स्थानीय रूप से गणना होते हैं और कभी अपलोड नहीं होते, इसलिए यह निजी तौर पर और पेज लोड होने के बाद ऑफ़लाइन भी काम करता है।