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

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

CSS क्यूबिक-बेज़ियर जनरेटर CSS ट्रांज़िशन और एनिमेशन द्वारा उपयोग की जाने वाली ईज़िंग फ़ंक्शन का एक मुफ़्त विज़ुअल एडिटर है, जो फ्रंट-एंड डेवलपर्स और मोशन डिज़ाइनरों के लिए बनाया गया है। cubic-bezier मोड में आप दो नियंत्रण बिंदु खींचते (या टाइप करते) हैं ताकि कर्व आकार ले सके: x मान वैध 0–1 सीमा में रहते हैं, जबकि y मान ओवरशूट और एंटीसिपेशन बनाने के लिए 1 से ऊपर या 0 से नीचे जा सकते हैं। steps() मोड समायोज्य चरण संख्या और एक जंप टर्म के साथ चरणबद्ध टाइमिंग को कवर करता है — jump-start, jump-end, jump-none या jump-both, जहाँ step-start और step-end steps(1, …) हैं। लाइव एनिमेशन पूर्वावलोकन आपकी निर्धारित अवधि में एक चलते और स्केल होते बॉक्स पर वर्तमान ईज़िंग चलाता है, आप तुलना के लिए किसी भी प्रीसेट को घोस्ट कर्व के रूप में ऊपर रख सकते हैं, और किसी मौजूदा cubic-bezier() या steps() स्ट्रिंग को आयात कर सकते हैं। सटीक घोषणा को अपने transition-timing-function या animation-timing-function के लिए कॉपी करें।

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

1. ऊपर cubic-bezier() या steps() मोड चुनें, या सेटिंग्स खोलकर ease, ease-in-out या linear जैसे प्रीसेट से शुरुआत करें।
2. cubic-bezier मोड में, ग्राफ़ पर दो हैंडल खींचें या x1, y1, x2 और y2 के सटीक मान टाइप करें; ओवरशूट के लिए y को 1 से ऊपर धकेलें।
3. steps() मोड में, चरणों की संख्या तय करें और सीढ़ी बनाने के लिए एक जंप टर्म (jump-start, jump-end, jump-none या jump-both) चुनें।
4. चलते और स्केल होते बॉक्स पर लाइव एनिमेशन चलाने के लिए चलाएँ दबाएँ, और टाइमिंग महसूस करने के लिए अवधि को सेकंड में समायोजित करें।
5. सेटिंग्स में तुलना कर्व चुनें ताकि किसी प्रीसेट को उसी ग्राफ़ पर घोस्ट के रूप में ऊपर रखा जाए, या आयात में कोई मान चिपकाकर लागू करें।
6. बनाए गए cubic-bezier() या steps() मान को अपने 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.34, y1 1.56, x2 0.64, y2 1

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

steps मोड, N 4, jump-end

steps(4, jump-end)

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

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

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

steps() मोड किसके लिए है?

steps() सहजता से इंटरपोलेट करने के बजाय एक निश्चित संख्या के मानों के बीच कूदता है — स्प्राइट एनिमेशन, टिक करते काउंटर या फ़्रेम-दर-फ़्रेम प्रभावों के लिए उपयोगी। चरणों की संख्या और एक जंप टर्म सेट करें: jump-start, jump-end, jump-none या jump-both। step-start, steps(1, jump-start) के बराबर है और step-end, steps(1, jump-end) के बराबर।

लाइव एनिमेशन पूर्वावलोकन कैसे काम करता है?

चलाएँ दबाएँ और बॉक्स आपकी वर्तमान ईज़िंग का उपयोग करके ट्रैक पर चलता और स्केल होता है, आगे-पीछे दोहराते हुए। इसे धीमा या तेज़ करने के लिए अवधि को सेकंड में बदलें; यह शुद्ध CSS एनिमेशन का उपयोग करता है और आपके cubic-bezier() या steps() मान को टाइमिंग फ़ंक्शन के रूप में लेता है।

क्या मैं कोई मौजूदा ईज़िंग मान आयात कर सकता हूँ?

हाँ। किसी cubic-bezier(...) या steps(...) मान — या ease-in-out, step-start या step-end जैसे कीवर्ड — को आयात फ़ील्ड में चिपकाएँ और लागू करें; एडिटर इसे वापस नियंत्रण बिंदुओं या चरण सेटिंग्स में पार्स करता है।

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

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