CSS Cubic Bezier జనరేటర్ యొక్క ప్రాథమిక సూత్రాలు
CSS ట్రాన్సిషన్స్ మరియు యానిమేషన్లలో చలన వేగాన్ని నియంత్రించడానికి టైమింగ్ ఫంక్షన్లు కీలకమైన పాత్ర పోషిస్తాయి. సాధారణంగా ఉపయోగించే ease, ease-in, ease-out, మరియు ease-in-out వంటి కీవర్డ్లు వాస్తవానికి ముందే నిర్వచించబడిన కొన్ని స్థిరమైన క్యూబిక్ బెజియర్ (Cubic Bezier) కర్వ్లు మాత్రమే. ఈ సాధనం ద్వారా మీరు మీ స్వంత కస్టమ్ ఈసింగ్ కర్వ్లను దృశ్యరూపంలో రూపొందించుకోవచ్చు.
క్యూబిక్ బెజియర్ కర్వ్ అనేది నాలుగు పాయింట్ల ద్వారా నిర్దేశించబడుతుంది. వీటిలో మొదటి పాయింట్ ప్రారంభ స్థానం (0, 0) మరియు నాల్గవ పాయింట్ ముగింపు స్థానం (1, 1) గా స్థిరంగా ఉంటాయి. మిగిలిన రెండు నియంత్రణ పాయింట్లు (Control Points) అయిన మొదటి నియంత్రణ పాయింట్ మరియు రెండవ నియంత్రణ పాయింట్ ల స్థానాలను మార్చడం ద్వారా కర్వ్ యొక్క ఆకారాన్ని మార్చవచ్చు. ఈ మార్పుల ఆధారంగా యానిమేషన్ యొక్క వేగం మరియు పురోగతి నిర్ణయించబడతాయి.
ఇన్పుట్ పారామితులు మరియు నియంత్రణలు
ఈ జనరేటర్ సాధనంలో ఈసింగ్ కర్వ్ను రూపొందించడానికి క్రింది నియంత్రణలు అందుబాటులో ఉన్నాయి:
- రెండు హ్యాండిల్లను లాగడం: కర్వ్ ఆకారాన్ని మార్చడానికి ఈ రెండు హ్యాండిల్లను నేరుగా మౌస్ లేదా టచ్ ద్వారా లాగవచ్చు.
- మొదటి నియంత్రణ పాయింట్ X: ఇది 0 మరియు 1 మధ్య ఉండే ఒక సంఖ్యా విలువ.
- మొదటి నియంత్రణ పాయింట్ Y: ఇది -0.70 మరియు 1.70 మధ్య ఉండే ఒక సంఖ్యా విలువ.
- రెండవ నియంత్రణ పాయింట్ X: ఇది 0 మరియు 1 మధ్య ఉండే ఒక సంఖ్యా విలువ.
- రెండవ నియంత్రణ పాయింట్ Y: ఇది -0.70 మరియు 1.70 మధ్య ఉండే ఒక సంఖ్యా విలువ.
- ప్రీసెట్లు: త్వరిత ఎంపిక కోసం "ease", "ease-in", "ease-out", "ease-in-out", "బ్యాక్ ఇన్", "బ్యాక్ అవుట్", లేదా "బ్యాక్ ఇన్-అవుట్" వంటి ప్రీసెట్లను ఎంచుకోవచ్చు.
అవుట్పుట్ మరియు ప్రివ్యూ
మీరు నియంత్రణలను సర్దుబాటు చేస్తున్నప్పుడు, సాధనం క్రింది అవుట్పుట్లను ప్రదర్శిస్తుంది:
- మీ కర్వ్: మీరు రూపొందించిన ఈసింగ్ కర్వ్ యొక్క దృశ్యరూపం ఇక్కడ కనిపిస్తుంది. కర్వ్ను సర్దుబాటు చేస్తున్నప్పుడు, ఒక చుక్క ఆ కర్వ్ వెంట కదులుతూ ఈసింగ్ ప్రభావాన్ని ప్రదర్శిస్తుంది. దీని పక్కనే మరొక చుక్క స్థిరమైన వేగంతో (లీనియర్ చలనం) కదులుతూ రెండింటి మధ్య వ్యత్యాసాన్ని చూపిస్తుంది.
- cubic-bezier(x1, y1, x2, y2): మీరు రూపొందించిన కర్వ్కు సరిపోయే ఖచ్చితమైన CSS
cubic-bezier()విలువ ఇక్కడ జనరేట్ అవుతుంది. - కాపీ చేయబడింది: ఈ విలువను విజయవంతంగా కాపీ చేసినప్పుడు ఈ స్థితి ప్రదర్శించబడుతుంది.
నియమాలు మరియు పరిమితులు
క్యూబిక్ బెజియర్ కర్వ్లను రూపొందించేటప్పుడు కొన్ని నిర్దిష్ట నియమాలను పాటించాల్సి ఉంటుంది:
- కర్వ్ ఎల్లప్పుడూ దిగువ-ఎడమ (ప్రారంభం) నుండి ఎగువ-కుడి (ముగింపు) వైపునకు సాగుతుంది.
- సమయం ఎడమ నుండి కుడికి పురోగమిస్తుంది, మరియు యానిమేషన్ యొక్క పురోగతి క్రింది నుండి పైకి జరుగుతుంది.
- నియంత్రణ పాయింట్ల యొక్క X విలువలు ఖచ్చితంగా 0 మరియు 1 మధ్య మాత్రమే ఉండాలి. ఒకవేళ మీరు ఇన్పుట్ ఫీల్డ్లో
9వంటి చెల్లని విలువను నమోదు చేసి, ఆ ఫీల్డ్ నుండి ఫోకస్ తీసివేస్తే, ఆ విలువ స్వయంచాలకంగా గరిష్ట పరిమితి అయిన1కి మారుతుంది. - Y విలువలు మాత్రం -0.70 నుండి 1.70 వరకు ఉండవచ్చు. ఈ విలువలు ఎగువ పరిమితి కంటే పైకి లేదా దిగువ పరిమితి కంటే క్రిందికి వెళ్ళడం ద్వారా యానిమేషన్లో ఓవర్షూట్ (overshoot) లేదా పుల్-బ్యాక్ (pull-back) ప్రభావాలను సృష్టించవచ్చు.
- ఏదైనా సంఖ్యా ఇన్పుట్ ఫీల్డ్ను పూర్తిగా ఖాళీ చేసి ఫోకస్ తీసివేస్తే, మునుపటి చెల్లుబాటు అయ్యే విలువ స్వయంచాలకంగా పునరుద్ధరించబడుతుంది.
- నియంత్రణ పాయింట్ హ్యాండిల్పై ఫోకస్ ఉన్నప్పుడు కీబోర్డ్లోని Left యారో కీని నొక్కితే, దాని విలువలో స్వల్ప మార్పు జరుగుతుంది (ఉదాహరణకు,
0.99కి మారుతుంది). - "బ్యాక్ అవుట్" ప్రీసెట్ను ఎంచుకున్నప్పుడు, అది
cubic-bezier(0.34, 1.56, 0.64, 1)విలువను సెట్ చేస్తుంది. - ఖాళీగా ఉన్న లేదా సంఖ్యలు కాని ఇన్పుట్లను నమోదు చేసినప్పుడు, సాధనం సరైన విలువ కోసం వేచి ఉంటుంది.
- ఒకే ఒక
cubic-bezierఫంక్షన్ ద్వారా యానిమేషన్ ప్రారంభంలో వెనక్కి లాగడం (anticipation) మరియు ముగింపులో పరిమితిని మించి వెళ్ళడం (overshoot) వంటి ప్రభావాలను సాధించవచ్చు. అయితే, ఇది ఒక దిశలో కదిలి ఆపై స్థిరపడటానికి మాత్రమే పరిమితం అవుతుంది. బౌన్స్ (bounce) లేదా ఎలాస్టిక్ (elastic) వంటి పదేపదే దిశలను మార్చే సంక్లిష్ట ప్రభావాలను ఒకే క్యూబిక్ బెజియర్ ఫంక్షన్తో సృష్టించడం సాధ్యం కాదు.
డేటా ప్రాసెసింగ్ మరియు గోప్యత
ఈ సాధనంలో కర్వ్ డ్రాయింగ్ మరియు గణనలన్నీ పూర్తిగా మీ వెబ్ బ్రౌజర్లోనే జరుగుతాయి. మీరు సెట్ చేసే నియంత్రణ పాయింట్లు లేదా విలువలు ఏవీ BroBroGo సర్వర్లకు అప్లోడ్ చేయబడవు.
తరచుగా అడిగే ప్రశ్నలు (FAQ)
రెండు హ్యాండిల్లు మరియు నాలుగు సంఖ్యల అర్థం ఏమిటి?
కర్వ్ దిగువ-ఎడమ (ప్రారంభం) నుండి ఎగువ-కుడి (ముగింపు) వరకు నడుస్తుంది, సమయం ఎడమ నుండి కుడికి మరియు పురోగతి పైకి వెళ్తుంది. రెండు హ్యాండిల్లు దీన్ని వంచే నియంత్రణ పాయింట్లు — ప్రతిదానికి ఒక X మరియు Y ఉంటాయి, కాబట్టి కలిసి అవి cubic-bezier(x1, y1, x2, y2) అవుతాయి. X ఎల్లప్పుడూ 0 మరియు 1 మధ్య ఉంటుంది, అయితే Y పైకి లేదా క్రిందికి వెళ్ళవచ్చు, దీనివల్ల చలనం స్థిరపడటానికి ముందు ఓవర్షూట్ లేదా వెనక్కి లాగడం జరుగుతుంది.
నా CSSలో ఈ విలువను ఎలా ఉపయోగించాలి?
cubic-bezier() ని కాపీ చేసి, టైమింగ్ ఫంక్షన్ ఉపయోగించే ఎక్కడైనా ఉంచండి — transition-timing-function, animation-timing-function, లేదా షార్ట్హ్యాండ్, ఉదా. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out మరియు ease-in-out కీవర్డ్లు కేవలం స్థిరమైన cubic-bezier కర్వ్లు మాత్రమే, కాబట్టి ఆ ప్రీసెట్లలో ఒకదాన్ని ఎంచుకుంటే ఆ కీవర్డ్ వెనుక ఉన్న ఖచ్చితమైన విలువ మీకు కనిపిస్తుంది.
ఇది బౌన్స్ లేదా ఎలాస్టిక్ ప్రభావాన్ని సృష్టించగలదా?
స్వయంగా చేయలేదు. ఒకే cubic-bezier యాంటిసిపేట్ మరియు ఓవర్షూట్ చేయగలదు — "back" ప్రీసెట్లు సరిగ్గా అదే చేయడానికి ఒక హ్యాండిల్ను బాక్స్ దాటి లాగుతాయి — కానీ ఇది ఒక వైపు మాత్రమే కదిలి ఆపై స్థిరపడగలదు. బౌన్స్ మరియు ఎలాస్టిక్ ప్రభావాలు దిశను చాలాసార్లు మారుస్తాయి, వీటిని ఒకే cubic-bezier వ్యక్తపరచలేదు; వాటికి CSS కీఫ్రేమ్లు లేదా అనేక స్టాప్లతో కూడిన linear() ఫంక్షన్ అవసరం.