CSS ക്യൂബിക് ബെസിയർ ജനറേറ്റർ
CSS ട്രാൻസിഷനുകളും ആനിമേഷനുകളും കൂടുതൽ സ്വാഭാവികവും ആകർഷകവുമാക്കാൻ സഹായിക്കുന്ന ഒരു വിഷ്വൽ ടൂളാണ് CSS ക്യൂബിക് ബെസിയർ ജനറേറ്റർ. ഈ ടൂൾ ഉപയോഗിച്ച് ഉപയോക്താക്കൾക്ക് രണ്ട് നിയന്ത്രണ പോയിന്റുകൾ (control points) ഡ്രാഗ് ചെയ്തുകൊണ്ട് ഒരു കസ്റ്റം ഈസിംഗ് കർവ് (easing curve) രൂപപ്പെടുത്താൻ സാധിക്കും. നിങ്ങൾ കർവ് ക്രമീകരിക്കുന്നതിനനുസരിച്ച്, ഒരു ഡോട്ട് ആ കർവിലൂടെ നീങ്ങുന്നത് കാണാം. ഇതിനൊപ്പം തന്നെ സ്ഥിരതയുള്ള വേഗതയിൽ (steady pace) നീങ്ങുന്ന മറ്റൊരു ഡോട്ടുമായി ഇതിന്റെ ചലനം താരതമ്യം ചെയ്ത് പ്രിവ്യൂ നോക്കാനും സാധിക്കും. കർവ് രൂപപ്പെടുത്തിയ ശേഷം അതിന് അനുയോജ്യമായ cubic-bezier() മൂല്യം നിങ്ങളുടെ CSS കോഡിലേക്ക് പകർത്തി ഉപയോഗിക്കാവുന്നതാണ്.
ഈ ടൂളിൽ നടക്കുന്ന എല്ലാ പ്രക്രിയകളും നിങ്ങളുടെ വെബ് ബ്രൗസറിൽ തന്നെയാണ് നിർവ്വഹിക്കുന്നത്. നിങ്ങൾ ഇവിടെ സജ്ജീകരിക്കുന്ന വിവരങ്ങളോ കർവുകളോ BroBroGo-ലേക്ക് അപ്ലോഡ് ചെയ്യപ്പെടുന്നില്ല.
ഇൻപുട്ടുകളും നിയന്ത്രണങ്ങളും
ഈ ജനറേറ്ററിൽ ഈസിംഗ് കർവിന്റെ ആകൃതി നിർണ്ണയിക്കാൻ താഴെ പറയുന്ന ഇൻപുട്ടുകൾ ക്രമീകരിക്കാവുന്നതാണ്:
- രണ്ട് ഹാൻഡിലുകൾ ഡ്രാഗ് ചെയ്യൽ: കർവിന്റെ ആകൃതി മാറ്റാൻ ഈ രണ്ട് ഹാൻഡിലുകൾ നേരിട്ട് വലിച്ചു നീക്കാവുന്നതാണ്.
- ആദ്യ നിയന്ത്രണ പോയിന്റ് X (First control point X): 0 നും 1 നും ഇടയിലുള്ള ഒരു സംഖ്യാ മൂല്യം.
- ആദ്യ നിയന്ത്രണ പോയിന്റ് Y (First control point Y): -0.70 നും 1.70 നും ഇടയിലുള്ള ഒരു സംഖ്യാ മൂല്യം.
- രണ്ടാമത്തെ നിയന്ത്രണ പോയിന്റ് X (Second control point X): 0 നും 1 നും ഇടയിലുള്ള ഒരു സംഖ്യാ മൂല്യം.
- രണ്ടാമത്തെ നിയന്ത്രണ പോയിന്റ് Y (Second control point Y): -0.70 നും 1.70 നും ഇടയിലുള്ള ഒരു സംഖ്യാ മൂല്യം.
- പ്രീസെറ്റ് തിരഞ്ഞെടുക്കൽ (Preset selection): "ease", "ease-in", "ease-out", "ease-in-out", "ബാക്ക് ഇൻ (Back In)", "ബാക്ക് ഔട്ട് (Back Out)", അല്ലെങ്കിൽ "ബാക്ക് ഇൻ-ഔട്ട് (Back In-Out)" തുടങ്ങിയ പ്രീസെറ്റുകൾ നേരിട്ട് തിരഞ്ഞെടുക്കാം.
ഔട്ട്പുട്ടുകൾ
നിങ്ങൾ നൽകുന്ന ഇൻപുട്ടുകൾക്ക് അനുസൃതമായി ടൂൾ താഴെ പറയുന്ന ഔട്ട്പുട്ടുകൾ തത്സമയം നൽകുന്നു:
- നിങ്ങളുടെ കർവ് (your curve): നിങ്ങൾ രൂപപ്പെടുത്തുന്ന ഈസിംഗ് കർവിന്റെ വിഷ്വൽ രൂപം.
- cubic-bezier(x1, y1, x2, y2): നിങ്ങൾ രൂപപ്പെടുത്തിയ കർവിന് അനുയോജ്യമായ CSS
cubic-bezier()ഫംഗ്ഷൻ മൂല്യം. - Copied:
cubic-bezier()മൂല്യം വിജയകരമായി കോപ്പി ചെയ്യുമ്പോൾ കാണിക്കുന്ന സ്റ്റാറ്റസ്.
പ്രവർത്തന നിയമങ്ങളും പ്രത്യേകതകളും
ക്യൂബിക് ബെസിയർ കർവുകൾ കൃത്യമായി രൂപപ്പെടുത്തുന്നതിന് ചില പ്രത്യേക നിയമങ്ങളും പരിധികളും ഈ ടൂൾ പിന്തുടരുന്നുണ്ട്:
- ദിശ: കർവ് എപ്പോഴും താഴെ-ഇടത് (തുടക്കം) ഭാഗത്ത് നിന്ന് തുടങ്ങി മുകളിൽ-വലത് (അവസാനം) ഭാഗം വരെയാണ് നീളുന്നത്.
- സമയവും പുരോഗതിയും: സമയം ഇടത്തുനിന്ന് വലത്തോട്ടും (X-axis), ആനിമേഷന്റെ പുരോഗതി താഴെ നിന്ന് മുകളിലോട്ടും (Y-axis) സഞ്ചരിക്കുന്നു.
- X മൂല്യങ്ങളുടെ പരിധി: നിയന്ത്രണ പോയിന്റുകളുടെ X മൂല്യങ്ങൾ എപ്പോഴും 0 നും 1 നും ഇടയിൽ ആയിരിക്കണം. ഇൻപുട്ട് ഫീൽഡിൽ
9പോലുള്ള വലിയ സംഖ്യകൾ നൽകിയ ശേഷം ഫോക്കസ് മാറ്റിയാൽ (lose focus) അത് സ്വയം1ആയി മാറുന്നു. - Y മൂല്യങ്ങളുടെ പരിധി: നിയന്ത്രണ പോയിന്റുകളുടെ Y മൂല്യങ്ങൾ -0.70 നും 1.70 നും ഇടയിലായിരിക്കണം. ആനിമേഷനിൽ ഓവർഷൂട്ട് (overshoot) അല്ലെങ്കിൽ പുൾ-ബാക്ക് (pull-back) ഇഫക്റ്റുകൾ നൽകാൻ Y മൂല്യങ്ങൾ മുകളിലേക്കോ താഴേക്കോ കൊണ്ടുപോകാൻ സാധിക്കും.
- കീബോർഡ് നിയന്ത്രണം: ഒരു നിയന്ത്രണ പോയിന്റ് ഹാൻഡിൽ ഫോക്കസ് ചെയ്തിരിക്കുമ്പോൾ കീബോർഡിലെ Left arrow കീ അമർത്തിയാൽ അതിന്റെ മൂല്യം കുറയ്ക്കാൻ സാധിക്കും (ഉദാഹരണത്തിന്,
0.99ലേക്ക്). - വാലിഡേഷൻ: ഇൻപുട്ട് ഫീൽഡിലെ മൂല്യം പൂർണ്ണമായി മായ്ച്ചുകളഞ്ഞ ശേഷം ഫോക്കസ് മാറ്റിയാൽ, മുൻപ് ഉണ്ടായിരുന്ന ശരിയായ മൂല്യം സ്വയം പുനഃസ്ഥാപിക്കപ്പെടും. ശൂന്യമായതോ സംഖ്യകളല്ലാത്തതോ ആയ ഇൻപുട്ടുകൾ നൽകിയാൽ ടൂൾ ശരിയായ ഒരു മൂല്യത്തിനായി കാത്തിരിക്കും.
- പ്രീസെറ്റ് മൂല്യം: ഉദാഹരണത്തിന്, "ബാക്ക് ഔട്ട് (Back Out)" പ്രീസെറ്റ് തിരഞ്ഞെടുക്കുമ്പോൾ അത്
cubic-bezier(0.34, 1.56, 0.64, 1)എന്ന മൂല്യം നൽകുന്നു. - കോപ്പി ചെയ്യൽ: മൂല്യം വിജയകരമായി കോപ്പി ചെയ്യുമ്പോൾ വിജയകരമായ സ്റ്റാറ്റസ് മാത്രമേ കാണിക്കൂ, പരാജയപ്പെടാനുള്ള സാധ്യതകളോ പ്രോംപ്റ്റുകളോ ഇതിലില്ല.
CSS ടൈമിംഗ് ഫംഗ്ഷനുകൾ മനസ്സിലാക്കാം
CSS-ൽ transition-timing-function അല്ലെങ്കിൽ animation-timing-function എന്നിവയിലാണ് cubic-bezier() ഉപയോഗിക്കുന്നത്. ഒരു ആനിമേഷന്റെ വേഗത സമയത്തിനനുസരിച്ച് എങ്ങനെ മാറണമെന്ന് ഇത് നിർണ്ണയിക്കുന്നു.
സാധാരണയായി ഉപയോഗിക്കുന്ന ease, ease-in, ease-out, ease-in-out എന്നീ കീവേഡുകൾ യഥാർത്ഥത്തിൽ മുൻകൂട്ടി നിശ്ചയിച്ച ചില ക്യൂബിക് ബെസിയർ കർവുകളാണ്. ഈ ടൂളിലൂടെ ആ കീവേഡുകൾക്ക് പിന്നിലെ കൃത്യമായ ഗണിതശാസ്ത്ര മൂല്യങ്ങൾ മനസ്സിലാക്കാൻ സാധിക്കും.
ഒരു സാധാരണ ആനിമേഷൻ അതിന്റെ തുടക്കം മുതൽ ഒരേ വേഗതയിൽ അവസാനിക്കുമ്പോൾ, ക്യൂബിക് ബെസിയർ ഉപയോഗിച്ച് നമുക്ക് തുടക്കത്തിൽ വേഗത കുറയ്ക്കാനും, മധ്യത്തിൽ വേഗത കൂട്ടാനും, ഒടുവിൽ വീണ്ടും വേഗത കുറയ്ക്കാനും സാധിക്കും. നിയന്ത്രണ പോയിന്റുകളായ (x1, y1, x2, y2) എന്നിവയാണ് ഈ വേഗതയുടെ വ്യതിയാനങ്ങൾ നിശ്ചയിക്കുന്നത്.
പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ (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-ന് ആന്റിസിപ്പേറ്റ് ചെയ്യാനും ഓവർഷൂട്ട് ചെയ്യാനും കഴിയും — "ബാക്ക്" പ്രീസെറ്റുകൾ കൃത്യമായി അത് ചെയ്യാൻ ഒരു ഹാൻഡിൽ ബോക്സിന് വെളിയിലേക്ക് വലിക്കുന്നു — എന്നാൽ അതിന് ഒരു വഴിക്ക് നീങ്ങാനും പിന്നീട് സ്ഥിരപ്പെടാനും മാത്രമേ കഴിയൂ. ബൗൺസും ഇലാസ്റ്റിക്കും പലതവണ ദിശ മാറ്റുന്നു, അത് ഒരൊറ്റ cubic-bezier-ന് പ്രകടിപ്പിക്കാൻ കഴിയില്ല; അവയ്ക്ക് CSS കീഫ്രെയിമുകളോ നിരവധി സ്റ്റോപ്പുകളുള്ള linear() ഫംഗ്ഷനോ ആവശ്യമാണ്.