📈

ఉచిత CSS క్యూబిక్-బెజియర్ ఈజింగ్ జనరేటర్

కంట్రోల్ పాయింట్‌లను లాగడం ద్వారా CSS ఈజింగ్ కర్వ్‌లను డిజైన్ చేయండి, మోషన్‌ను లైవ్‌లో ప్రివ్యూ చేయండి, మరియు cubic-bezier() విలువను కాపీ చేయండి. ఓవర్‌షూట్/బౌన్స్ ప్రీసెట్‌లతో సహా.

మీ బ్రౌజర్‌లో నడుస్తుందిసైన్-అప్ లేదు, పాప్-అప్‌లు లేవులాగిన్ అవసరం లేదుఎప్పటికీ ఉచితం

లోడ్ అయిన తర్వాత ఆఫ్‌లైన్‌లో పనిచేస్తుంది

వక్రరేఖను ఆకృతి చేయడానికి టీల్ & రోజ్ హ్యాండిల్స్‌ను లాగండి

కంట్రోల్ పాయింట్‌లు

x1y1x2y2

మోషన్ ప్రివ్యూ

వ్యవధి1.6s

వెడల్పు ట్రాన్సిషన్

CSS విలువ

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

ప్రీసెట్‌లు

రోజ్ మరియు టీల్ హ్యాండిల్స్ back-out మరియు anticipate వంటి 'ఓవర్‌షూట్' / బౌన్స్ ఎఫెక్ట్‌లను సృష్టించడానికి బాక్స్ పైన లేదా కింద లాగవచ్చు (Y 0-1 దాటి). X 0-1 లోపలే ఉంటుంది (సమయం వెనక్కి వెళ్ళదు).

ఇది ఎలా పనిచేస్తుంది

ఎడిటర్ React state మరియు SVG ఉపయోగించి పూర్తిగా బ్రౌజర్‌లో నిర్మించబడింది — కర్వ్ గణితాన్ని ఏ లైబ్రరీ నిర్వహించదు. రెండు లాగగలిగే కంట్రోల్ పాయింట్‌లు SVG cubic Bezier పాత్‌ను నిర్వచిస్తాయి, ఫలిత cubic-bezier() విలువను నేరుగా @keyframes రూల్‌లోకి చేర్చడం ద్వారా బ్రౌజర్ సొంత CSS యానిమేషన్ ఇంజిన్ మోషన్ ప్రివ్యూను నడుపుతుంది.

1
కంట్రోల్ పాయింట్‌లను లాగండి లేదా టైప్ చేయండి
రెండు హ్యాండిల్‌లు (టీల్‌లో P1, రోజ్‌లో P2) SVG కాన్వాస్‌పై ఉంటాయి. లాగడం setPointerCaptureతో Pointer Events API ఉపయోగిస్తుంది, కాబట్టి SVG సరిహద్దు వెలుపల కూడా హ్యాండిల్ మీ వేలు లేదా కర్సర్‌ను అనుసరిస్తుంది. బాణం కీలతో హ్యాండిల్‌లను కొద్దిగా జరపవచ్చు లేదా x1/y1/x2/y2 సంఖ్యా ఇన్‌పుట్‌లలో ఖచ్చితమైన విలువలు టైప్ చేయవచ్చు.
2
SVG కర్వ్‌ను రియల్ టైమ్‌లో గీస్తుంది
కర్వ్ ఒకే SVG <path> ఎలిమెంట్, దాని C (cubic Bezier) కమాండ్ ప్రతి state అప్‌డేట్‌పై నాలుగు కంట్రోల్-పాయింట్ కోఆర్డినేట్‌ల నుండి మళ్లీ లెక్కించబడుతుంది. canvas లేదు, బాహ్య లైబ్రరీ లేదు — బ్రౌజర్ SVG రెండరర్ పాత్‌ను నేరుగా గీస్తుంది.
3
బ్రౌజర్ CSS ఇంజిన్ ఈజింగ్‌ను ప్రివ్యూ చేస్తుంది
మూడు లైవ్ యానిమేషన్‌లు (జారే చుక్క, వెడల్పు transition, మరియు scale) cubic-bezier() విలువ ఇన్‌లైన్‌గా చేర్చిన CSS @keyframes నడుపుతాయి. బ్రౌజర్ సొంత యానిమేషన్ ఇంజిన్ కర్వ్‌ను అర్థం చేసుకుంటుంది, కాబట్టి మీరు చూసేది ఖచ్చితంగా మీ ప్రొడక్షన్ CSS ఉత్పత్తి చేసేదే.
4
మీ ఫ్రేమ్‌వర్క్ సింటాక్స్‌లో స్నిపెట్‌ను కాపీ చేయండి
ట్యాబ్‌లు అవే నాలుగు సంఖ్యలను CSS transition-timing-function, Tailwind arbitrary-value క్లాస్, Framer Motion ease array, లేదా anime.js easing స్ట్రింగ్‌గా ఫార్మాట్ చేస్తాయి. స్నిపెట్ navigator.clipboardతో క్లిప్‌బోర్డ్‌కు రాయబడుతుంది. కర్వ్ URL hash (#b=x1,y1,x2,y2)లో కూడా ఎన్‌కోడ్ చేయబడుతుంది, కాబట్టి దాన్ని షేర్ లేదా బుక్‌మార్క్ చేయవచ్చు.