म CSS को लागि अनुकूलन cubic-bezier इजिङ वक्र कसरी बनाउने?

ग्राफमा दुई नियन्त्रण बिन्दु ह्यान्डलहरू तान्नुहोस्, सटीक x1, y1, x2, y2 मानहरू टाइप गर्नुहोस्, वा एउटा प्रिसेट छान्नुहोस्। त्यसपछि आउटपुट ढाँचा अन्तर्गत CSS छान्नुहोस् र transition-timing-function को लागि cubic-bezier() मान प्राप्त गर्न प्रतिलिपि क्लिक गर्नुहोस्।

म cubic-bezier सँग बाउन्स वा ओभरसुट प्रभाव कसरी बनाउने?

बाकसको माथि वा तल ह्यान्डल तान्नुहोस् ताकि यसको Y मान ०-१ भन्दा बाहिर जान्छ। Y त्यो दायरा नाघ्न सक्छ, जबकि X ० र १ को बीचमा रहन्छ। ब्याक-आउट र एन्टिसिपेट प्रिसेटहरू तयार-निर्मित ओभरसुट सुरुवात बिन्दुहरू हुन्।

के म Tailwind, Framer Motion वा anime.js को लागि इजिङ पाउन सक्छु?

हो। आउटपुट ढाँचा ट्याबहरू CSS, Tailwind, Framer Motion र anime.js हुन्। ती सबैले समान चार सङ्ख्याहरू ढाँचा गर्छन्, त्यसैले एउटा ट्याब छान्नुहोस् र स्निपेट तपाईंको क्लिपबोर्डमा राख्न प्रतिलिपि क्लिक गर्नुहोस्।

म अवस्थित cubic-bezier मान सम्पादन गर्न कसरी लोड गर्ने?

आयात बाकसमा cubic-bezier(.17, .67, .83, .67) जस्तो मान टाँस्नुहोस् र लोड गर्नुहोस् क्लिक गर्नुहोस्। यदि चार सङ्ख्याहरू पढ्न सकिएन भने, तपाईंले त्रुटि सन्देश पाउनुहुन्छ। वक्र ह्यास पछि पृष्ठको URL मा पनि भण्डारण गरिन्छ, त्यसैले यसलाई साझा गर्न सकिन्छ।

पूर्वावलोकन मेरो वास्तविक ट्रान्जिसनहरू भन्दा किन ढिलो महसुस हुन्छ?

गति पूर्वावलोकन ले तपाईंले परिवर्तन गर्न सक्ने अवधि सेटिङ प्रयोग गर्छ, र पूर्वनिर्धारितहरू ढिलो हुन्छन् ताकि तपाईं वक्र अध्ययन गर्न सक्नुहोस्। अवधि छोटो बनाउनुहोस्, त्यसपछि तपाईंले पठाउने योजना बनाएको गतिमा गति हेर्न पुन: चलाउनुहोस् प्रयोग गर्नुहोस्।

के यो साँच्चै निःशुल्क हो?

हो। प्रत्येक उपकरण नि:शुल्क प्रयोग गर्न सकिन्छ, कुनै खाता र क्रेडिट कार्ड बिना। काम हाम्रो सर्भरको सट्टा तपाईंको उपकरणमा चल्छ, जसले गर्दा यो चलाउन नि:शुल्क रहन्छ।

के यो मोबाइलमा काम गर्छ?

हो। यो iOS र Android का हालका मोबाइल ब्राउजरमा चल्छ, केही इन्स्टल गर्नु पर्दैन।

📈

निःशुल्क CSS Cubic-Bezier इजिङ जेनेरेटर

नियन्त्रण बिन्दुहरू ड्र्याग गरेर CSS easing curves डिजाइन गर्नुहोस्, लाइभ गति प्रिभ्यू गर्नुहोस्, र cubic-bezier() मान कपी गर्नुहोस्। overshoot/bounce प्रिसेटहरू समावेश छन्।

तपाईंको ब्राउजरमा चल्छसाइन-अप छैन, पप-अप छैनलगइन आवश्यक छैनसधैँका लागि नि:शुल्क

लोड भएपछि अफलाइन काम गर्छ

वक्र आकार दिन तील र गुलाबी ह्यान्डलहरू तान्नुहोस्

नियन्त्रण बिन्दुहरू

x1y1x2y2

गति पूर्वावलोकन

अवधि१.६ सेकेन्ड

चौडाइ ट्रान्जिसन

CSS मान

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

पूर्वनिर्धारित

गुलाबी र तील ह्यान्डलहरू बाकसमाथि वा तल तान्न सकिन्छ (Y 0-1 बाहिर) — यसले back-out र anticipate जस्ता ओभरशूट / बाउन्स प्रभावहरू सिर्जना गर्छ। X 0-1 भित्रै रहन्छ (समय उल्टिन सक्दैन)।

सामान्य प्रयोगहरू

कस्टम CSS संक्रमण शीतलताहोभर प्रभावहरू, मेनुहरू र UI संक्रमणका लागि प्राकृतिक-देखिने शीतलता डिजाइन गर्नुहोस्।
बाउन्स र अतिशूट एनिमेशननियन्त्रण बिन्दुहरूलाई बक्सको बाहिर तान्दै प्लेफुल स्प्रिङ/बाउन्स गति सृष्टि गर्नुहोस्।
@keyframes एनिमेशनका लागि शीतलताCSS कीफ्रेम एनिमेशनका लागि सही एनिमेशन-टाइमिङ-फंक्शन चुन्नुहोस्।
JS एनिमेशन लाइब्रेरीका लागि शीतलता मानहरूGSAP, Framer Motion, anime.js र अलिकति cubic-bezier मानहरू पाउनुहोस्।
शीतलता कसरी काम गर्छ भनी बुझ्नुहोस्बेजियर वक्र र यसले उत्पादन गर्ने गति बीचको सम्बन्ध देख्नुहोस्।

यो कसरी काम गर्छ

एडिटर पूर्ण रूपमा ब्राउजरमा React स्टेट र SVG प्रयोग गरी बनेको छ — कुनै लाइब्रेरीले कर्भ गणित ह्यान्डल गर्दैन। दुई तान्न मिल्ने नियन्त्रण बिन्दुहरूले एउटा SVG क्युबिक Bezier पथ परिभाषित गर्छन्, र ब्राउजरको आफ्नै CSS एनिमेसन इन्जिनले परिणामी cubic-bezier() मान सीधै एउटा @keyframes नियममा घुसाएर मोसन पूर्वावलोकन चलाउँछ।

1
नियन्त्रण बिन्दुहरू तान्नुहोस् वा टाइप गर्नुहोस्
दुई ह्यान्डलहरू (टीलमा P1, गुलाबीमा P2) एउटा SVG क्यानभासमा बस्छन्। तान्नुले setPointerCapture सहित Pointer Events API प्रयोग गर्छ त्यसैले ह्यान्डलले SVG सीमाबाहिर पनि तपाईंको औंला वा कर्सर ट्र्याक गर्छ। तपाईं ह्यान्डललाई एरो कुञ्जीले पनि सार्न सक्नुहुन्छ वा x1/y1/x2/y2 नम्बर इनपुटमा ठ्याक्कै मान टाइप गर्न सक्नुहुन्छ।
2
SVG ले कर्भ वास्तविक समयमा कोर्छ
कर्भ एउटा एकल SVG <path> एलिमेन्ट हो जसको C (क्युबिक Bezier) कमान्ड हरेक स्टेट अद्यावधिकमा चार नियन्त्रण-बिन्दु निर्देशांकबाट पुनः गणना हुन्छ। कुनै क्यानभास छैन, कुनै बाह्य लाइब्रेरी छैन — ब्राउजरको SVG रेन्डररले पथ सीधै कोर्छ।
3
ब्राउजर CSS इन्जिनले इजिङ पूर्वावलोकन गर्छ
तीन प्रत्यक्ष एनिमेसन (एउटा चिप्लने बिन्दु, एउटा चौडाइ ट्रान्जिसन, र एउटा स्केल) ले इनलाइन घुसाइएको cubic-bezier() मानसहित CSS @keyframes चलाउँछन्। ब्राउजरको आफ्नै एनिमेसन इन्जिनले कर्भ व्याख्या गर्छ, त्यसैले तपाईंले देख्नुहुने कुरा ठ्याक्कै त्यही हो जुन तपाईंको उत्पादन CSS ले उत्पादन गर्नेछ।
4
आफ्नो फ्रेमवर्कको सिन्ट्याक्समा स्निपेट प्रतिलिपि गर्नुहोस्
ट्याबहरूले उही चार नम्बरलाई CSS transition-timing-function, Tailwind arbitrary-value क्लास, Framer Motion ease एरे, वा anime.js इजिङ स्ट्रिङको रूपमा फर्म्याट गर्छन्। स्निपेट navigator.clipboard सँग क्लिपबोर्डमा लेखिन्छ। कर्भ URL ह्यासमा पनि इन्कोड गरिन्छ (#b=x1,y1,x2,y2) त्यसैले तपाईं यसलाई सेयर वा बुकमार्क गर्न सक्नुहुन्छ।