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

यह टूल क्या करता है

किसी CSS ट्रांज़िशन या एनिमेशन की ईज़िंग (0,0) से (1,1) तक जाने वाला एक क्यूबिक बेज़ियर कर्व होती है: बीच के दो पॉइंट तय करते हैं कि गति धीरे शुरू होकर तेज़ खत्म होगी, ओवरशूट करेगी, या कुछ और ही करेगी। नाम वाले कीवर्ड (ease, ease-in-out वगैरह) इसी स्पेस के सिर्फ़ पाँच तय बिंदु हैं। यह टूल आपके सेट किए दो कंट्रोल पॉइंट से कर्व बनाता है, उसी टाइमिंग फ़ंक्शन के साथ चलता हुआ एक बॉक्स दिखाता है, और बताता है कि आधी दूरी पर ईज़ किया गया प्रगति कितनी है — वह आँकड़ा जिसे सिर्फ़ कर्व देखकर समझना सबसे मुश्किल होता है।

इस्तेमाल कैसे करें

1. किसी प्रीसेट से शुरू करें या दोनों कंट्रोल पॉइंट सीधे सेट करें।
2. कर्व और चलते हुए पूर्वावलोकन को अपडेट होते देखें।
3. cubic-bezier() डिक्लेरेशन अपने ट्रांज़िशन या एनिमेशन में कॉपी करें।

निजता

यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।

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

क्या कुछ सर्वर पर गणना होती है?

नहीं। कर्व, चलता हुआ पूर्वावलोकन और प्रगति का आँकड़ा — सब पेज में चल रहे JavaScript से गणना होते हैं।

दोनों X मान 0 और 1 के बीच ही सीमित क्यों हैं?

X बीता हुआ समय दर्शाता है, जिसे CSS स्पेसिफ़िकेशन के अनुसार 0 से 1 तक आगे ही बढ़ना ज़रूरी है ताकि कर्व समय का मान्य फ़ंक्शन बना रहे। Y ईज़ किया गया प्रगति है और इसे 0 से नीचे या 1 से ऊपर जाने की छूट है, जिससे ओवरशूट या बाउंस बनता है।

आधी दूरी वाले आँकड़े का क्या मतलब है?

यह ईज़ किया गया प्रगति है — सीधी-रेखा वाला प्रगति नहीं — ठीक उस पल पर जब एनिमेशन की आधी अवधि बीत चुकी होती है। वहाँ 50% से ऊपर का मान बताता है कि गति मध्यबिंदु तक पहले ही रेखीय गति से आगे निकल चुकी है।