Cubic Bezier कैलकुलेटर

एक Cubic-Bézier टाइमिंग फ़ंक्शन वास्तव में क्या है

CSS में, एक टाइमिंग फ़ंक्शन बीते समय (इनपुट, एनिमेशन की शुरुआत में 0 से अंत में 1 तक) को एक प्रगति मान (आउटपुट, पारंपरिक रूप से भी 0 से 1 लेकिन ओवरशूट करने की अनुमति) से मैप करता है। एनिमेटेड प्रॉपर्टी (opacity, translate, color, कुछ भी जो CSS ट्रांज़िशन कर सकता है) टाइमिंग फ़ंक्शन द्वारा वर्णित दर पर अपने प्रारंभिक और अंतिम मान के बीच इंटरपोलेट करती है। रैखिक टाइमिंग का अर्थ है कि प्रॉपर्टी स्थिर गति से चलती है; विभिन्न ease फ़ंक्शन तेज़ करते हैं, धीमा करते हैं, या दोनों। cubic-bezier(x1, y1, x2, y2) सामान्य रूप है: (0,0) से (1,1) तक एक Bézier वक्र जिसमें दो स्वतंत्र नियंत्रण बिंदु P1 और P2 हैं जिन्हें आप चार संख्याओं के साथ निर्दिष्ट करते हैं। ब्राउज़र एनिमेशन के हर फ़्रेम पर प्रॉपर्टी की प्रगति निर्धारित करने के लिए उस वक्र के साथ बिंदुओं का नमूना लेता है। चार संख्याएँ दो नियंत्रण बिंदुओं को परिभाषित करती हैं: P1 = (x1, y1) वक्र के प्रारंभ को आकार देता है (आमतौर पर दोनों अक्षों में 0–1), P2 = (x2, y2) अंत को आकार देता है। x मानों को [0, 1] में रहना चाहिए ताकि वक्र समय का एकल-मूल्यवान फ़ंक्शन हो; y मान [0, 1] से अधिक हो सकते हैं ताकि ओवरशूट और बाउंस प्रभाव उत्पन्न हो सकें (1.2 का y का अर्थ है कि प्रॉपर्टी क्षणिक रूप से अपने गंतव्य मान से अधिक हो जाती है इससे पहले कि वह स्थिर हो जाए)।

Bézier वक्र, गणितीय वंशावली

वक्रों का नाम Pierre Bézier के नाम पर रखा गया है, Renault में एक फ़्रांसीसी इंजीनियर जिसने 1960 के दशक में Renault 16 के चिकने बॉडी पैनल्स को डिज़ाइन करने के लिए उनका उपयोग किया, 1968 में Renault के UNISURF CAD सिस्टम के हिस्से के रूप में प्रकाशित। गणित को कुछ साल पहले स्वतंत्र रूप से (1959) Citroën में Paul de Casteljau द्वारा विकसित किया गया था, लेकिन Citroën ने de Casteljau के काम को व्यापारिक रहस्य के रूप में रखा और Bézier का प्रकाशित संस्करण कैनोनिकल संदर्भ बन गया। दोनों आदमी नियंत्रण बिंदुओं द्वारा परिभाषित बहुपद वक्रों के एक ही परिवार पर एकत्रित हुए, किसी दिए गए पैरामीटर पर Bézier वक्र का मूल्यांकन करने के लिए de Casteljau एल्गोरिथम का नाम अप्रकाशित अग्रदूत के नाम पर है। क्यूबिक Bézier वक्र वेक्टर ग्राफ़िक्स की सार्वभौमिक प्रिमिटिव बन गए क्योंकि वे मूल्यांकन करने में सस्ते हैं (कुछ गुणन और जोड़), तुच्छ रूप से स्केलेबल हैं (गणित एफ़ाइन ट्रांसफ़ॉर्म के तहत अपरिवर्तनीय है) और स्थानीय रूप से नियंत्रणीय हैं (नियंत्रण बिंदु को स्थानांतरित करने से केवल नज़दीकी वक्र खंड बदलते हैं)। Adobe PostScript (1984) और PDF, SVG स्पेसिफ़िकेशन (W3C अनुशंसा सितंबर 2001), और हर आधुनिक फ़ॉन्ट प्रारूप अक्षरों, आइकनों और चित्रणों के लिए बिल्डिंग ब्लॉक के रूप में क्यूबिक Bézier वक्रों का उपयोग करते हैं। CSS ने एनिमेशन टाइमिंग के लिए उसी प्रकार के वक्र को अपनाया, गति का वर्णन करने के नए उपयोग के मामले के लिए दृश्य-डिज़ाइन की दुनिया की मानक गणितीय प्रिमिटिव उधार ली।

CSS Animation स्पेक और टाइमिंग फ़ंक्शन

CSS एनिमेशन और ट्रांज़िशन दोनों ही टाइमिंग फ़ंक्शन के एक ही परिवार का उपयोग करते हैं। CSS Animations Level 1 स्पेक पहली बार मार्च 2009 में सार्वजनिक Working Draft के रूप में प्रकाशित की गई थी (पहले के WebKit-उपसर्ग कार्यान्वयन से निकाली गई) और W3C CSS Working Group द्वारा बनाए रखी जाती है। CSS Easing Functions Level 1 मॉड्यूल टाइमिंग-फ़ंक्शन सिंटैक्स को औपचारिक बनाता है और वर्तमान में Candidate Recommendation है। पाँच नामित कीवर्ड विशिष्ट cubic-beziers के लिए उपनाम हैं: ease = cubic-bezier(0.25, 0.1, 0.25, 1): ट्रांज़िशन के लिए CSS डिफ़ॉल्ट, तेज़ शुरुआत और धीमे अंत के साथ जो अधिकांश UI गति के लिए स्वाभाविक लगता है। ease-in = cubic-bezier(0.42, 0, 1, 1): धीमी शुरुआत, तेज़ अंत तक तेज़ करता है। ease-out = cubic-bezier(0, 0, 0.58, 1): तेज़ शुरुआत, धीमे अंत तक धीमा करता है; यह आम तौर पर व्यूपोर्ट में प्रवेश करने वाले UI तत्वों के लिए सबसे अधिक उपयोग किया जाने वाला easing है। ease-in-out = cubic-bezier(0.42, 0, 0.58, 1): सममित S-वक्र, दोनों सिरों पर धीमा। linear = cubic-bezier(0, 0, 1, 1): कोई easing नहीं, स्थिर दर; UI के लिए शायद ही कभी सही विकल्प लेकिन स्पिनर जैसे निरंतर लूपिंग एनिमेशन के लिए उपयुक्त। CSS दो गैर-Bézier टाइमिंग विकल्प भी प्रदान करता है: steps(n, jumpterm) चरणबद्ध (फ़्रेम-दर-फ़्रेम) एनिमेशन के लिए, और linear() (CSS Easing Level 2 में जोड़ा गया) किसी भी वक्र का अनुमान लगाने वाले टुकड़े-वार रैखिक फ़ंक्शन के लिए।

डिज़ाइन-सिस्टम Easing वक्र

बड़े डिज़ाइन सिस्टम राय-रखने वाले easing वक्र प्रकाशित करते हैं जो CSS डिफ़ॉल्ट को ओवरराइड करते हैं। Google Material Design «standard easing» को cubic-bezier(0.4, 0, 0.2, 1) के रूप में निर्दिष्ट करता है, तेज़ त्वरण, धीमी मंदी, Android और वेब Material लाइब्रेरी में अधिकांश UI ट्रांज़िशन के लिए उपयोग किया जाता है; «decelerated easing» cubic-bezier(0, 0, 0.2, 1) स्क्रीन में प्रवेश करने वाले तत्वों के लिए; «accelerated easing» cubic-bezier(0.4, 0, 1, 1) छोड़ने वाले तत्वों के लिए। Apple के Human Interface Guidelines स्थिर Bézier वक्रों के बजाय स्प्रिंग-भौतिकी एनिमेशन पर ज़ोर देते हैं, लेकिन iOS का UIKit लगभग (0.25, 0.1, 0.25, 1) का डिफ़ॉल्ट cubic-bezier भेजता है (CSS ease के समान)। IBM का Carbon Design System अपनी उत्पादक-गति श्रेणी के लिए cubic-bezier(0.5, 0, 0.1, 1) का उपयोग करता है। Microsoft Fluent, Atlassian, Salesforce Lightning सभी अपने स्वयं के वक्र निर्दिष्ट करते हैं। Robert Penner के easing समीकरण (Flash गति पर उनकी पुस्तक के हिस्से के रूप में 2001 में प्रकाशित) ने नामित-वक्र शब्दावली को परिभाषित किया जिसका लगभग हर एनिमेशन लाइब्रेरी उपयोग करती है, easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic। अधिकांश को cubic-beziers के रूप में व्यक्त किया जा सकता है; elastic और bounce वेरिएंट नहीं किए जा सकते (उन्हें बहु-भाग टुकड़े-वार फ़ंक्शन की आवश्यकता होती है क्योंकि वे दोलन करते हैं)।

काम के लिए सही वक्र चुनना

• व्यूपोर्ट में प्रवेश करने वाले तत्व (मोडल दिखाई देना, कार्ड स्लाइड इन होना, ड्रॉपडाउन खुलना), ease-out या Material के cubic-bezier(0, 0, 0.2, 1) जैसी मंद वक्र का उपयोग करें। तत्व आते समय धीमा होता है, जो ऐसा महसूस होता है जैसे यह «अपनी जगह में बस रहा है»।
• व्यूपोर्ट छोड़ने वाले तत्व (मोडल बंद होना, कार्ड स्लाइड आउट होना), ease-in या त्वरित वक्र का उपयोग करें। तत्व जाते समय तेज़ होता है, ऐसा महसूस होता है जैसे यह इरादे से जा रहा है।
• निरंतर एनिमेशन (लोडर, प्रगति बार, परिवेशी गति), linear का उपयोग करें। Easing निरंतर गति को झटकेदार बनाता है; स्थिर वेग स्थिर के रूप में पढ़ा जाता है।
• हॉवर अवस्थाएँ और बटन प्रेस: हॉवर-इन के लिए ease-out और हॉवर-आउट के लिए ease-in या कोई easing नहीं के साथ छोटी अवधि (100-150ms)। बटन फ़ीडबैक तीव्र महसूस होना चाहिए।
• व्यक्तित्व चाहने वाली ज़ोरदार गति (टोस्ट सूचनाएँ, सफलता संकेतक), cubic-bezier(0.34, 1.56, 0.64, 1) जैसी थोड़ी ओवरशूटिंग वक्र का उपयोग करें एक सूक्ष्म बाउंस के लिए जो संकेत देता है «कुछ दिलचस्प अभी हुआ» बिना कष्टप्रद हुए।
• लंबी एनिमेशन (500ms से अधिक): ease-in-out या समान S-वक्र का उपयोग करें। एकतरफ़ा easing के साथ लंबी एनिमेशन ऐसी लगती हैं जैसे उनकी शुरुआत या अंत गलत आकार का है।

प्रदर्शन संबंधी विचार

कस्टम cubic-bezier टाइमिंग फ़ंक्शन रनटाइम पर अनिवार्य रूप से कुछ नहीं ख़र्च करते, वक्र एक स्थिरांक है, ब्राउज़र लुकअप तालिका को एक बार पूर्व-गणना करते हैं, और प्रति-फ़्रेम मूल्यांकन कुछ फ़्लोटिंग-पॉइंट ऑपरेशन हैं। प्रदर्शन प्रश्न यह है कि आप कौन सी प्रॉपर्टी एनिमेट करते हैं, टाइमिंग वक्र नहीं। transform (translate, scale, rotate) और opacity को एनिमेट करना GPU कंपोज़िटिंग का उपयोग करता है और मध्य-स्तरीय हार्डवेयर पर भी 60 या 120fps पर सुचारू रहता है। top, left, width, height, margin, padding, या किसी भी प्रॉपर्टी को एनिमेट करना जो लेआउट ट्रिगर करता है, सबसे सरल पृष्ठों को छोड़कर हर चीज़ पर अटकेगा क्योंकि हर फ़्रेम एक पूर्ण reflow ट्रिगर करता है। «कंपोज़िटर-फ़्रेंडली» प्रॉपर्टी सूची (transform + opacity, साथ ही filter और कुछ अन्य) सामान्य सुरक्षित सेट है; बाकी सब कुछ को वास्तविक पृष्ठ लोड के तहत परीक्षण करने की आवश्यकता है। CSS will-change प्रॉपर्टी ब्राउज़र को संकेत देती है कि एक प्रॉपर्टी एनिमेट होगी, इसे तत्व को अपनी कंपोज़िटिंग परत में पूर्व-प्रचारित करने देती है; मितव्ययिता से उपयोग करें क्योंकि हर will-change GPU मेमोरी आरक्षित करता है।

पहुँच: prefers-reduced-motion

उपयोगकर्ताओं की एक सार्थक अल्पसंख्यक (वेस्टिबुलर विकारों, ध्यान-घाटे की स्थितियों, या साधारण व्यक्तिगत वरीयता वाले) गति डिज़ाइन को विचलित करने वाला या सक्रिय रूप से असुविधाजनक पाते हैं। CSS Media Queries Level 5 स्पेक prefers-reduced-motion मीडिया फ़ीचर को परिभाषित करता है, macOS (System Settings → Accessibility → Display → Reduce Motion), Windows 10+ (Settings → Ease of Access → Display), iOS, Android और अधिकांश प्रमुख Linux डेस्कटॉप पर सिस्टम सेटिंग के रूप में उजागर किया गया। 2019 के आसपास से सम्मेलन: किसी भी गैर-आवश्यक एनिमेशन को @media (prefers-reduced-motion: no-preference) { ... } में लपेटें या @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; } से उल्टा करें। इसके लिए cubic-bezier वक्र विकल्प कोई मायने नहीं रखता, स्पेक डेवलपर से उपयोगकर्ता की वरीयता व्यक्त करने पर एनिमेशन को अक्षम करने या काफ़ी छोटा करने के लिए कहती है। आधुनिक डिज़ाइन-सिस्टम दस्तावेज़ीकरण (Material, Atlassian, GOV.UK) सभी कम-गति मार्गदर्शन शामिल करते हैं।

स्प्रिंग भौतिकी, नया विकल्प

Cubic-bezier टाइमिंग फ़ंक्शन गति को हाथ से ट्यून किए गए वक्र के साथ निश्चित-अवधि प्रक्षेप के रूप में वर्णित करते हैं। स्प्रिंग भौतिकी गति को एक अवमंदित हार्मोनिक ऑसिलेटर के प्राकृतिक स्थिरीकरण के रूप में वर्णित करती है: आप द्रव्यमान, कठोरता और अवमंदन निर्दिष्ट करते हैं, और एनिमेशन तब तक चलती है जब तक स्प्रिंग आराम पर न हो। स्प्रिंग रुकावटी UI जेस्चर के लिए अधिक स्वाभाविक महसूस होते हैं क्योंकि उनके पास गति है जो रुकावटों के माध्यम से जारी रहती है, मध्य-उड़ान में फ़्लिक जेस्चर जारी करते समय, स्प्रिंग एक नए वक्र पर अपने गंतव्य तक जारी रहती है बजाय स्नैप होने के। Apple का iOS अधिकांश नेटिव इंटरैक्शन के लिए स्प्रिंग भौतिकी का उपयोग करता है (किनारे पर scroll view का बाउंस, swipe का रबर-बैंड प्रभाव)। React Spring (Paul Henschel), Framer Motion और CSS linear() easing फ़ंक्शन (जब इसे एक नमूना स्प्रिंग वक्र दिया जाता है) वेब पर स्प्रिंग शब्दार्थ लाते हैं। Cubic-beziers निश्चित-अवधि UI ट्रांज़िशन के लिए सही उपकरण बने हुए हैं; स्प्रिंग जेस्चर-संचालित, रुकावटी गति के लिए सही उपकरण हैं। यह संपादक cubic-beziers का उत्पादन करता है, 2026 में 90% UI एनिमेशन कार्य के लिए सही आकार।

जब आप इस उपकरण के लिए पहुँचेंगे

• फीलिंग द्वारा एक नया एनिमेशन डिज़ाइन करना। नियंत्रण बिंदुओं को तब तक खींचें जब तक प्रीव्यू बॉल जैसे आप चाहते हैं वैसे चले, फिर CSS कॉपी करें। चार संख्याएँ टाइप करने और पृष्ठ को रिफ़्रेश करने से तेज़।
• एक अन्य उत्पाद से एनिमेशन का मिलान करना। कहीं और देखी गई एनिमेशन के टाइमिंग को रिवर्स-इंजीनियर करें यह तब तक समायोजित करके जब तक प्रीव्यू आपकी स्मृति से मेल न खाए।
• एक ब्रांड गति लाइब्रेरी का निर्माण। «तेज़», «सुचारू», «ज़ोरदार», «बाउंस» के लिए तीन या चार विशिष्ट cubic-beziers पर सहमत हों और उन्हें उत्पाद में लगातार लागू करें।
• एक डिज़ाइनर के एनिमेशन स्पेक की समीक्षा। Figma गति स्पेक से cubic-bezier मानों को पेस्ट करें, देखें कि क्या वक्र वह गति उत्पन्न करता है जो डिज़ाइनर ने वर्णित की।
• इंजीनियर-डिज़ाइनर हैंडऑफ़। एक डिज़ाइनर इस उपकरण में सही वक्र निकालता है, CSS कॉपी करता है, और इसे Slack संदेश में पेस्ट करता है, एक अस्पष्ट «इसे और बाउंसी बनाएँ» की तुलना में बहुत अधिक सिग्नल।

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

मान क्या दर्शाते हैं?

वे (0,0) से (1,1) तक एक क्यूबिक Bézier वक्र के दो नियंत्रण बिंदुओं को परिभाषित करते हैं। P1 = (x1, y1) वक्र के प्रारंभ को आकार देता है; P2 = (x2, y2) अंत को आकार देता है। x-अक्ष समय है (इसे [0, 1] में होना चाहिए); y-अक्ष एनिमेशन प्रगति है (ओवरशूट प्रभावों के लिए [0, 1] से अधिक हो सकता है)। y > 1 का अर्थ है कि प्रॉपर्टी क्षणिक रूप से अपने गंतव्य मान से अधिक हो जाती है इससे पहले कि वह स्थिर हो जाए; y < 0 का अर्थ है कि प्रॉपर्टी लक्ष्य के पास पहुँचने से पहले संक्षेप में गलत दिशा में चलती है।

डिफ़ॉल्ट CSS easing क्या है?

CSS ट्रांज़िशन के लिए (transition: opacity 300ms;) डिफ़ॉल्ट ease है, cubic-bezier(0.25, 0.1, 0.25, 1) के बराबर, तेज़ शुरुआत, धीमा अंत। CSS एनिमेशन के लिए (animation: foo 1s;) डिफ़ॉल्ट भी ease है। transition-timing-function या animation-timing-function से ओवरराइड करें। अधिकांश UI गति के लिए ease-out वेरिएंट या Material-स्टाइल मंद वक्र डिफ़ॉल्ट की तुलना में बेहतर-महसूस होने वाले परिणाम उत्पन्न करता है।

मैं बाउंसी या ओवरशूट प्रभाव कैसे बनाऊँ?

y2 को 1 से ऊपर पुश करें (विशिष्ट मान 1.2–1.6) ताकि वक्र संक्षेप में स्थिर होने से पहले गंतव्य से अधिक हो जाए। एक सामान्य सूक्ष्म बाउंस cubic-bezier(0.34, 1.56, 0.64, 1) है। उच्चारित बाउंस के लिए आप एकल cubic-bezier के बजाय स्प्रिंग-भौतिकी या मल्टी-keyframe एनिमेशन चाहेंगे, bezier वक्रों में केवल एक शिखर हो सकता है, इसलिए सच्ची उछलना (कई दोलन) मध्यवर्ती चरणों पर keyframes की आवश्यकता है।

क्या कस्टम वक्र नामित कीवर्ड की तुलना में धीमे हैं?

नहीं, नामित कीवर्ड विशिष्ट cubic-beziers के लिए उपनाम हैं, उसी कोड पथ द्वारा मूल्यांकित। प्रदर्शन इस पर निर्भर करता है कि आप कौन सी प्रॉपर्टी एनिमेट करते हैं (transform/opacity = GPU-कंपोज़िट और तेज़; top/left/width जैसी लेआउट को प्रभावित करने वाली प्रॉपर्टी = reflow के कारण धीमी), टाइमिंग वक्र पर नहीं। cubic-bezier मूल्यांकन लागत नगण्य है।

क्या यह उपकरण ऑफ़लाइन काम करता है?

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

संबंधित टूल