CSS ईज़िंग जनरेटर
दोनों हैंडल को खींचकर एक कस्टम ईज़िंग कर्व बनाएं, बॉल को इसे लाइव प्रीव्यू करते देखें, और
cubic-bezier() वैल्यू कॉपी करें.
प्रीसेट
यह कैसे काम करता है
यह ग्राफ़ एक सेकंड में प्रोग्रेस (वर्टिकल) बनाम समय (होराइज़ॉन्टल) को प्लॉट करता है. दोनों हैंडल
सीधे खींचे जा सकते हैं, और नीचे दिए नंबर फ़ील्ड्स दोनों तरीक़ों से इनके साथ सिंक रहते हैं; माउस
या उंगली से खींचें, या किसी ख़ास कर्व से मैच करना हो तो सटीक वैल्यू टाइप करें. यही चारों नंबर
आपके देख रहे SVG पाथ को और प्रीव्यू बॉल पर लगे असली transition-timing-function
दोनों को फ़ीड करते हैं, यानी आप जो देख रहे हैं वह असली ईज़िंग है, कोई अनुमान नहीं.
सब कुछ आपके ब्राउज़र के अपने CSS ट्रांज़िशन इंजन पर चलता है. कोई एनिमेशन स्टेट या कर्व डेटा कहीं नहीं भेजा जाता.
सामान्य प्रश्न
दोनों हैंडल क्या कंट्रोल करते हैं?
एक cubic-bezier ईज़िंग कर्व दो कंट्रोल पॉइंट्स से डिफ़ाइन होता है, हर एक का एक x (समय, 0 से 1) और y (प्रोग्रेस, बिना सीमा के लेकिन आमतौर पर 0 से 1) कोऑर्डिनेट होता है. किसी हैंडल को खींचना उस पॉइंट को सीधे सेट करता है; दिखने वाले चारों नंबर बिल्कुल वही हैं जो cubic-bezier() के अंदर जाते हैं.
क्या कर्व 100% से आगे ओवरशूट कर सकता है?
हां, अगर किसी कंट्रोल पॉइंट की y वैल्यू 1 से ऊपर या 0 से नीचे जाती है, तो एनिमेशन सेटल होने से पहले थोड़ी देर के लिए अपनी एंड वैल्यू से आगे निकल जाता है या स्टार्ट वैल्यू से नीचे चला जाता है, यही "बाउंस" या "एंटीसिपेशन" इफ़ेक्ट है. इसे आज़माने के लिए किसी हैंडल को ग्राफ़ के ऊपर या नीचे खींचें.
क्या यह कहीं भेजा जाता है?
नहीं, कर्व और प्रीव्यू एनिमेशन पूरी तरह आपके ब्राउज़र के CSS इंजन में चलते हैं. कुछ भी अपलोड नहीं होता.