मोफत CSS Cubic-Bezier इझिंग जनरेटर

हे कसे कार्य करते

हा एडिटर React state आणि SVG वापरून पूर्णपणे ब्राउझरमध्ये बनवला आहे — curve गणित कोणतीही लायब्ररी हाताळत नाही. दोन ड्रॅग करण्यायोग्य नियंत्रण बिंदू SVG cubic Bezier मार्ग परिभाषित करतात, आणि ब्राउझरचे स्वतःचे CSS अॅनिमेशन इंजिन परिणामी cubic-bezier() मूल्य थेट @keyframes नियमात injects करून motion प्रिव्ह्यू चालवते.

1. 1
   नियंत्रण बिंदू ड्रॅग करा किंवा टाइप करा

   दोन handles (P1 teal, P2 rose) SVG canvas वर आहेत. ड्रॅगिंग setPointerCapture सह Pointer Events API वापरते त्यामुळे handle तुमच्या बोट किंवा cursor ला SVG सीमेबाहेरही ट्रॅक करते. तुम्ही arrow keys ने handles nudge करू शकता किंवा x1/y1/x2/y2 संख्या इनपुट्समध्ये नेमकी मूल्ये टाइप करू शकता.
2. 2
   SVG curve रिअल टाइममध्ये काढते

   curve हा एकल SVG <path> घटक आहे ज्याची C (cubic Bezier) कमांड प्रत्येक state अपडेटवर चार नियंत्रण-बिंदू निर्देशांकांवरून पुन्हा मोजली जाते. canvas, बाह्य लायब्ररी नाही — ब्राउझरचा SVG renderer मार्ग थेट काढतो.
3. 3
   ब्राउझर CSS इंजिन easing चा प्रिव्ह्यू करतो

   तीन लाइव्ह अॅनिमेशन (सरकणारा ठिपका, रुंदी transition, आणि scale) inline injected cubic-bezier() मूल्यासह CSS @keyframes चालवतात. ब्राउझरचे स्वतःचे अॅनिमेशन इंजिन curve चा अर्थ लावते, त्यामुळे तुम्ही जे पाहता ते नेमके तुमचा production CSS काय तयार करेल तेच असते.
4. 4
   तुमच्या framework च्या सिंटॅक्समध्ये स्निपेट कॉपी करा

   Tabs तेच चार आकडे CSS transition-timing-function, Tailwind arbitrary-value class, Framer Motion ease array, किंवा anime.js easing स्ट्रिंग म्हणून फॉरमॅट करतात. स्निपेट navigator.clipboard सह clipboard वर लिहिला जातो. curve URL hash मध्ये (#b=x1,y1,x2,y2) एन्कोड केलेला असतो त्यामुळे तुम्ही तो शेअर किंवा बुकमार्क करू शकता.

संबंधित साधने