📈

സൗജന്യ CSS Cubic-Bezier ഈസിംഗ് ജനറേറ്റർ

കൺട്രോൾ പോയിന്റുകൾ വലിച്ച് 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 സ്റ്റേറ്റും 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 പ്രവർത്തിപ്പിക്കുന്നു. ബ്രൗസറിന്റെ സ്വന്തം ആനിമേഷൻ എഞ്ചിൻ കർവ് വ്യാഖ്യാനിക്കുന്നു, അതിനാൽ നിങ്ങൾ കാണുന്നത് നിങ്ങളുടെ production CSS ഉൽപ്പാദിപ്പിക്കുന്നത് കൃത്യമായി അതാണ്.
4
നിങ്ങളുടെ ഫ്രെയിംവർക്കിന്റെ സിന്റാക്സിൽ സ്നിപ്പെറ്റ് പകർത്തുക
ടാബുകൾ അതേ നാല് നമ്പറുകൾ ഒരു CSS transition-timing-function ആയോ, ഒരു Tailwind ഇഷ്ടാനുസൃത-മൂല്യ ക്ലാസ് ആയോ, ഒരു Framer Motion ease അറേ ആയോ, ഒരു anime.js ഈസിംഗ് സ്ട്രിംഗ് ആയോ ഫോർമാറ്റ് ചെയ്യുന്നു. navigator.clipboard ഉപയോഗിച്ച് സ്നിപ്പെറ്റ് ക്ലിപ്ബോർഡിലേക്ക് എഴുതപ്പെടുന്നു. കർവ് URL ഹാഷിലും (#b=x1,y1,x2,y2) എൻകോഡ് ചെയ്യപ്പെടുന്നു, അതിനാൽ നിങ്ങൾക്ക് ഇത് ഷെയർ ചെയ്യാം അല്ലെങ്കിൽ ബുക്ക്മാർക്ക് ചെയ്യാം.