ഇത് ചിത്രീകരിക്കുക: നിങ്ങൾ ഒരു പുതിയ പ്രോജക്റ്റിൽ ചേരുക, കോഡ്ബേസിലേക്ക് മുങ്ങുക, ആദ്യത്തെ കുറച്ച് മണിക്കൂറുകൾക്കുള്ളിൽ, നിരാശാജനകമായ പരിചിതമായ എന്തെങ്കിലും നിങ്ങൾ കണ്ടെത്തും. സ്റ്റൈൽഷീറ്റുകളിൽ ഉടനീളം ചിതറിക്കിടക്കുന്ന, ഒരേ അടിസ്ഥാന ആനിമേഷനുകൾക്കായി നിങ്ങൾ ഒന്നിലധികം @keyframes നിർവചനങ്ങൾ കണ്ടെത്തുന്നു. മൂന്ന് വ്യത്യസ്ത ഫേഡ്-ഇൻ ഇഫക്റ്റുകൾ, രണ്ടോ മൂന്നോ സ്ലൈഡ് വ്യതിയാനങ്ങൾ, ഒരുപിടി സൂം ആനിമേഷനുകൾ, കുറഞ്ഞത് രണ്ട് വ്യത്യസ്ത സ്പിൻ ആനിമേഷനുകൾ, കാരണം, എന്തുകൊണ്ട്? @keyframes പൾസ് { { മുതൽ സ്കെയിൽ: 1; } വരെ { സ്കെയിൽ: 1.1; } }
@keyframes വലിയ പൾസ് { 0%, 20%, 100% { സ്കെയിൽ: 1; } 10%, 40% { സ്കെയിൽ: 1.2; } }
ഈ സാഹചര്യം പരിചിതമാണെന്ന് തോന്നുന്നുവെങ്കിൽ, നിങ്ങൾ ഒറ്റയ്ക്കല്ല. വിവിധ പ്രോജക്റ്റുകളിലുടനീളമുള്ള എൻ്റെ അനുഭവത്തിൽ, എനിക്ക് നൽകാനാകുന്ന ഏറ്റവും സ്ഥിരതയുള്ള പെട്ടെന്നുള്ള വിജയങ്ങളിലൊന്ന് കീഫ്രെയിമുകൾ ഏകീകരിക്കുകയും സ്റ്റാൻഡേർഡ് ചെയ്യുകയും ചെയ്യുന്നു. ഇത് വളരെ വിശ്വസനീയമായ ഒരു പാറ്റേണായി മാറിയിരിക്കുന്നു, ഏതൊരു പുതിയ കോഡ്ബേസിലും എൻ്റെ ആദ്യ ടാസ്ക്കുകളിൽ ഒന്നായി ഞാൻ ഈ ക്ലീനപ്പിനായി കാത്തിരിക്കുകയാണ്. കുഴപ്പത്തിന് പിന്നിലെ യുക്തി നിങ്ങൾ അതിനെക്കുറിച്ച് ചിന്തിക്കുമ്പോൾ ഈ ആവർത്തനം തികച്ചും അർത്ഥവത്താണ്. ദൈനംദിന ജോലിയിൽ നാമെല്ലാവരും ഒരേ അടിസ്ഥാന ആനിമേഷനുകൾ ഉപയോഗിക്കുന്നു: ഫേഡുകൾ, സ്ലൈഡുകൾ, സൂം, സ്പിൻ, മറ്റ് പൊതുവായ ഇഫക്റ്റുകൾ. ഈ ആനിമേഷനുകൾ വളരെ ലളിതമാണ്, മാത്രമല്ല ജോലി പൂർത്തിയാക്കാൻ ദ്രുത @keyframes നിർവചനം നൽകാനും എളുപ്പമാണ്. ഒരു കേന്ദ്രീകൃത ആനിമേഷൻ സംവിധാനമില്ലാതെ, ഡവലപ്പർമാർ സ്വാഭാവികമായും ഈ കീഫ്രെയിമുകൾ ആദ്യം മുതൽ എഴുതുന്നു, സമാനമായ ആനിമേഷനുകൾ കോഡ്ബേസിൽ മറ്റെവിടെയെങ്കിലും ഉണ്ടെന്ന് അറിയില്ല. ഘടക-അടിസ്ഥാന ആർക്കിടെക്ചറുകളിൽ പ്രവർത്തിക്കുമ്പോൾ ഇത് പ്രത്യേകിച്ചും സാധാരണമാണ് (ഇത് നമ്മളിൽ ഭൂരിഭാഗവും ചെയ്യുന്നു), കാരണം ടീമുകൾ പലപ്പോഴും ആപ്ലിക്കേഷൻ്റെ വിവിധ ഭാഗങ്ങളിൽ സമാന്തരമായി പ്രവർത്തിക്കുന്നു. ഫലം? ആനിമേഷൻ കുഴപ്പം. ചെറിയ പ്രശ്നം കീഫ്രെയിമുകളുടെ ഡ്യൂപ്ലിക്കേഷനിലെ ഏറ്റവും വ്യക്തമായ പ്രശ്നങ്ങൾ പാഴായ വികസന സമയവും അനാവശ്യ കോഡ് വീക്കവുമാണ്. ഒന്നിലധികം കീഫ്രെയിം നിർവചനങ്ങൾ ആവശ്യകതകൾ മാറുമ്പോൾ അപ്ഡേറ്റ് ചെയ്യേണ്ട ഒന്നിലധികം സ്ഥലങ്ങളെ അർത്ഥമാക്കുന്നു. നിങ്ങളുടെ ഫേഡ് ആനിമേഷൻ്റെ സമയം ക്രമീകരിക്കേണ്ടതുണ്ടോ? നിങ്ങളുടെ കോഡ്ബേസിൽ ഉടനീളമുള്ള എല്ലാ സന്ദർഭങ്ങളും വേട്ടയാടേണ്ടതുണ്ട്. ഈയിംഗ് ഫംഗ്ഷനുകൾ സ്റ്റാൻഡേർഡ് ചെയ്യണോ? എല്ലാ വ്യതിയാനങ്ങളും കണ്ടെത്തുന്നതിൽ ഭാഗ്യം. മെയിൻ്റനൻസ് പോയിൻ്റുകളുടെ ഈ ഗുണനം ലളിതമായ ആനിമേഷൻ അപ്ഡേറ്റുകൾ പോലും സമയമെടുക്കുന്ന ജോലിയാക്കുന്നു. ഏറ്റവും വലിയ പ്രശ്നം ഈ കീഫ്രെയിമുകളുടെ തനിപ്പകർപ്പ് ഉപരിതലത്തിന് താഴെ ഒളിഞ്ഞിരിക്കുന്ന കൂടുതൽ വഞ്ചനാപരമായ പ്രശ്നം സൃഷ്ടിക്കുന്നു: ആഗോള സ്കോപ്പ് ട്രാപ്പ്. ഘടക-അടിസ്ഥാന ആർക്കിടെക്ചറുകളിൽ പ്രവർത്തിക്കുമ്പോൾ പോലും, CSS കീഫ്രെയിമുകൾ എല്ലായ്പ്പോഴും ആഗോള പരിധിയിൽ നിർവചിക്കപ്പെടുന്നു. ഇതിനർത്ഥം എല്ലാ കീഫ്രെയിമുകളും എല്ലാ ഘടകങ്ങൾക്കും ബാധകമാണ്. എപ്പോഴും. അതെ, നിങ്ങളുടെ ഘടകത്തിൽ നിങ്ങൾ നിർവചിച്ചിരിക്കുന്ന കീഫ്രെയിമുകൾ നിങ്ങളുടെ ആനിമേഷൻ ഉപയോഗിക്കണമെന്നില്ല. ആഗോള സ്കോപ്പിലേക്ക് ലോഡ് ചെയ്ത അതേ പേരുമായി പൊരുത്തപ്പെടുന്ന അവസാന കീഫ്രെയിമുകൾ ഇത് ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ എല്ലാ കീഫ്രെയിമുകളും ഒരേപോലെയുള്ളിടത്തോളം, ഇതൊരു ചെറിയ പ്രശ്നമായി തോന്നിയേക്കാം. എന്നാൽ ഒരു നിർദ്ദിഷ്ട ഉപയോഗത്തിനായി ഒരു ആനിമേഷൻ ഇഷ്ടാനുസൃതമാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്ന നിമിഷം, നിങ്ങൾ പ്രശ്നത്തിലാണ്, അല്ലെങ്കിൽ മോശമായത്, നിങ്ങളായിരിക്കും അവയ്ക്ക് കാരണമാകുന്നത്. ഒന്നുകിൽ നിങ്ങളുടെ ആനിമേഷൻ പ്രവർത്തിക്കില്ല, കാരണം നിങ്ങളുടെ കീഫ്രെയിമുകൾക്ക് ശേഷം മറ്റൊരു ഘടകം ലോഡുചെയ്തു, നിങ്ങളുടെ കീഫ്രെയിമുകൾ ഓവർറൈറ്റുചെയ്യുന്നു, അല്ലെങ്കിൽ നിങ്ങളുടെ ഘടക ലോഡുകൾ നീണ്ടുനിൽക്കുകയും ആ കീഫ്രെയിമിൻ്റെ പേര് ഉപയോഗിക്കുന്ന മറ്റെല്ലാ ഘടകങ്ങളുടെയും ആനിമേഷൻ സ്വഭാവം ആകസ്മികമായി മാറ്റുകയും ചെയ്യുന്നു, മാത്രമല്ല നിങ്ങൾക്കത് തിരിച്ചറിയാൻ പോലും കഴിയില്ല. പ്രശ്നം വ്യക്തമാക്കുന്ന ഒരു ലളിതമായ ഉദാഹരണം ഇതാ: .ഘടകം-ഒന്ന് { /* ഘടക ശൈലികൾ */ ആനിമേഷൻ: പൾസ് 1s ഈസ്-ഇൻ-ഔട്ട് അനന്തമായ ഇതര; }
/* ഈ @keyframes നിർവചനം പ്രവർത്തിക്കില്ല */ @keyframes പൾസ് { { മുതൽ സ്കെയിൽ: 1; } വരെ { സ്കെയിൽ: 1.1; } }
/* പിന്നീട് കോഡിൽ... */
.ഘടകം-രണ്ട് { /* ഘടക ശൈലികൾ */ ആനിമേഷൻ: പൾസ് 1s ഈസ്-ഇൻ-ഔട്ട് അനന്തം; }
/* ഈ കീഫ്രെയിമുകൾ രണ്ട് ഘടകങ്ങൾക്കും ബാധകമാകും */ @keyframes പൾസ് { 0%, 20%, 100% { സ്കെയിൽ: 1; } 10%, 40% { സ്കെയിൽ: 1.2; } }
രണ്ട് ഘടകങ്ങളും ഒരേ ആനിമേഷൻ നാമം ഉപയോഗിക്കുന്നു, എന്നാൽ രണ്ടാമത്തെ @keyframes നിർവചനം ആദ്യത്തേത് തിരുത്തിയെഴുതുന്നു. ഏത് ഘടകഭാഗം ഏത് കീഫ്രെയിമുകൾ നിർവചിച്ചാലും, ഇപ്പോൾ ഘടകം-ഒന്നും ഘടകം-രണ്ടും രണ്ടാമത്തെ കീഫ്രെയിമുകൾ ഉപയോഗിക്കും. പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ കാണുക - അമിത് ഷീനിൻ്റെ ഡെമോ 1 [ഫോർക്ക്ഡ്]. ഏറ്റവും മോശം ഭാഗം? ഇത് പലപ്പോഴും പ്രാദേശിക വികസനത്തിൽ പൂർണ്ണമായി പ്രവർത്തിക്കുന്നു, എന്നാൽ നിർമ്മാണ പ്രക്രിയകൾ നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റുകളുടെ ലോഡിംഗ് ക്രമം മാറ്റുമ്പോൾ നിർമ്മാണത്തിൽ നിഗൂഢമായി തകരുന്നു. ഏത് ഘടകങ്ങളാണ് ലോഡ് ചെയ്തിരിക്കുന്നത്, ഏത് ക്രമത്തിലാണ് എന്നതിനെ ആശ്രയിച്ച് വ്യത്യസ്തമായി പെരുമാറുന്ന ആനിമേഷനുകളിൽ നിങ്ങൾ അവസാനിക്കും. പരിഹാരം: ഏകീകൃത കീഫ്രെയിമുകൾ ഈ അരാജകത്വത്തിനുള്ള ഉത്തരം അതിശയകരമാംവിധം ലളിതമാണ്: പങ്കിട്ട സ്റ്റൈൽഷീറ്റിൽ സംഭരിച്ചിരിക്കുന്ന മുൻകൂട്ടി നിശ്ചയിച്ച ഡൈനാമിക് കീഫ്രെയിമുകൾ. ഓരോ ഘടകത്തിനും അതിൻ്റേതായ ആനിമേഷനുകൾ നിർവചിക്കാൻ അനുവദിക്കുന്നതിനുപകരം, നന്നായി രേഖപ്പെടുത്തപ്പെട്ടതും എളുപ്പമുള്ളതുമായ കേന്ദ്രീകൃത കീഫ്രെയിമുകൾ ഞങ്ങൾ സൃഷ്ടിക്കുന്നു.നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ പ്രത്യേക ആവശ്യങ്ങൾക്ക് അനുസരിച്ച് ഉപയോഗിക്കുകയും പരിപാലിക്കുകയും ചെയ്യുക. കീഫ്രെയിം ടോക്കണുകളായി ഇതിനെ കരുതുക. നിറങ്ങൾക്കും സ്പെയ്സിങ്ങിനുമായി ഞങ്ങൾ ടോക്കണുകൾ ഉപയോഗിക്കുന്നതുപോലെ, നമ്മളിൽ പലരും ഇതിനകം തന്നെ ആനിമേഷൻ പ്രോപ്പർട്ടികൾക്കായി ടോക്കണുകൾ ഉപയോഗിക്കുന്നതുപോലെ, ദൈർഘ്യം, ഈസിങ് ഫംഗ്ഷനുകൾ എന്നിവ പോലെ, കീഫ്രെയിമുകൾക്കും ടോക്കണുകൾ എന്തുകൊണ്ട് ഉപയോഗിച്ചുകൂടാ? ചെറിയ പ്രശ്നവും (കോഡ് ഡ്യൂപ്ലിക്കേഷൻ) വലിയ പ്രശ്നവും (ആഗോള വ്യാപ്തി വൈരുദ്ധ്യങ്ങൾ) ഒറ്റയടിക്ക് പരിഹരിക്കുന്നതിനിടയിൽ, നിങ്ങൾ ഉപയോഗിക്കുന്ന നിലവിലെ ഡിസൈൻ ടോക്കൺ വർക്ക്ഫ്ലോയുമായി ഈ സമീപനത്തിന് സ്വാഭാവികമായും സംയോജിപ്പിക്കാൻ കഴിയും. ആശയം ലളിതമാണ്: ഞങ്ങളുടെ എല്ലാ പൊതു ആനിമേഷനുകൾക്കും സത്യത്തിൻ്റെ ഒരൊറ്റ ഉറവിടം സൃഷ്ടിക്കുക. ഈ പങ്കിട്ട സ്റ്റൈൽഷീറ്റിൽ ഞങ്ങളുടെ പ്രോജക്റ്റ് യഥാർത്ഥത്തിൽ ഉപയോഗിക്കുന്ന ആനിമേഷൻ പാറ്റേണുകൾ ഉൾക്കൊള്ളുന്ന ശ്രദ്ധാപൂർവ്വം തയ്യാറാക്കിയ കീഫ്രെയിമുകൾ അടങ്ങിയിരിക്കുന്നു. ഒരു ഫേഡ് ആനിമേഷൻ ഇതിനകം തന്നെ ഞങ്ങളുടെ കോഡ്ബേസിൽ എവിടെയെങ്കിലും ഉണ്ടോ എന്ന് ഊഹിക്കേണ്ടതില്ല. മറ്റ് ഘടകങ്ങളിൽ നിന്ന് ആകസ്മികമായി ആനിമേഷനുകൾ പുനരാലേഖനം ചെയ്യേണ്ടതില്ല. എന്നാൽ പ്രധാന കാര്യം ഇതാണ്: ഇവ സ്റ്റാറ്റിക് കോപ്പി-പേസ്റ്റ് ആനിമേഷനുകൾ മാത്രമല്ല. CSS ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടികൾ വഴി ചലനാത്മകവും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമാണ് അവ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്, നിങ്ങൾക്ക് ഒരിടത്ത് അൽപ്പം വലിയ “പൾസ്” ആനിമേഷൻ ആവശ്യമുണ്ടെങ്കിൽ പോലെ, നിർദ്ദിഷ്ട ഉപയോഗ സാഹചര്യങ്ങളുമായി ആനിമേഷനുകൾ പൊരുത്തപ്പെടുത്താനുള്ള വഴക്കം ഉള്ളപ്പോൾ തന്നെ സ്ഥിരത നിലനിർത്താൻ ഞങ്ങളെ അനുവദിക്കുന്നു. ആദ്യത്തെ കീഫ്രെയിംസ് ടോക്കൺ നിർമ്മിക്കുന്നു നമ്മൾ കൈകാര്യം ചെയ്യേണ്ട ആദ്യത്തെ താഴ്ന്ന തൂങ്ങിക്കിടക്കുന്ന പഴങ്ങളിൽ ഒന്ന് "ഫേഡ്-ഇൻ" ആനിമേഷൻ ആണ്. എൻ്റെ സമീപകാല പ്രോജക്റ്റുകളിലൊന്നിൽ, ഞാൻ ഒരു ഡസനിലധികം വ്യത്യസ്ത ഫേഡ്-ഇൻ നിർവചനങ്ങൾ കണ്ടെത്തി, അതെ, അവയെല്ലാം അതാര്യത 0 മുതൽ 1 വരെ ആനിമേറ്റ് ചെയ്തു. അതിനാൽ, നമുക്ക് ഒരു പുതിയ സ്റ്റൈൽഷീറ്റ് സൃഷ്ടിക്കാം, അതിനെ kf-tokens.css എന്ന് വിളിക്കാം, അത് ഞങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് ഇമ്പോർട്ടുചെയ്യുക, കൂടാതെ ശരിയായ അഭിപ്രായങ്ങളോടെ ഞങ്ങളുടെ കീഫ്രെയിമുകൾ സ്ഥാപിക്കുക. /* keyframes-tokens.css */
/* * ഫേഡ് ഇൻ - ഫെയ്ഡ് എൻട്രൻസ് ആനിമേഷൻ * ഉപയോഗം: ആനിമേഷൻ: kf-fade-in 0.3s ഈസ്-ഔട്ട്; */ @keyframes kf-fade-in { { മുതൽ അതാര്യത: 0; } വരെ { അതാര്യത: 1; } }
ഈ ഒറ്റ @keyframes പ്രഖ്യാപനം ഞങ്ങളുടെ കോഡ്ബേസിൽ ഉടനീളം ചിതറിക്കിടക്കുന്ന എല്ലാ ഫേഡ്-ഇൻ ആനിമേഷനുകളും മാറ്റിസ്ഥാപിക്കുന്നു. വൃത്തിയുള്ളതും ലളിതവും ആഗോളതലത്തിൽ ബാധകവുമാണ്. ഇപ്പോൾ ഞങ്ങൾ ഈ ടോക്കൺ നിർവചിച്ചിരിക്കുന്നു, ഞങ്ങളുടെ പ്രോജക്റ്റിലുടനീളം ഏത് ഘടകത്തിൽ നിന്നും ഇത് ഉപയോഗിക്കാം: .മോഡൽ { ആനിമേഷൻ: kf-fade-in 0.3s ഈസ്-ഔട്ട്; }
.ടൂൾടിപ്പ് { ആനിമേഷൻ: kf-fade-in 0.2s ഈസ്-ഇൻ-ഔട്ട്; }
.അറിയിപ്പ് { ആനിമേഷൻ: kf-fade-in 0.5s ഈസ്-ഔട്ട്; }
അമിത് ഷീനിൻ്റെ പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ - ഡെമോ 2 [ഫോർക്ക്ഡ്] കാണുക. ശ്രദ്ധിക്കുക: ഞങ്ങളുടെ എല്ലാ @keyframes പേരുകളിലും ഞങ്ങൾ kf- പ്രിഫിക്സ് ഉപയോഗിക്കുന്നു. ഈ പ്രിഫിക്സ് ഒരു നെയിംസ്പെയ്സായി പ്രവർത്തിക്കുന്നു, അത് പ്രോജക്റ്റിലെ നിലവിലുള്ള ആനിമേഷനുകളുമായുള്ള പൊരുത്തക്കേടുകൾ തടയുകയും ഈ കീഫ്രെയിമുകൾ ഞങ്ങളുടെ കീഫ്രെയിം ടോക്കൺ ഫയലിൽ നിന്നാണ് വരുന്നതെന്ന് ഉടനടി വ്യക്തമാക്കുകയും ചെയ്യുന്നു. ഒരു ഡൈനാമിക് സ്ലൈഡ് നിർമ്മിക്കുന്നു കെഎഫ്-ഫേഡ്-ഇൻ കീഫ്രെയിമുകൾ മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു, കാരണം ഇത് ലളിതവും കാര്യങ്ങൾ കുഴപ്പത്തിലാക്കാൻ ഇടമില്ല. എന്നിരുന്നാലും, മറ്റ് ആനിമേഷനുകളിൽ, നമ്മൾ കൂടുതൽ ചലനാത്മകമായിരിക്കണം, ഇവിടെ നമുക്ക് CSS ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടികളുടെ വലിയ ശക്തി പ്രയോജനപ്പെടുത്താം. ചിതറിക്കിടക്കുന്ന സ്റ്റാറ്റിക് ആനിമേഷനുകളെ അപേക്ഷിച്ച് കീഫ്രെയിം ടോക്കണുകൾ ശരിക്കും തിളങ്ങുന്നത് ഇവിടെയാണ്. നമുക്ക് ഒരു പൊതു സാഹചര്യം എടുക്കാം: "സ്ലൈഡ്-ഇൻ" ആനിമേഷനുകൾ. എന്നാൽ എവിടെ നിന്ന് സ്ലൈഡ്? വലതുവശത്ത് നിന്ന് 100px? ഇടതുവശത്ത് നിന്ന് 50%? അത് സ്ക്രീനിൻ്റെ മുകളിൽ നിന്ന് നൽകണോ? അതോ താഴെ നിന്ന് ഒഴുകിയാലോ? വളരെയധികം സാധ്യതകൾ ഉണ്ട്, എന്നാൽ ഓരോ ദിശയ്ക്കും ഓരോ വ്യതിയാനത്തിനും വെവ്വേറെ കീഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നതിനുപകരം, എല്ലാ സാഹചര്യങ്ങളുമായി പൊരുത്തപ്പെടുന്ന ഒരു ഫ്ലെക്സിബിൾ ടോക്കൺ നമുക്ക് നിർമ്മിക്കാൻ കഴിയും: /* * സ്ലൈഡ് ഇൻ - ദിശാസൂചന സ്ലൈഡ് ആനിമേഷൻ * ദിശ നിയന്ത്രിക്കാൻ --kf-slide-from ഉപയോഗിക്കുക * സ്ഥിരസ്ഥിതി: ഇടത്തുനിന്ന് സ്ലൈഡുചെയ്യുന്നു (-100%) * ഉപയോഗം: * ആനിമേഷൻ: kf-slide-in 0.3s ഈസ്-ഔട്ട്; * --kf-slide-from: -100px 0; // ഇടത്തുനിന്ന് സ്ലൈഡ് ചെയ്യുക * --kf-slide-from: 100px 0; // വലതു നിന്ന് സ്ലൈഡ് ചെയ്യുക * --kf-slide-from: 0 -50px; // മുകളിൽ നിന്ന് സ്ലൈഡ് ചെയ്യുക */
@keyframes kf-slide-in { { മുതൽ വിവർത്തനം ചെയ്യുക: var (--kf-slide-from, -100% 0); } വരെ { വിവർത്തനം ചെയ്യുക: 0 0; } }
--kf-slide-from ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടി മാറ്റുന്നതിലൂടെ, ഏത് സ്ലൈഡ് ദിശയ്ക്കും ഇപ്പോൾ നമുക്ക് ഈ ഒറ്റ @keyframes ടോക്കൺ ഉപയോഗിക്കാം: .സൈഡ്ബാർ { ആനിമേഷൻ: kf-slide-in 0.3s ഈസ്-ഔട്ട്; /* സ്ഥിര മൂല്യം ഉപയോഗിക്കുന്നു: ഇടത്തുനിന്ന് സ്ലൈഡുകൾ */ }
.അറിയിപ്പ് { ആനിമേഷൻ: kf-slide-in 0.4s ഈസ്-ഔട്ട്; --kf-slide-from: 0 -50px; /* മുകളിൽ നിന്ന് സ്ലൈഡ് ചെയ്യുക */ }
.മോഡൽ { ആനിമേഷൻ: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* താഴെ-വലത് നിന്ന് സ്ലൈഡ് */ }
സ്ഥിരത നിലനിർത്തിക്കൊണ്ടുതന്നെ ഈ സമീപനം നമുക്ക് അവിശ്വസനീയമായ വഴക്കം നൽകുന്നു. ഒരു കീഫ്രെയിം പ്രഖ്യാപനം, അനന്തമായ സാധ്യതകൾ. അമിത് ഷീനിൻ്റെ പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ - ഡെമോ 3 [ഫോർക്ക്ഡ്] കാണുക. “സ്ലൈഡ്-ഔട്ട്” ഇഫക്റ്റുകളും അനുവദിച്ചുകൊണ്ട് ഞങ്ങളുടെ ആനിമേഷനുകൾ കൂടുതൽ വഴക്കമുള്ളതാക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നമുക്ക് കഴിയുംഅടുത്ത വിഭാഗത്തിൽ നമ്മൾ കാണുന്നതിന് സമാനമായി --kf-slide-ലേക്ക് ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടി ചേർക്കുക. ദ്വിദിശ സൂം കീഫ്രെയിമുകൾ പ്രോജക്റ്റുകളിലുടനീളം തനിപ്പകർപ്പ് ലഭിക്കുന്ന മറ്റൊരു സാധാരണ ആനിമേഷൻ "സൂം" ഇഫക്റ്റുകളാണ്. ടോസ്റ്റ് സന്ദേശങ്ങൾക്കായുള്ള സൂക്ഷ്മമായ സ്കെയിൽ-അപ്പ്, മോഡലുകൾക്കുള്ള നാടകീയമായ സൂം-ഇൻ, അല്ലെങ്കിൽ തലക്കെട്ടുകൾക്കുള്ള മൃദുലമായ സ്കെയിൽ-ഡൗൺ ഇഫക്റ്റ് എന്നിവയായാലും, സൂം ആനിമേഷനുകൾ എല്ലായിടത്തും ഉണ്ട്. ഓരോ സ്കെയിൽ മൂല്യത്തിനും വെവ്വേറെ കീഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നതിനുപകരം, kf-സൂം കീഫ്രെയിമുകളുടെ ഒരു ഫ്ലെക്സിബിൾ സെറ്റ് നിർമ്മിക്കാം:
/* * സൂം - സ്കെയിൽ ആനിമേഷൻ * സ്കെയിൽ മൂല്യങ്ങൾ നിയന്ത്രിക്കാൻ --kf-zoom-from, --kf-zoom-to എന്നിവ ഉപയോഗിക്കുക * സ്ഥിരസ്ഥിതി: 80% മുതൽ 100% വരെ സൂം ചെയ്യുന്നു (0.8 മുതൽ 1 വരെ) * ഉപയോഗം: * ആനിമേഷൻ: kf-zoom 0.2s ഈസ്-ഔട്ട്; * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // 50% മുതൽ 100% വരെ സൂം ചെയ്യുക * --kf-zoom-from: 1; --kf-zoom-to: 0; // 100% മുതൽ 0% വരെ സൂം ചെയ്യുക * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // 100% മുതൽ 110% വരെ സൂം ചെയ്യുക */
@keyframes kf-zoom { { മുതൽ സ്കെയിൽ: var (--kf-zoom-from, 0.8); } വരെ { സ്കെയിൽ: var (--kf-zoom-to, 1); } }
ഒരു നിർവചനം ഉപയോഗിച്ച്, നമുക്ക് ആവശ്യമുള്ള ഏത് സൂം വേരിയേഷനും നേടാനാകും: .ടോസ്റ്റ് { ആനിമേഷൻ: kf-slide-in 0.2s, kf-zoom 0.4s ഈസ്-ഔട്ട്; --kf-slide-from: 0 100%; /* മുകളിൽ നിന്ന് സ്ലൈഡ് ചെയ്യുക */ /* ഡിഫോൾട്ട് സൂം ഉപയോഗിക്കുന്നു: 80% മുതൽ 100% വരെയുള്ള സ്കെയിലുകൾ */ }
.മോഡൽ { ആനിമേഷൻ: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* 0% മുതൽ 100% വരെ നാടകീയ സൂം */ }
.തലക്കെട്ട് { ആനിമേഷൻ: kf-fade-in 2s, kf-zoom 2s ഈസ്-ഇൻ; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; /* സൌമ്യമായ സ്കെയിൽ ഡൗൺ */ }
0.8 (80%) ൻ്റെ ഡിഫോൾട്ട്, ടോസ്റ്റ് സന്ദേശങ്ങളും കാർഡുകളും പോലെയുള്ള മിക്ക യുഐ ഘടകങ്ങൾക്കും യോജിച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു, അതേസമയം പ്രത്യേക കേസുകൾക്കായി ഇഷ്ടാനുസൃതമാക്കാൻ എളുപ്പമാണ്. അമിത് ഷീനിൻ്റെ പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ - ഡെമോ 4 [ഫോർക്ക്ഡ്] കാണുക. സമീപകാല ഉദാഹരണങ്ങളിൽ രസകരമായ എന്തെങ്കിലും നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം: ഞങ്ങൾ ആനിമേഷനുകൾ സംയോജിപ്പിക്കുകയാണ്. @keyframes ടോക്കണുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്നതിൻ്റെ ഒരു പ്രധാന നേട്ടം, അവ പരസ്പരം തടസ്സങ്ങളില്ലാതെ സംയോജിപ്പിക്കാൻ രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ് എന്നതാണ്. ഈ സുഗമമായ രചന മനഃപൂർവമാണ്, ആകസ്മികമല്ല. ആനിമേഷൻ കോമ്പോസിഷൻ എവിടെയാണ് പ്രശ്നമാകുന്നത് എന്നതുൾപ്പെടെ ഞങ്ങൾ പിന്നീട് കൂടുതൽ വിശദമായി ചർച്ച ചെയ്യും, എന്നാൽ മിക്ക കോമ്പിനേഷനുകളും ലളിതവും നടപ്പിലാക്കാൻ എളുപ്പവുമാണ്. കുറിപ്പ്: ഈ ലേഖനം എഴുതുമ്പോൾ, ഒരുപക്ഷേ ഇത് എഴുതിയതുകൊണ്ടാകാം, പ്രവേശന ആനിമേഷനുകളെക്കുറിച്ചുള്ള മുഴുവൻ ആശയവും ഞാൻ പുനർവിചിന്തനം ചെയ്യുന്നതായി കണ്ടെത്തി. CSS-ലെ സമീപകാല പുരോഗതികൾക്കൊപ്പം, നമുക്ക് അവ ഇപ്പോഴും ആവശ്യമുണ്ടോ? ഭാഗ്യവശാൽ, ആദം ആർഗിൽ ഇതേ ചോദ്യങ്ങൾ പര്യവേക്ഷണം ചെയ്യുകയും തൻ്റെ ബ്ലോഗിൽ അവ ഉജ്ജ്വലമായി പ്രകടിപ്പിക്കുകയും ചെയ്തു. ഇത് ഇവിടെ എഴുതിയതിന് വിരുദ്ധമല്ല, എന്നാൽ ഇത് പരിഗണിക്കേണ്ട ഒരു സമീപനം അവതരിപ്പിക്കുന്നു, പ്രത്യേകിച്ചും നിങ്ങളുടെ പ്രോജക്റ്റുകൾ എൻട്രൻസ് ആനിമേഷനുകളെ വളരെയധികം ആശ്രയിക്കുകയാണെങ്കിൽ. തുടർച്ചയായ ആനിമേഷനുകൾ "ഫേഡ്", "സ്ലൈഡ്", "സൂം" എന്നിവ പോലെയുള്ള പ്രവേശന ആനിമേഷനുകൾ ഒരിക്കൽ സംഭവിക്കുകയും തുടർന്ന് നിർത്തുകയും ചെയ്യുമ്പോൾ, തുടർച്ചയായ ആനിമേഷനുകൾ ശ്രദ്ധ ആകർഷിക്കുന്നതിനോ നിലവിലുള്ള പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്നതിനോ അനിശ്ചിതമായി ലൂപ്പ് ചെയ്യുന്നു. ഞാൻ നേരിടുന്ന ഏറ്റവും സാധാരണമായ രണ്ട് തുടർച്ചയായ ആനിമേഷനുകൾ "സ്പിൻ" (സൂചകങ്ങൾ ലോഡുചെയ്യുന്നതിന്), "പൾസ്" (പ്രധാന ഘടകങ്ങൾ ഹൈലൈറ്റ് ചെയ്യുന്നതിനായി) എന്നിവയാണ്. കീഫ്രെയിം ടോക്കണുകൾ സൃഷ്ടിക്കുമ്പോൾ ഈ ആനിമേഷനുകൾ സവിശേഷമായ വെല്ലുവിളികൾ അവതരിപ്പിക്കുന്നു. സാധാരണയായി ഒരു സംസ്ഥാനത്ത് നിന്ന് മറ്റൊന്നിലേക്ക് പോകുന്ന എൻട്രൻസ് ആനിമേഷനുകളിൽ നിന്ന് വ്യത്യസ്തമായി, തുടർച്ചയായ ആനിമേഷനുകൾ അവയുടെ പെരുമാറ്റ രീതികളിൽ വളരെ ഇഷ്ടാനുസൃതമാക്കേണ്ടതുണ്ട്. സ്പിൻ ഡോക്ടർ ഓരോ പ്രോജക്റ്റും ഒന്നിലധികം സ്പിൻ ആനിമേഷനുകൾ ഉപയോഗിക്കുന്നതായി തോന്നുന്നു. ചിലത് ഘടികാരദിശയിൽ കറങ്ങുന്നു, മറ്റുള്ളവ എതിർ ഘടികാരദിശയിൽ കറങ്ങുന്നു. ചിലർ ഒറ്റത്തവണ 360-ഡിഗ്രി റൊട്ടേഷൻ ചെയ്യുന്നു, മറ്റുചിലർ വേഗതയേറിയ ഇഫക്റ്റിനായി ഒന്നിലധികം തിരിവുകൾ ചെയ്യുന്നു. ഓരോ വ്യതിയാനത്തിനും വെവ്വേറെ കീഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നതിനുപകരം, എല്ലാ സാഹചര്യങ്ങളും കൈകാര്യം ചെയ്യുന്ന ഒരു ഫ്ലെക്സിബിൾ സ്പിൻ നിർമ്മിക്കാം:
/* * സ്പിൻ - റൊട്ടേഷൻ ആനിമേഷൻ * റൊട്ടേഷൻ പരിധി നിയന്ത്രിക്കാൻ --kf-spin-from, --kf-spin-to എന്നിവ ഉപയോഗിക്കുക * റൊട്ടേഷൻ തുക നിയന്ത്രിക്കാൻ --kf-spin-turns ഉപയോഗിക്കുക * സ്ഥിരസ്ഥിതി: 0deg മുതൽ 360deg വരെ കറങ്ങുന്നു (1 പൂർണ്ണ ഭ്രമണം) * ഉപയോഗം: * ആനിമേഷൻ: kf-spin 1s ലീനിയർ അനന്തം; * --kf-spin-turns: 2; // 2 പൂർണ്ണ ഭ്രമണങ്ങൾ * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // പകുതി റൊട്ടേഷൻ * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // എതിർ ഘടികാരദിശയിൽ */
@keyframes kf-spin { { മുതൽ തിരിക്കുക: var (--kf-spin-from, 0deg); } വരെ { തിരിക്കുക: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
ഇപ്പോൾ നമുക്ക് ഇഷ്ടമുള്ള ഏത് സ്പിൻ വ്യതിയാനവും സൃഷ്ടിക്കാൻ കഴിയും:
.loading-spinner { ആനിമേഷൻ: kf-spin 1s ലീനിയർ അനന്തം; /* സ്ഥിരസ്ഥിതി ഉപയോഗിക്കുന്നു: 0deg മുതൽ 360deg വരെ കറങ്ങുന്നു */ }
.ഫാസ്റ്റ്-ലോഡർ { ആനിമേഷൻ: kf-spin 1.2s ഈസ്-ഇൻ-ഔട്ട് അനന്തമായ ഇതര; --kf-spin-turns: 3; /* ഓരോ സൈക്കിളിനും ഓരോ ദിശയ്ക്കും 3 പൂർണ്ണ ഭ്രമണങ്ങൾ*/ }
.സ്റ്റെപ്പ്-റിവേഴ്സ് { ആനിമേഷൻ: kf-spin 1.5s ഘട്ടങ്ങൾ(8) അനന്തം; --kf-spin-to: -360deg; /* എതിർ ഘടികാരദിശയിൽ */ }
.സൂക്ഷ്മ-വിഗ്ഗ്ലെ { ആനിമേഷൻ: kf-spin 2s ഈസ്-ഇൻ-ഔട്ട് അനന്തമായ ഇതര; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* 36 ഡിഗ്രി കുലുക്കുക: -18deg നും +18deg നും ഇടയിൽ */ }
അമിത് ഷീനിൻ്റെ പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ - ഡെമോ 5 [ഫോർക്ക്ഡ്] കാണുക. സ്പിന്നർമാർ, റൊട്ടേറ്റിംഗ് ഐക്കണുകൾ, വിഗിൾ ഇഫക്റ്റുകൾ, സങ്കീർണ്ണമായ മൾട്ടി-ടേൺ ആനിമേഷനുകൾ എന്നിവയ്ക്കായി ഒരേ കീഫ്രെയിമുകൾ പ്രവർത്തിക്കുന്നു എന്നതാണ് ഈ സമീപനത്തിൻ്റെ ഭംഗി. പൾസ് വിരോധാഭാസം പൾസ് ആനിമേഷനുകൾ തന്ത്രപ്രധാനമാണ്, കാരണം അവയ്ക്ക് വ്യത്യസ്ത ഗുണങ്ങളെ "പൾസ്" ചെയ്യാൻ കഴിയും. ചിലത് സ്കെയിൽ പൾസ് ചെയ്യുന്നു, മറ്റുള്ളവ അതാര്യതയെ പൾസ് ചെയ്യുന്നു, ചില പൾസ് വർണ്ണ ഗുണങ്ങളായ തെളിച്ചം അല്ലെങ്കിൽ സാച്ചുറേഷൻ. ഓരോ പ്രോപ്പർട്ടിക്കും വെവ്വേറെ കീഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നതിനുപകരം, ഏത് CSS പ്രോപ്പർട്ടിയിലും പ്രവർത്തിക്കുന്ന കീഫ്രെയിമുകൾ സൃഷ്ടിക്കാനാകും. സ്കെയിൽ, അതാര്യത ഓപ്ഷനുകൾ ഉള്ള ഒരു പൾസ് കീഫ്രെയിമിൻ്റെ ഒരു ഉദാഹരണം ഇതാ:
/* * പൾസ് - പൾസിംഗ് ആനിമേഷൻ * സ്കെയിൽ ശ്രേണി നിയന്ത്രിക്കാൻ --kf-pulse-scale-from, --kf-pulse-scale-to എന്നിവ ഉപയോഗിക്കുക * അതാര്യത പരിധി നിയന്ത്രിക്കാൻ --kf-pulse-opacity-from, --kf-pulse-opacity-to എന്നിവ ഉപയോഗിക്കുക * സ്ഥിരസ്ഥിതി: പൾസ് ഇല്ല (എല്ലാ മൂല്യങ്ങളും 1) * ഉപയോഗം: * ആനിമേഷൻ: kf-pulse 2s ഈസ്-ഇൻ-ഔട്ട് അനന്തമായ ഇതര; * --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; // സ്കെയിൽ പൾസ് * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // അതാര്യത പൾസ് */
@keyframes kf-pulse { { മുതൽ സ്കെയിൽ: var (--kf-pulse-scale-from, 1); അതാര്യത: var (--kf-pulse-opacity-from, 1); } വരെ { സ്കെയിൽ: var (--kf-pulse-scale-to, 1); അതാര്യത: var (--kf-pulse-opacity-to, 1); } }
ഇത് ഒന്നിലധികം ഗുണങ്ങളെ ആനിമേറ്റ് ചെയ്യാൻ കഴിയുന്ന ഒരു ഫ്ലെക്സിബിൾ പൾസ് സൃഷ്ടിക്കുന്നു: .കോൾ-ടു-ആക്ഷൻ { ആനിമേഷൻ: kf-pulse 0.6s അനന്തമായ ഇതര; --kf-pulse-opacity-from: 0.5; /* അതാര്യത പൾസ് */ }
.notification-dot { ആനിമേഷൻ: kf-pulse 0.6s ഈസ്-ഇൻ-ഔട്ട് അനന്തമായ ആൾട്ടർനേറ്റ്; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* സ്കെയിൽ പൾസ് */ }
.ടെക്സ്റ്റ്-ഹൈലൈറ്റ് { ആനിമേഷൻ: kf-pulse 1.5s ഈസ്-ഔട്ട് അനന്തം; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* സ്കെയിലും അതാര്യത പൾസും */ }
അമിത് ഷീനിൻ്റെ പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ - ഡെമോ 6 [ഫോർക്ക്ഡ്] കാണുക. ഈ സിംഗിൾ kf-പൾസ് കീഫ്രെയിമിന് സൂക്ഷ്മമായ ശ്രദ്ധ പിടിച്ചുപറ്റുന്നത് മുതൽ നാടകീയമായ ഹൈലൈറ്റുകൾ വരെ എല്ലാം കൈകാര്യം ചെയ്യാൻ കഴിയും, എല്ലാം ഇഷ്ടാനുസൃതമാക്കാൻ എളുപ്പമാണ്. വിപുലമായ ഈസിങ്ങ് കീഫ്രെയിം ടോക്കണുകൾ ഉപയോഗിക്കുന്നതിലെ ഏറ്റവും വലിയ കാര്യം, ഞങ്ങളുടെ ആനിമേഷൻ ലൈബ്രറി വിപുലീകരിക്കുന്നതും ഇലാസ്റ്റിക് അല്ലെങ്കിൽ ബൗൺസ് പോലെ ആദ്യം മുതൽ എഴുതാൻ മിക്ക ഡെവലപ്പർമാരും മെനക്കെടാത്ത ഇഫക്റ്റുകൾ നൽകുന്നതും എത്ര എളുപ്പമാണ് എന്നതാണ്. ജമ്പ് ഉയരം നിയന്ത്രിക്കുന്നതിന് --kf-bounce-from ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്ന ലളിതമായ "ബൗൺസ്" കീഫ്രെയിം ടോക്കണിൻ്റെ ഒരു ഉദാഹരണം ഇതാ. /* * ബൗൺസ് - ബൗൺസിംഗ് എൻട്രൻസ് ആനിമേഷൻ * ജമ്പ് ഉയരം നിയന്ത്രിക്കാൻ --kf-bounce-from ഉപയോഗിക്കുക * സ്ഥിരസ്ഥിതി: 100vh-ൽ നിന്ന് ചാടുന്നു (ഓഫ് സ്ക്രീൻ) * ഉപയോഗം: * ആനിമേഷൻ: kf-bounce 3s ഈസ്-ഇൻ; * --kf-bounce-from: 200px; // 200px ഉയരത്തിൽ നിന്ന് ചാടുക */
@keyframes kf-bounce { 0% { വിവർത്തനം ചെയ്യുക: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { വിവർത്തനം ചെയ്യുക: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { വിവർത്തനം ചെയ്യുക: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { വിവർത്തനം ചെയ്യുക: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { വിവർത്തനം ചെയ്യുക: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { വിവർത്തനം ചെയ്യുക: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { വിവർത്തനം ചെയ്യുക: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { വിവർത്തനം ചെയ്യുക: 0 0; ആനിമേഷൻ-ടൈമിംഗ്-ഫംഗ്ഷൻ: ഈസി-ഔട്ട്; } }
കീഫ്രെയിമുകൾക്കുള്ളിലെ കണക്കുകൂട്ടലുകൾ കാരണം "ഇലാസ്റ്റിക്" പോലുള്ള ആനിമേഷനുകൾ അൽപ്പം തന്ത്രപരമാണ്. --kf-elastic-from-X, --kf-elastic-from-Y എന്നിവ വെവ്വേറെ നിർവചിക്കേണ്ടതുണ്ട് (രണ്ടും ഓപ്ഷണൽ ആണ്), അവ ഒരുമിച്ച് സ്ക്രീനിലെ ഏത് പോയിൻ്റിൽ നിന്നും ഒരു ഇലാസ്റ്റിക് പ്രവേശനം സൃഷ്ടിക്കാൻ അനുവദിക്കുന്നു.
/* * ഇലാസ്റ്റിക് ഇൻ - ഇലാസ്റ്റിക് എൻട്രൻസ് ആനിമേഷൻ * ആരംഭ സ്ഥാനം നിയന്ത്രിക്കാൻ --kf-elastic-from-X, --kf-elastic-from-Y എന്നിവ ഉപയോഗിക്കുക * സ്ഥിരസ്ഥിതി: മുകളിലെ കേന്ദ്രത്തിൽ നിന്ന് പ്രവേശിക്കുന്നു (0, -100vh) * ഉപയോഗം: * ആനിമേഷൻ: kf-elastic-in 2s ഈസ്-ഇൻ-ഔട്ട് രണ്ടും; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // (-50px, -200px) മുതൽ നൽകുക */
@keyframes kf-elastic-in { 0% { വിവർത്തനം ചെയ്യുക: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { വിവർത്തനം ചെയ്യുക: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { വിവർത്തനം ചെയ്യുക: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { വിവർത്തനം ചെയ്യുക: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { വിവർത്തനം ചെയ്യുക: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { വിവർത്തനം ചെയ്യുക: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { വിവർത്തനം ചെയ്യുക: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { വിവർത്തനം ചെയ്യുക: 0 0; } }
ഒരൊറ്റ ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടി മാറ്റുന്നതിലൂടെ, ഞങ്ങളുടെ പ്രോജക്റ്റിലുടനീളം വിപുലമായ കീഫ്രെയിമുകൾ പുനരുപയോഗിക്കുന്നതും ഇഷ്ടാനുസൃതമാക്കുന്നതും ഈ സമീപനം എളുപ്പമാക്കുന്നു.
.bounce-and-zoom { ആനിമേഷൻ: kf-bounce 3s ഈസ്-ഇൻ, kf-zoom 3s ലീനിയർ; --kf-zoom-from: 0; }
.bounce-and-slide { ആനിമേഷൻ-രചന: ചേർക്കുക; /* രണ്ട് ആനിമേഷനുകളും വിവർത്തനം ഉപയോഗിക്കുന്നു */ ആനിമേഷൻ: kf-bounce 3s ഈസ്-ഇൻ, kf-slide-in 3s ഈസ്-ഔട്ട്; --kf-slide-from: -200px; }
.ഇലാസ്റ്റിക്-ഇൻ { ആനിമേഷൻ: kf-elastic-in 2s ഈസ്-ഇൻ-ഔട്ട് രണ്ടും; }
അമിത് ഷീനിൻ്റെ പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ - ഡെമോ 7 [ഫോർക്ക്ഡ്] കാണുക. കീഫ്രെയിമുകൾ സമർത്ഥവും കാര്യക്ഷമവുമായ രീതിയിൽ എങ്ങനെ ഏകീകരിക്കാമെന്ന് ഈ ഘട്ടം വരെ ഞങ്ങൾ കണ്ടു. തീർച്ചയായും, നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായ രീതിയിൽ കാര്യങ്ങൾ മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം, എന്നാൽ ഞങ്ങൾ നിരവധി സാധാരണ ആനിമേഷനുകളുടെയും ദൈനംദിന ഉപയോഗ കേസുകളുടെയും ഉദാഹരണങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. ഈ കീഫ്രെയിം ടോക്കണുകൾ നിലവിലുണ്ടെങ്കിൽ, മുഴുവൻ പ്രോജക്റ്റിലുടനീളം സ്ഥിരവും പരിപാലിക്കാവുന്നതുമായ ആനിമേഷനുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ശക്തമായ ബിൽഡിംഗ് ബ്ലോക്കുകൾ ഞങ്ങൾക്കുണ്ട്. ഡ്യൂപ്ലിക്കേറ്റഡ് കീഫ്രെയിമുകളില്ല, ആഗോള സ്കോപ്പ് വൈരുദ്ധ്യങ്ങളില്ല. ഞങ്ങളുടെ എല്ലാ ആനിമേഷൻ ആവശ്യങ്ങളും കൈകാര്യം ചെയ്യുന്നതിനുള്ള വൃത്തിയുള്ളതും സൗകര്യപ്രദവുമായ മാർഗ്ഗം. എന്നാൽ യഥാർത്ഥ ചോദ്യം ഇതാണ്: ഈ ബിൽഡിംഗ് ബ്ലോക്കുകൾ ഒരുമിച്ച് എങ്ങനെ നിർമ്മിക്കാം? എല്ലാം ഒരുമിച്ച് ചേർക്കുന്നു അടിസ്ഥാന കീഫ്രെയിം ടോക്കണുകൾ സംയോജിപ്പിക്കുന്നത് ലളിതമാണെന്ന് ഞങ്ങൾ കണ്ടു. ആദ്യത്തെ ആനിമേഷൻ നിർവചിക്കുക, രണ്ടാമത്തേത് നിർവചിക്കുക, വേരിയബിളുകൾ ആവശ്യാനുസരണം സജ്ജീകരിക്കുക, അത്രമാത്രം. /* ഫേഡ് ഇൻ + സ്ലൈഡ് ഇൻ */ .ടോസ്റ്റ് { ആനിമേഷൻ: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* സൂം ഇൻ + ഫേഡ് ഇൻ */ .മോഡൽ { ആനിമേഷൻ: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; }
/* സ്ലൈഡ് ഇൻ + പൾസ് */ .അറിയിപ്പ് { ആനിമേഷൻ: kf-slide-in 0.5s, kf-pulse 1.2s ഈസ്-ഇൻ-ഔട്ട് അനന്തമായ ആൾട്ടർനേറ്റ്; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
ഈ കോമ്പിനേഷനുകൾ മനോഹരമായി പ്രവർത്തിക്കുന്നു, കാരണം ഓരോ ആനിമേഷനും വ്യത്യസ്തമായ ഒരു പ്രോപ്പർട്ടി ലക്ഷ്യമിടുന്നു: അതാര്യത, രൂപാന്തരം (വിവർത്തനം/സ്കെയിൽ) മുതലായവ. എന്നാൽ ചിലപ്പോൾ വൈരുദ്ധ്യങ്ങൾ ഉണ്ടാകാറുണ്ട്, എന്തുകൊണ്ടാണ് അവ എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് നമ്മൾ അറിയേണ്ടത്. രണ്ട് ആനിമേഷനുകൾ ഒരേ പ്രോപ്പർട്ടി ആനിമേറ്റ് ചെയ്യാൻ ശ്രമിക്കുമ്പോൾ - ഉദാഹരണത്തിന്, ആനിമേറ്റിംഗ് സ്കെയിൽ അല്ലെങ്കിൽ രണ്ട് ആനിമേറ്റിംഗ് അതാര്യത - ഫലം നിങ്ങൾ പ്രതീക്ഷിക്കുന്നത് പോലെ ആയിരിക്കില്ല. സ്ഥിരസ്ഥിതിയായി, ആനിമേഷനുകളിലൊന്ന് മാത്രമേ യഥാർത്ഥത്തിൽ ആ പ്രോപ്പർട്ടിയിലേക്ക് പ്രയോഗിക്കുകയുള്ളൂ, അത് ആനിമേഷൻ ലിസ്റ്റിലെ അവസാനത്തേതാണ്. ഒരേ പ്രോപ്പർട്ടിയിൽ ഒന്നിലധികം ആനിമേഷനുകൾ CSS കൈകാര്യം ചെയ്യുന്നതിൻ്റെ പരിമിതിയാണിത്. ഉദാഹരണത്തിന്, ഇത് ഉദ്ദേശിച്ച രീതിയിൽ പ്രവർത്തിക്കില്ല, കാരണം kf-pulse ആനിമേഷൻ മാത്രമേ ബാധകമാകൂ. .bad-combo { ആനിമേഷൻ: kf-zoom 0.5s ഫോർവേഡ്, kf-pulse 1.2s അനന്തമായ ഇതര; --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; }
ആനിമേഷൻ കൂട്ടിച്ചേർക്കൽ ഒരേ പ്രോപ്പർട്ടിയെ ബാധിക്കുന്ന ഒന്നിലധികം ആനിമേഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഏറ്റവും ലളിതവും നേരിട്ടുള്ളതുമായ മാർഗ്ഗം ആനിമേഷൻ-കോമ്പോസിഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുക എന്നതാണ്. മുകളിലുള്ള അവസാന ഉദാഹരണത്തിൽ, kf-പൾസ് ആനിമേഷൻ kf-സൂം ആനിമേഷൻ മാറ്റിസ്ഥാപിക്കുന്നു, അതിനാൽ നമുക്ക് പ്രാരംഭ സൂം കാണാനാകില്ല, മാത്രമല്ല പ്രതീക്ഷിക്കുന്ന സ്കെയിൽ 1.2-ലേക്ക് ലഭിക്കുകയുമില്ല. ചേർക്കാൻ ആനിമേഷൻ-കോമ്പോസിഷൻ സജ്ജീകരിക്കുന്നതിലൂടെ, രണ്ട് ആനിമേഷനുകളും സംയോജിപ്പിക്കാൻ ഞങ്ങൾ ബ്രൗസറിനോട് പറയുന്നു. ഇത് നമുക്ക് ആവശ്യമുള്ള ഫലം നൽകുന്നു. .ഘടകം-രണ്ട് { ആനിമേഷൻ-രചന: ചേർക്കുക; }
പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ കാണുക - അമിത് ഷീനിൻ്റെ ഡെമോ 8 [ഫോർക്ക്ഡ്]. ഒരേ പ്രോപ്പർട്ടിയിലെ ഇഫക്റ്റുകൾ സംയോജിപ്പിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്ന മിക്ക കേസുകളിലും ഈ സമീപനം നന്നായി പ്രവർത്തിക്കുന്നു. സ്റ്റാറ്റിക് പ്രോപ്പർട്ടി മൂല്യങ്ങളുമായി ആനിമേഷനുകൾ സംയോജിപ്പിക്കേണ്ടിവരുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്. ഉദാഹരണത്തിന്, ട്രാൻസ്ലേറ്റ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നമുക്ക് ആവശ്യമുള്ളിടത്ത് കൃത്യമായി സ്ഥാപിക്കുന്ന ഒരു ഘടകമുണ്ടെങ്കിൽ, കെഎഫ്-സ്ലൈഡ്-ഇൻ കീഫ്രെയിമുകൾ ഉപയോഗിച്ച് അത് ആനിമേറ്റ് ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ആനിമേഷൻ-കോമ്പോസിഷൻ ഇല്ലാതെ ഒരു മോശം ദൃശ്യമായ ജമ്പ് നമുക്ക് ലഭിക്കും. പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ കാണുക - അമിത് ഷീനിൻ്റെ ഡെമോ 9 [ഫോർക്ക്ഡ്]. ആനിമേഷൻ-കോമ്പോസിഷൻ ചേർക്കാൻ സജ്ജീകരിച്ചിരിക്കുന്നതിനാൽ, നിലവിലുള്ളവയുമായി ആനിമേഷൻ സുഗമമായി സംയോജിപ്പിച്ചിരിക്കുന്നുരൂപാന്തരപ്പെടുന്നു, അതിനാൽ മൂലകം സ്ഥാനത്ത് തുടരുകയും പ്രതീക്ഷിച്ചതുപോലെ ആനിമേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു. ആനിമേഷൻ സ്റ്റാഗർ ഒന്നിലധികം ആനിമേഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള മറ്റൊരു മാർഗ്ഗം അവയെ "സ്തംഭിപ്പിക്കുക" എന്നതാണ് - അതായത്, ആദ്യത്തേത് പൂർത്തിയായതിന് ശേഷം രണ്ടാമത്തെ ആനിമേഷൻ ചെറുതായി ആരംഭിക്കുക. ഇത് എല്ലാ കേസുകൾക്കും പ്രവർത്തിക്കുന്ന ഒരു പരിഹാരമല്ല, പക്ഷേ ഒരു എൻട്രൻസ് ആനിമേഷനും തുടർച്ചയായ ആനിമേഷനും ഉള്ളപ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്. /* ഫേഡ് ഇൻ + ഒപാസിറ്റി പൾസ് */ .അറിയിപ്പ് { ആനിമേഷൻ: kf-fade-in 2s ഈസ്-ഔട്ട്, kf-pulse 0.5s 2s ഈസ്-ഇൻ-ഔട്ട് അനന്തമായ ആൾട്ടർനേറ്റ്; --kf-pulse-opacity-to: 0.5; }
പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ കാണുക - അമിത് ഷീനിൻ്റെ ഡെമോ 10 [ഫോർക്ക്ഡ്]. ഓർഡർ കാര്യങ്ങൾ ഞങ്ങൾ പ്രവർത്തിക്കുന്ന ആനിമേഷനുകളുടെ വലിയൊരു ഭാഗം ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. മിക്ക കേസുകളിലും, ഇത് കൂടുതൽ സൗകര്യപ്രദമാണ്. ട്രാൻസ്ഫോർമേഷൻ ആനിമേഷനുകൾ GPU-ത്വരിതപ്പെടുത്താൻ കഴിയുന്നതിനാൽ ഇതിന് ഒരു പ്രകടന നേട്ടവുമുണ്ട്. എന്നാൽ നമ്മൾ പരിവർത്തനങ്ങൾ ഉപയോഗിക്കുകയാണെങ്കിൽ, നമ്മുടെ പരിവർത്തനങ്ങൾ ചെയ്യുന്ന ക്രമം പ്രധാനമാണെന്ന് നാം അംഗീകരിക്കേണ്ടതുണ്ട്. ഒരുപാട്. ഇതുവരെയുള്ള ഞങ്ങളുടെ കീഫ്രെയിമുകളിൽ, ഞങ്ങൾ വ്യക്തിഗത രൂപാന്തരങ്ങൾ ഉപയോഗിച്ചിട്ടുണ്ട്. സ്പെസിഫിക്കേഷൻ അനുസരിച്ച്, ഇവ എല്ലായ്പ്പോഴും ഒരു നിശ്ചിത ക്രമത്തിലാണ് പ്രയോഗിക്കുന്നത്: ആദ്യം, മൂലകം വിവർത്തനം ചെയ്യുന്നു, തുടർന്ന് തിരിക്കുക, തുടർന്ന് സ്കെയിൽ ചെയ്യുക. ഇത് അർത്ഥവത്താണ്, നമ്മളിൽ ഭൂരിഭാഗവും പ്രതീക്ഷിക്കുന്നതും ഇതാണ്. എന്നിരുന്നാലും, നമ്മൾ ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുകയാണെങ്കിൽ, ഫംഗ്ഷനുകൾ എഴുതിയ ക്രമം അവ പ്രയോഗിക്കുന്ന ക്രമമാണ്. ഈ സാഹചര്യത്തിൽ, നമ്മൾ X-അക്ഷത്തിൽ 100 പിക്സൽ എന്തെങ്കിലും നീക്കി അതിനെ 45 ഡിഗ്രി കൊണ്ട് തിരിക്കുകയാണെങ്കിൽ, അത് ആദ്യം 45 ഡിഗ്രി കൊണ്ട് ഭ്രമണം ചെയ്യുകയും 100 പിക്സൽ ചലിപ്പിക്കുകയും ചെയ്യുന്നതുപോലെയല്ല. /* പിങ്ക് സ്ക്വയർ: ആദ്യം വിവർത്തനം ചെയ്യുക, തുടർന്ന് തിരിക്കുക */ .ഉദാഹരണം-ഒന്ന് { രൂപാന്തരം: translateX(100px) തിരിക്കുക(45deg); }
/* പച്ച ചതുരം: ആദ്യം തിരിക്കുക, തുടർന്ന് വിവർത്തനം ചെയ്യുക */ .ഉദാഹരണം-രണ്ട് { രൂപാന്തരപ്പെടുത്തുക: തിരിക്കുക(45ഡിഗ്രി) translateX(100px); }
പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ കാണുക - അമിത് ഷീനിൻ്റെ ഡെമോ 11 [ഫോർക്ക്ഡ്]. എന്നാൽ പരിവർത്തന ക്രമം അനുസരിച്ച്, എല്ലാ വ്യക്തിഗത പരിവർത്തനങ്ങളും - കീഫ്രെയിം ടോക്കണുകൾക്കായി ഞങ്ങൾ ഉപയോഗിച്ചതെല്ലാം - പരിവർത്തന പ്രവർത്തനങ്ങൾക്ക് മുമ്പ് സംഭവിക്കുന്നു. അതിനർത്ഥം നിങ്ങൾ ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടിയിൽ സജ്ജീകരിക്കുന്ന എന്തും ആനിമേഷനുകൾക്ക് ശേഷം സംഭവിക്കും. എന്നാൽ നിങ്ങൾ സജ്ജമാക്കിയാൽ, ഉദാഹരണത്തിന്, kf-സ്പിൻ കീഫ്രെയിമുകൾ ഉപയോഗിച്ച് വിവർത്തനം ചെയ്യുക, ആനിമേഷന് മുമ്പ് വിവർത്തനം സംഭവിക്കും. ഇനിയും ആശയക്കുഴപ്പത്തിലാണോ?! ഇനിപ്പറയുന്ന സന്ദർഭത്തിലെന്നപോലെ, ഒരേ ആനിമേഷനായി സ്റ്റാറ്റിക് മൂല്യങ്ങൾ വ്യത്യസ്ത ഫലങ്ങൾ ഉണ്ടാക്കുന്ന സാഹചര്യങ്ങളിലേക്ക് ഇത് നയിക്കുന്നു:
/* രണ്ട് സ്പിന്നർമാർക്കും പൊതുവായ ആനിമേഷൻ */ .സ്പിന്നർ { ആനിമേഷൻ: kf-spin 1s ലീനിയർ അനന്തം; }
/* പിങ്ക് സ്പിന്നർ: തിരിക്കുന്നതിന് മുമ്പ് വിവർത്തനം ചെയ്യുക (വ്യക്തിഗത രൂപാന്തരം) */ .സ്പിന്നർ-പിങ്ക് { വിവർത്തനം ചെയ്യുക: 100% 50%; }
/* ഗ്രീൻ സ്പിന്നർ: തിരിക്കുക, തുടർന്ന് വിവർത്തനം ചെയ്യുക (ഫംഗ്ഷൻ ഓർഡർ) */ .സ്പിന്നർ-പച്ച { രൂപാന്തരം: വിവർത്തനം (100%, 50%); }
അമിത് ഷീനിൻ്റെ പെൻ കീഫ്രെയിംസ് ടോക്കണുകൾ - ഡെമോ 12 [ഫോർക്ക്ഡ്] കാണുക. ആദ്യത്തെ സ്പിന്നർ (പിങ്ക്) kf-സ്പിന്നിൻ്റെ റൊട്ടേറ്റിന് മുമ്പ് സംഭവിക്കുന്ന ഒരു വിവർത്തനം ലഭിക്കുന്നത് നിങ്ങൾക്ക് കാണാൻ കഴിയും, അതിനാൽ അത് ആദ്യം അതിൻ്റെ സ്ഥാനത്തേക്ക് നീങ്ങുകയും പിന്നീട് കറങ്ങുകയും ചെയ്യുന്നു. രണ്ടാമത്തെ സ്പിന്നറിന് (പച്ച) ഒരു വിവർത്തനം () ഫംഗ്ഷൻ ലഭിക്കുന്നു, അത് വ്യക്തിഗത രൂപാന്തരത്തിന് ശേഷം സംഭവിക്കുന്നു, അതിനാൽ മൂലകം ആദ്യം കറങ്ങുന്നു, തുടർന്ന് അതിൻ്റെ നിലവിലെ കോണുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ നീങ്ങുന്നു, നമുക്ക് ആ വിശാലമായ പരിക്രമണ പ്രഭാവം ലഭിക്കും. ഇല്ല, ഇതൊരു ബഗ് അല്ല. ഒന്നിലധികം ആനിമേഷനുകളിലോ ഒന്നിലധികം രൂപാന്തരങ്ങളിലോ പ്രവർത്തിക്കുമ്പോൾ CSS-നെ കുറിച്ച് നമ്മൾ അറിഞ്ഞിരിക്കേണ്ട കാര്യങ്ങളിൽ ഒന്ന് മാത്രമാണിത്. ആവശ്യമെങ്കിൽ, നിങ്ങൾക്ക് റൊട്ടേറ്റ്() ഫംഗ്ഷൻ ഉപയോഗിച്ച് ഘടകങ്ങളെ തിരിക്കുന്ന kf-spin-alt കീഫ്രെയിമുകളുടെ ഒരു അധിക സെറ്റ് സൃഷ്ടിക്കാനും കഴിയും. കുറഞ്ഞ ചലനം ഞങ്ങൾ ഇതര കീഫ്രെയിമുകളെക്കുറിച്ച് സംസാരിക്കുമ്പോൾ, "ആനിമേഷൻ ഇല്ല" ഓപ്ഷൻ അവഗണിക്കാൻ ഞങ്ങൾക്ക് കഴിയില്ല. കീഫ്രെയിം ടോക്കണുകൾ ഉപയോഗിക്കുന്നതിൻ്റെ ഏറ്റവും വലിയ നേട്ടങ്ങളിലൊന്ന്, പ്രവേശനക്ഷമത ചുട്ടുപഴുപ്പിക്കാമെന്നതാണ്, മാത്രമല്ല ഇത് ചെയ്യാൻ വളരെ എളുപ്പമാണ്. ആക്സസിബിലിറ്റി മനസ്സിൽ വെച്ച് ഞങ്ങളുടെ കീഫ്രെയിമുകൾ രൂപകൽപ്പന ചെയ്യുന്നതിലൂടെ, കുറഞ്ഞ ചലനം ഇഷ്ടപ്പെടുന്ന ഉപയോക്താക്കൾക്ക് അധിക ജോലിയോ കോഡ് ഡ്യൂപ്ലിക്കേഷനോ ഇല്ലാതെ സുഗമവും ശ്രദ്ധ തിരിക്കുന്നതുമായ അനുഭവം ലഭിക്കുമെന്ന് ഞങ്ങൾക്ക് ഉറപ്പാക്കാനാകും. "കുറച്ച ചലനം" എന്നതിൻ്റെ കൃത്യമായ അർത്ഥം ഒരു ആനിമേഷനിൽ നിന്ന് മറ്റൊന്നിലേക്കും ഒരു പ്രോജക്റ്റിൽ നിന്ന് പ്രോജക്റ്റിലേക്കും അൽപ്പം മാറും, എന്നാൽ ഇവിടെ ശ്രദ്ധിക്കേണ്ട ചില പ്രധാന പോയിൻ്റുകൾ ഉണ്ട്: കീഫ്രെയിമുകൾ നിശബ്ദമാക്കുന്നു ചില ആനിമേഷനുകൾ മൃദുവാക്കാനോ മന്ദഗതിയിലാക്കാനോ കഴിയുമെങ്കിലും, ചലനം കുറയ്ക്കാൻ അഭ്യർത്ഥിക്കുമ്പോൾ പൂർണ്ണമായും അപ്രത്യക്ഷമാകുന്ന മറ്റുള്ളവയുണ്ട്. പൾസ് ആനിമേഷനുകൾ ഒരു നല്ല ഉദാഹരണമാണ്. ഈ ആനിമേഷനുകൾ കുറഞ്ഞ ചലന മോഡിൽ പ്രവർത്തിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കാൻ, ഉചിതമായ മീഡിയ അന്വേഷണത്തിൽ നമുക്ക് അവയെ പൊതിയാം.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { { മുതൽ സ്കെയിൽ: var (--kf-pulse-scale-from, 1); അതാര്യത: var (--kf-pulse-opacity-from, 1); } വരെ { സ്കെയിൽ: var (--kf-pulse-scale-to, 1); അതാര്യത:var (--kf-pulse-opacity-to, 1); } } }
കുറയ്ക്കാൻ മുൻഗണന-കുറച്ച ചലനം സജ്ജമാക്കിയ ഉപയോക്താക്കൾക്ക് ആനിമേഷൻ കാണാനാകില്ലെന്നും അവരുടെ മുൻഗണനയുമായി പൊരുത്തപ്പെടുന്ന അനുഭവം ലഭിക്കുമെന്നും ഇത് ഉറപ്പാക്കുന്നു. ഇൻസ്റ്റൻ്റ് ഇൻ പ്രവേശന ആനിമേഷനുകൾ പോലുള്ള ചില കീഫ്രെയിമുകൾ നമുക്ക് നീക്കം ചെയ്യാൻ കഴിയില്ല. മൂല്യം മാറണം, ആനിമേറ്റ് ചെയ്യണം; അല്ലെങ്കിൽ, മൂലകത്തിന് ശരിയായ മൂല്യങ്ങൾ ഉണ്ടാകില്ല. എന്നാൽ കുറഞ്ഞ ചലനത്തിൽ, പ്രാരംഭ മൂല്യത്തിൽ നിന്നുള്ള ഈ പരിവർത്തനം തൽക്ഷണമായിരിക്കണം. ഇത് നേടുന്നതിന്, മൂല്യം ഉടൻ തന്നെ അവസാന നിലയിലേക്ക് കുതിക്കുന്ന കീഫ്രെയിമുകളുടെ ഒരു അധിക സെറ്റ് ഞങ്ങൾ നിർവ്വചിക്കും. ഇവ ഞങ്ങളുടെ ഡിഫോൾട്ട് കീഫ്രെയിമുകളായി മാറുന്നു. തുടർന്ന്, മുൻ ഉദാഹരണത്തിലെന്നപോലെ, മുൻഗണന-കുറച്ച-മോഷൻ നോ-പ്രെഫറൻസ് എന്നതിനായുള്ള മീഡിയ അന്വേഷണത്തിനുള്ളിൽ ഞങ്ങൾ സാധാരണ കീഫ്രെയിമുകൾ ചേർക്കും. /* കുറഞ്ഞ ചലനത്തിനായി തൽക്ഷണം പോപ്പ് ഇൻ ചെയ്യുക */ @keyframes kf-zoom { മുതൽ, { വരെ സ്കെയിൽ: var (--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* യഥാർത്ഥ സൂം കീഫ്രെയിമുകൾ */ @keyframes kf-zoom { { മുതൽ സ്കെയിൽ: var (--kf-zoom-from, 0.8); } വരെ { സ്കെയിൽ: var (--kf-zoom-to, 1); } } }
ഈ രീതിയിൽ, കുറഞ്ഞ ചലനം ഇഷ്ടപ്പെടുന്ന ഉപയോക്താക്കൾക്ക് മൂലകം അതിൻ്റെ അന്തിമ അവസ്ഥയിൽ തൽക്ഷണം ദൃശ്യമാകുന്നത് കാണും, അതേസമയം മറ്റെല്ലാവർക്കും ആനിമേറ്റഡ് പരിവർത്തനം ലഭിക്കുന്നു. മൃദു സമീപനം ചില ചലനങ്ങൾ നിലനിർത്താൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്ന സന്ദർഭങ്ങളുണ്ട്, എന്നാൽ യഥാർത്ഥ ആനിമേഷനേക്കാൾ വളരെ മൃദുവും ശാന്തവുമാണ്. ഉദാഹരണത്തിന്, നമുക്ക് ഒരു ബൗൺസ് പ്രവേശന കവാടത്തിന് പകരം സൌമ്യമായ ഫേഡ്-ഇൻ നൽകാം.
@keyframes kf-bounce { /* കുറഞ്ഞ ചലനത്തിനുള്ള സോഫ്റ്റ് ഫേഡ്-ഇൻ */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* യഥാർത്ഥ ബൗൺസ് കീഫ്രെയിമുകൾ */ } }
ഇപ്പോൾ, കുറഞ്ഞ ചലനം പ്രവർത്തനക്ഷമമാക്കിയിട്ടുള്ള ഉപയോക്താക്കൾക്ക് ഇപ്പോഴും ദൃശ്യബോധം ലഭിക്കുന്നു, പക്ഷേ ഒരു ബൗൺസിൻ്റെയോ ഇലാസ്റ്റിക് ആനിമേഷൻ്റെയോ തീവ്രമായ ചലനം ഇല്ലാതെ. ബിൽഡിംഗ് ബ്ലോക്കുകൾ ഉള്ളതിനാൽ, അവയെ എങ്ങനെ യഥാർത്ഥ വർക്ക്ഫ്ലോയുടെ ഭാഗമാക്കാം എന്നതാണ് അടുത്ത ചോദ്യം. ഫ്ലെക്സിബിൾ കീഫ്രെയിമുകൾ എഴുതുന്നത് ഒരു കാര്യമാണ്, എന്നാൽ ഒരു വലിയ പ്രോജക്റ്റിലുടനീളം അവയെ വിശ്വസനീയമാക്കുന്നതിന് എനിക്ക് കഠിനമായ രീതിയിൽ പഠിക്കേണ്ട കുറച്ച് തന്ത്രങ്ങൾ ആവശ്യമാണ്. നടപ്പാക്കൽ തന്ത്രങ്ങളും മികച്ച രീതികളും കീഫ്രെയിംസ് ടോക്കണുകളുടെ ഒരു സോളിഡ് ലൈബ്രറി നമുക്ക് ലഭിച്ചുകഴിഞ്ഞാൽ, അവയെ എങ്ങനെ ദൈനംദിന ജോലികളിലേക്ക് കൊണ്ടുവരാം എന്നതാണ് യഥാർത്ഥ വെല്ലുവിളി.
എല്ലാ കീഫ്രെയിമുകളും ഒറ്റയടിക്ക് ഉപേക്ഷിച്ച് പ്രശ്നം പരിഹരിച്ചതായി പ്രഖ്യാപിക്കുക എന്നതാണ് പ്രലോഭനം, എന്നാൽ പ്രായോഗികമായി, ക്രമാനുഗതമായ ദത്തെടുക്കലിൽ നിന്നാണ് മികച്ച ഫലങ്ങൾ ലഭിക്കുന്നതെന്ന് ഞാൻ കണ്ടെത്തി. ഫേഡ് അല്ലെങ്കിൽ സ്ലൈഡ് പോലുള്ള ഏറ്റവും സാധാരണമായ ആനിമേഷനുകൾ ഉപയോഗിച്ച് ആരംഭിക്കുക. വലിയ റീറൈറ്റുകൾ ആവശ്യമില്ലാതെ ഉടനടി മൂല്യം കാണിക്കുന്ന എളുപ്പമുള്ള വിജയങ്ങളാണിവ. പേരിടൽ ശ്രദ്ധ അർഹിക്കുന്ന മറ്റൊരു പോയിൻ്റാണ്. ഒരു സ്ഥിരതയുള്ള പ്രിഫിക്സ് അല്ലെങ്കിൽ നെയിംസ്പെയ്സ് ഏതൊക്കെ ആനിമേഷനുകളാണ് ടോക്കണുകളാണെന്നും ഏതൊക്കെ ലോക്കൽ വൺ-ഓഫുകളാണെന്നും വ്യക്തമാക്കുന്നു. ഇത് ആകസ്മികമായ കൂട്ടിയിടികൾ തടയുകയും പുതിയ ടീം അംഗങ്ങളെ ഒറ്റനോട്ടത്തിൽ പങ്കിട്ട സിസ്റ്റം തിരിച്ചറിയാൻ സഹായിക്കുകയും ചെയ്യുന്നു. കോഡ് പോലെ തന്നെ പ്രധാനമാണ് ഡോക്യുമെൻ്റേഷനും. ഓരോ കീഫ്രെയിം ടോക്കണിനു മുകളിലുള്ള ഒരു ചെറിയ അഭിപ്രായം പോലും പിന്നീട് ഊഹിക്കുന്നത് മണിക്കൂറുകൾ ലാഭിക്കാൻ കഴിയും. ഒരു ഡെവലപ്പർക്ക് ടോക്കൺ ഫയൽ തുറക്കാനും അവർക്ക് ആവശ്യമുള്ള ഇഫക്റ്റിനായി സ്കാൻ ചെയ്യാനും ഉപയോഗ പാറ്റേൺ നേരിട്ട് അവയുടെ ഘടകത്തിലേക്ക് പകർത്താനും കഴിയണം. ഫ്ലെക്സിബിലിറ്റിയാണ് ഈ സമീപനത്തെ പ്രയത്നത്തിന് അർഹമാക്കുന്നത്. വിവേകപൂർണ്ണമായ ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടികൾ തുറന്നുകാട്ടുന്നതിലൂടെ, സിസ്റ്റത്തെ തകർക്കാതെ ആനിമേഷൻ പൊരുത്തപ്പെടുത്താൻ ഞങ്ങൾ ടീമുകൾക്ക് ഇടം നൽകുന്നു. അതേ സമയം, സങ്കീർണ്ണമാക്കാതിരിക്കാൻ ശ്രമിക്കുക. പ്രാധാന്യമുള്ള നോബുകൾ നൽകുകയും ബാക്കിയുള്ളവ അഭിപ്രായത്തിൽ സൂക്ഷിക്കുകയും ചെയ്യുക. അവസാനമായി, പ്രവേശനക്ഷമത ഓർക്കുക. എല്ലാ ആനിമേഷനും ചലനം കുറയ്ക്കാനുള്ള ബദൽ ആവശ്യമില്ല, പക്ഷേ പലർക്കും അത് ആവശ്യമാണ്. ഈ അഡ്ജസ്റ്റ്മെൻ്റുകൾ നേരത്തെ തന്നെ ബേക്കിംഗ് ചെയ്യുക എന്നതിനർത്ഥം ഞങ്ങൾ പിന്നീട് ഒരിക്കലും അവ പുനഃക്രമീകരിക്കേണ്ടതില്ല എന്നാണ്, മാത്രമല്ല ഞങ്ങളുടെ ഉപയോക്താക്കൾ അത് പരാമർശിച്ചില്ലെങ്കിൽ പോലും ശ്രദ്ധിക്കുന്ന ഒരു തലം കാണിക്കുന്നു.
എൻ്റെ അനുഭവത്തിൽ, ഞങ്ങളുടെ ഡിസൈൻ ടോക്കണുകളുടെ വർക്ക്ഫ്ലോയുടെ ഭാഗമായി കീഫ്രെയിം ടോക്കണുകളെ പരിഗണിക്കുന്നതാണ് അവയെ ഒട്ടിപ്പിടിക്കുന്നത്. അവ സ്ഥാപിച്ചുകഴിഞ്ഞാൽ, അവ പ്രത്യേക ഇഫക്റ്റുകൾ പോലെ തോന്നുന്നത് നിർത്തുകയും ഡിസൈൻ ഭാഷയുടെ ഭാഗമാവുകയും ചെയ്യുന്നു, ഉൽപ്പന്നം എങ്ങനെ നീങ്ങുകയും പ്രതികരിക്കുകയും ചെയ്യുന്നു എന്നതിൻ്റെ സ്വാഭാവിക വിപുലീകരണമാണിത്. പൊതിയുന്നു ആനിമേഷനുകൾ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിൻ്റെ ഏറ്റവും സന്തോഷകരമായ ഭാഗങ്ങളിൽ ഒന്നായിരിക്കാം, എന്നാൽ ഘടനയില്ലാതെ അവ നിരാശയുടെ ഏറ്റവും വലിയ ഉറവിടങ്ങളിലൊന്നായി മാറും. കീഫ്രെയിമുകളെ ടോക്കണുകളായി കണക്കാക്കുന്നതിലൂടെ, നിങ്ങൾ സാധാരണയായി കുഴപ്പമുള്ളതും കൈകാര്യം ചെയ്യാൻ ബുദ്ധിമുട്ടുള്ളതുമായ എന്തെങ്കിലും എടുത്ത് അതിനെ വ്യക്തവും പ്രവചിക്കാവുന്നതുമായ ഒരു സംവിധാനമാക്കി മാറ്റുന്നു. യഥാർത്ഥ മൂല്യം കോഡിൻ്റെ ഏതാനും വരികൾ സംരക്ഷിക്കുന്നതിൽ മാത്രമല്ല. നിങ്ങൾ ഒരു ഫേഡ്, സ്ലൈഡ്, സൂം അല്ലെങ്കിൽ സ്പിൻ എന്നിവ ഉപയോഗിക്കുമ്പോൾ, അത് പ്രോജക്റ്റിലുടനീളം എങ്ങനെ പ്രവർത്തിക്കുമെന്ന് നിങ്ങൾക്ക് കൃത്യമായി അറിയാം. അനന്തമായ വ്യതിയാനങ്ങളുടെ കുഴപ്പങ്ങളില്ലാതെ ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടികളിൽ നിന്ന് വരുന്ന വഴക്കത്തിലാണ് ഇത്. അതുപോലെ ചേർക്കുന്നതിനുപകരം അടിത്തറയിൽ നിർമ്മിച്ച പ്രവേശനക്ഷമതയിലാണ് ഇത്ഒരു അനന്തര ചിന്ത. ഈ ആശയങ്ങൾ വ്യത്യസ്ത ടീമുകളിലും വ്യത്യസ്ത കോഡ്ബേസുകളിലും പ്രവർത്തിക്കുന്നത് ഞാൻ കണ്ടിട്ടുണ്ട്, പാറ്റേൺ എപ്പോഴും സമാനമാണ്. ടോക്കണുകൾ നിലവിൽ വന്നുകഴിഞ്ഞാൽ, കീഫ്രെയിമുകൾ ചിതറിക്കിടക്കുന്ന തന്ത്രങ്ങളുടെ ശേഖരമായി മാറുകയും ഡിസൈൻ ഭാഷയുടെ ഭാഗമാവുകയും ചെയ്യും. അവർ ഉൽപ്പന്നത്തെ കൂടുതൽ ആസൂത്രിതവും കൂടുതൽ സ്ഥിരതയുള്ളതും കൂടുതൽ സജീവവുമാക്കുന്നു. നിങ്ങൾ ഈ ലേഖനത്തിൽ നിന്ന് ഒരു കാര്യം എടുക്കുകയാണെങ്കിൽ, അത് ഇതായിരിക്കട്ടെ: നിറങ്ങൾ, ടൈപ്പോഗ്രാഫി, സ്പെയ്സിംഗ് എന്നിവയ്ക്ക് ഞങ്ങൾ ഇതിനകം നൽകുന്ന അതേ പരിചരണവും ഘടനയും ആനിമേഷനുകൾ അർഹിക്കുന്നു. കീഫ്രെയിം ടോക്കണുകളിലെ ചെറിയ നിക്ഷേപം നിങ്ങളുടെ ഇൻ്റർഫേസ് ചലിക്കുന്ന ഓരോ തവണയും പ്രതിഫലം നൽകും.
