CSS ക്യൂബിക് ബെസിയർ ജനറേറ്റർ
ഒരു ഈസിംഗ് കർവ് രൂപപ്പെടുത്താൻ രണ്ട് ഹാൻഡിലുകൾ വലിക്കുക, ഒരു ഡോട്ട് സ്ഥിരതയുള്ള ഒന്നിനെതിരെ നീങ്ങുന്നത് കാണുക, കൂടാതെ cubic-bezier() മൂല്യം പകർപ്പ് ചെയ്യുക.
cubic-bezier(0.25, 0.1, 0.25, 1)കർവ് നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെയാണ് വരയ്ക്കുന്നത്. നിങ്ങൾ ഇവിടെ സജ്ജീകരിക്കുന്നതൊന്നും BroBroGo-ലേക്ക് അപ്ലോഡ് ചെയ്യില്ല.
പതിവ് ചോദ്യങ്ങൾ
രണ്ട് ഹാൻഡിലുകളും നാല് നമ്പറുകളും എന്താണ് അർത്ഥമാക്കുന്നത്?
കർവ് താഴെ-ഇടത് (തുടക്കം) മുതൽ മുകളിൽ-വലത് (അവസാനം) വരെ നീളുന്നു, സമയം ഇടത്തുനിന്ന് വലത്തോട്ടും പുരോഗതി മുകളിലോട്ടും പോകുന്നു. രണ്ട് ഹാൻഡിലുകളാണ് അതിനെ വളയ്ക്കുന്ന നിയന്ത്രണ പോയിന്റുകൾ — ഓരോന്നിനും ഒരു 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-ന് ആന്റിസിപ്പേറ്റ് ചെയ്യാനും ഓവർഷൂട്ട് ചെയ്യാനും കഴിയും — "ബാക്ക്" പ്രീസെറ്റുകൾ കൃത്യമായി അത് ചെയ്യാൻ ഒരു ഹാൻഡിൽ ബോക്സിന് വെളിയിലേക്ക് വലിക്കുന്നു — എന്നാൽ അതിന് ഒരു വഴിക്ക് നീങ്ങാനും പിന്നീട് സ്ഥിരപ്പെടാനും മാത്രമേ കഴിയൂ. ബൗൺസും ഇലാസ്റ്റിക്കും പലതവണ ദിശ മാറ്റുന്നു, അത് ഒരൊറ്റ cubic-bezier-ന് പ്രകടിപ്പിക്കാൻ കഴിയില്ല; അവയ്ക്ക് CSS കീഫ്രെയിമുകളോ നിരവധി സ്റ്റോപ്പുകളുള്ള linear() ഫംഗ്ഷനോ ആവശ്യമാണ്.