ഈസിങ് ഫങ്ക്ഷൻസ് ചീറ്റ് ഷീറ്റ്
ഈസിങ് ഫങ്ക്ഷൻസ് ഒരു ഘടകത്തിൻ്റെ (പാരാമീറ്ററിന്റെ) മാറ്റത്തിന്റെ നിരക്ക് വ്യക്തമാക്കുന്നു.
യഥാർത്ഥ ജീവിതത്തിലെ വസ്തുക്കൾ ഒരേ സമയം ചലനം തുടങ്ങി തീരുകയോ, മിക്കവാറും ഒരിക്കലും സ്ഥിരമായ വേഗതയിൽ ചലിക്കുകയോ ചെയ്യുന്നില്ല. നമ്മൾ ഒരു ഡ്രോയർ തുറക്കുമ്പോൾ, ആദ്യം അത് വേഗത്തിൽ നീക്കുന്നു, അത് പുറത്തുവരുമ്പോൾ വേഗത കുറയുന്നു. തറയിലേക്ക് എന്തെങ്കിലും ഇട്ടാൽ അത് ആദ്യം താഴേക്ക് ദ്രുതഗതിയിൽ നീങ്ങുകയും, തുടർന്ന് തറയിൽ തട്ടിയ ശേഷം തിരികെ പൊന്തുകയും ചെയ്യും.
ശരിയായ ഈസിങ് ഫങ്ക്ഷൻ തിരഞ്ഞെടുക്കാൻ ഈ പേജ് നിങ്ങളെ സഹായിക്കുന്നു.
ഓപ്പൺ സോഴ്‌സ്
നിങ്ങളുടെ ഭാഷയിലേക്ക് സൈറ്റ് വിവർത്തനം ചെയ്യാൻ സഹായിക്കുക
x
t
CSS
സി‌എസ്‌എസിൽ, ട്രാന്സിഷൻ, ആനിമേഷൻ എന്നീ ഘടകങ്ങൾ ഈസിങ് ഫങ്ക്ഷൻസ് നിര്‍ദ്ദേശിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു.
.block { transition: transform 0.6s ; }
cubic-bezier.com ഇൽ എഡിറ്റുചെയ്യുക.
സി‌എസ്‌എസിൽ, ഈ ഫങ്ക്ഷൻ
@keyframes ഉപയോഗിച് ചെയ്യാം.:വലുപ്പം
ലോഡിംഗ്...
സ്ഥാനം
ലോഡിംഗ്...
സുതാര്യത
ലോഡിംഗ്...
PostCSS
PostCSS- ൽ, ഈസിങ് ഫങ്ക്ഷൻസ് വിവരിക്കാൻ വളരെ എളുപ്പമാണ്. ആ സൈറ്റിൽ നിന്ന് ട്രാന്സിഷൻ വിവരങ്ങൾ എടുക്കുന്ന ഒരു പ്ലഗിൻ postcss-easings ഉണ്ട്.
.block { transition: transform 0.6s ; }
അത് മുകളിൽ വിവരിച്ചതിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു.
നിർഭാഗ്യവശാൽ, ഏതെങ്കിലും പോസ്റ്റ് സി‌എസ്‌എസ് പ്ലഗിൻ ഉപയോഗിച്ച് ഈസിങ് ഫങ്ക്ഷൻ സജ്ജമാക്കാൻ കഴിയില്ല. പക്ഷേ
@keyframes ഉപയോഗിച് ചെയ്യാം, മുകളിൽ കാണുക.ഗ്രീഡിയൻറ്റ്
postcss-easing-gradients ഉപയോഗിച്ച് ഒരു ഗ്രേഡിയന്റ് വരയ്ക്കാൻ കഴിയും.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
മാത്ത് ഫങ്ങ്ഷൻ
ടൈപ്പ്സ്ക്രിപ്റ്റിൽ എഴുതിയ ഈസിങ് ഫങ്ക്ഷൻ്റെ കോഡ് ആണ് ചുവടെ നിങ്ങൾ കാണുന്നത്. x, 0 നും(ആനിമേഷന്റെ ആരംഭം) 1 നും (ആനിമേഷന്റെ അവസാനം) ഇടക്കുള്ള അനിമേഷൻ്റെ പുരോഗതിയെ കുറിക്കുന്നു.
function (x: number): number {
}ടൈപ്പ്സ്ക്രിപ്റ്റിൽ എഴുതിയ ഈസിങ് ഫങ്ക്ഷൻ്റെ കോഡ് ആണ് ചുവടെ നിങ്ങൾ കാണുന്നത്. x, 0 നും(ആനിമേഷന്റെ ആരംഭം) 1 നും (ആനിമേഷന്റെ അവസാനം) ഇടക്കുള്ള അനിമേഷൻ്റെ പുരോഗതിയെ കുറിക്കുന്നു.
function (x: number): number {
}ഈസിങ് ൻ്റെ വെത്യാസം കാണുവാൻ ക്കിക്ക് ചെയ്യുക:
ഈ ഫങ്ക്ഷൻ:
ഈ ഫങ്ക്ഷൻ
നേർരേഖാ ഫങ്ക്ഷൻ:
നേർരേഖാ ഫങ്ക്ഷൻ