CSS മോഷൻ പാത്ത് സെഗ്‌മെന്റുകൾ മാസ്റ്ററിംഗ്: പാത്ത് പോർഷൻ ആനിമേഷൻ ഒരു ആഴത്തിലുള്ള പഠനം

വെബ് ഡിസൈൻ, വികസന മേഖലയിൽ, ഉപയോക്തൃ അനുഭവത്തിന് ചലനം ഒരു പ്രധാന ഘടകമായി മാറിയിരിക്കുന്നു. ശ്രദ്ധ ആകർഷിക്കാനും, പ്രതികരണങ്ങൾ നൽകാനും, സ്ഥിരമായ രൂപങ്ങൾക്ക് സാധിക്കാത്ത വിധത്തിൽ കഥകൾ പറയാനും ഇത് സഹായിക്കുന്നു. വർഷങ്ങളോളം, സങ്കീർണ്ണമായ ചലനങ്ങൾക്കായി ഭാരമുള്ള ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറികളോ സമർപ്പിത ആനിമേഷൻ ടൂളുകളോ ആവശ്യമായിരുന്നു. എന്നാൽ, CSS മോഷൻ പാത്ത് മൊഡ്യൂൾ ഒരു ശക്തമായ, നേറ്റീവ് പരിഹാരമായി ഉയർന്നുവന്നിരിക്കുന്നു. ഇത് ഡെവലപ്പർമാരെ അവരുടെ സ്റ്റൈൽഷീറ്റുകളിൽ നേരിട്ട് ഇഷ്ടാനുസൃതമായി നിർവചിച്ച പാതകളിലൂടെ എലമെന്റുകളെ ആനിമേറ്റ് ചെയ്യാൻ അനുവദിക്കുന്നു. മികച്ച പ്രകടനമുള്ള, ഡിക്ലറേറ്റീവ് ആനിമേഷനുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ഗെയിം-ചേഞ്ചർ ആണിത്.

മിക്ക ട്യൂട്ടോറിയലുകളും ഒരു എലമെന്റിനെ ഒരു പാതയുടെ മുഴുവനിലൂടെയും, തുടക്കം മുതൽ അവസാനം വരെ ആനിമേറ്റ് ചെയ്തുകൊണ്ടാണ് മോഷൻ പാത്ത് പരിചയപ്പെടുത്തുന്നത്. എന്നാൽ നിങ്ങളുടെ സർഗ്ഗാത്മക ദർശനത്തിന് കൂടുതൽ സൂക്ഷ്മത ആവശ്യമായി വരുമ്പോൾ എന്തു സംഭവിക്കും? ഒരു സങ്കീർണ്ണമായ രൂപത്തിന്റെ ഒരൊറ്റ വളവിലൂടെ മാത്രം ഒരു വസ്തു നീങ്ങണമെന്നോ, ഇടവേളയെടുത്ത് മറ്റൊരു ഭാഗത്തിലൂടെ തുടരണം എന്നോ ആവശ്യമാണെങ്കിൽ? യഥാർത്ഥ വൈദഗ്ദ്ധ്യം ഇവിടെയാണ്: പാത മാത്രമല്ല, യാത്രയുടെ പ്രത്യേക ഭാഗങ്ങളെ നിയന്ത്രിക്കുക.

ഈ സമഗ്രമായ ഗൈഡ് ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്കും ഡിസൈൻ ചെയ്യുന്നവർക്കും വേണ്ടിയുള്ളതാണ്. ഏതെങ്കിലും ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഇല്ലാതെ, CSS മോഷൻ പാത്തിന്റെ പ്രത്യേക ഭാഗങ്ങളിലൂടെ എലമെന്റുകളെ ആനിമേറ്റ് ചെയ്യുന്നതിനുള്ള സാങ്കേതിക വിദ്യകൾ ഞങ്ങൾ വിശദീകരിക്കും. ഇത് ക്രിയാത്മകവും ആവിഷ്കരിക്കാവുന്നതുമായ വെബ് ആനിമേഷനുകൾക്ക് ഒരു പുതിയ തലം നൽകുന്നു.

അടിസ്ഥാനങ്ങൾ: CSS മോഷൻ പാത്തിന്റെ ഒരു ദ്രുത ടൂർ

ഒരു സെഗ്‌മെന്റ് നിയന്ത്രിക്കുന്നതിന് മുമ്പ്, മോഷൻ പാത്ത് പ്രവർത്തിക്കുന്ന പ്രധാന പ്രോപ്പർട്ടികളെക്കുറിച്ച് ഞങ്ങൾക്ക് നല്ല ധാരണയുണ്ടായിരിക്കണം. നിങ്ങൾക്ക് അവ പരിചിതമാണെങ്കിൽ, ഇതൊരു ചെറിയ പുനരവലോകനമായി കണക്കാക്കുക; നിങ്ങൾ പുതിയ ആളാണെങ്കിൽ, ഇത് നിങ്ങളുടെ അത്യാവശ്യമായ പ്രാരംഭ ഘട്ടമാണ്.

പ്രധാന പ്രോപ്പർട്ടികൾ

CSS മോഷൻ പാത്ത് ലെവൽ 1 സ്പെസിഫിക്കേഷൻ, ഒരു എലമെന്റിന്റെ ചലനം നിർവചിക്കുന്നതിനും നിയന്ത്രിക്കുന്നതിനും ഒരുമിച്ച് പ്രവർത്തിക്കുന്ന പ്രോപ്പർട്ടികളുടെ ഒരു കൂട്ടം നിർവചിക്കുന്നു. ഏറ്റവും നിർണായകമായവ ഇവയാണ്:

• offset-path: ഇത് മൊഡ്യൂളിന്റെ ഹൃദയമാണ്. എലമെന്റ് പിന്തുടരുന്ന ജ്യാമിതീയ പാത ഇത് നിർവചിക്കുന്നു. ഇത് നിർവചിക്കാനുള്ള ഏറ്റവും സാധാരണവും ശക്തവുമായ മാർഗ്ഗം path() ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നതാണ്, ഇത് ഒരു SVG പാത്ത് ഡാറ്റാ സ്ട്രിംഗ് സ്വീകരിക്കുന്നു. ഇതിനർത്ഥം നിങ്ങൾക്ക് ഏതെങ്കിലും വെക്റ്റർ ഗ്രാഫിക്സ് എഡിറ്ററിൽ (Illustrator, Inkscape, അല്ലെങ്കിൽ Figma പോലുള്ളവ) ഒരു സങ്കീർണ്ണമായ പാത രൂപകൽപ്പന ചെയ്യാം, SVG പാത്ത് ഡാറ്റ പകർത്താം, അത് നേരിട്ട് നിങ്ങളുടെ CSS-ലേക്ക് ഒട്ടിക്കാം.
• offset-distance: ഇതിനെ ആനിമേഷന്റെ പുരോഗതി ബാറായി പരിഗണിക്കുക. ഇത് offset-path-ലൂടെ എലമെന്റിന്റെ സ്ഥാനം വ്യക്തമാക്കുന്നു. 0% എന്ന മൂല്യം എലമെന്റിനെ പാതയുടെ തുടക്കത്തിൽ സ്ഥാപിക്കുന്നു, അതേസമയം 100% അതിനെ അവസാനം സ്ഥാപിക്കുന്നു. ഈ പ്രോപ്പർട്ടി ആനിമേറ്റ് ചെയ്യുന്നതാണ് ചലനം സൃഷ്ടിക്കുന്നത്.
• offset-rotate: പാതയിലൂടെ ചലിക്കുമ്പോൾ എലമെന്റിന്റെ ദിശാബോധം ഈ പ്രോപ്പർട്ടി നിയന്ത്രിക്കുന്നു. ഡിഫോൾട്ടായി, എലമെന്റ് തിരിയുകയില്ല. auto എന്ന് സജ്ജീകരിക്കുന്നത് എലമെന്റിന്റെ ബേസ്‌ലൈൻ പാതയുടെ ദിശയിലേക്ക് ക്രമീകരിക്കും, ഇത് റോഡുകളിലെ കാറുകൾ അല്ലെങ്കിൽ ആകാശത്തിലെ വിമാനങ്ങൾ പോലുള്ള കാര്യങ്ങൾക്ക് അനുയോജ്യമാണ്. നിങ്ങൾക്ക് ഒരു കോണും ചേർക്കാം, ഉദാഹരണത്തിന് auto 90deg, എലമെന്റ് പാതയുടെ ദിശയ്ക്ക് ലംബമായിരിക്കാൻ.
• offset-anchor: എലമെന്റിന്റെ ഏത് ഭാഗമാണ് പാതയിലേക്ക് ഉറപ്പിക്കേണ്ടതെന്ന് ഇത് നിർവചിക്കുന്നു. ഡിഫോൾട്ട് auto ആണ്, ഇത് 50% 50% അല്ലെങ്കിൽ എലമെന്റിന്റെ കേന്ദ്രത്തിന് തുല്യമാണ്. നിങ്ങളുടെ ട്രാജക്ടറിയിൽ എലമെന്റ് എങ്ങനെ "പിൻ" ചെയ്യുന്നു എന്ന് മാറ്റാൻ നിങ്ങൾക്ക് മറ്റ് കോർഡിനേറ്റുകൾ (ഉദാ. മുകളിൽ-ഇടത് കോണിന് 0% 0%) വ്യക്തമാക്കാം.

ഒരു ലളിതമായ "പൂർണ്ണ-പാത" ആനിമേഷൻ ഉദാഹരണം

ഒരു ലളിതമായ വളഞ്ഞ പാതയുടെ തുടക്കം മുതൽ അവസാനം വരെ ഒരു വസ്തുവിനെ ആനിമേറ്റ് ചെയ്യുന്ന ഒരു ക്ലാസിക് ഉദാഹരണത്തിലൂടെ ഈ പ്രോപ്പർട്ടികൾ പ്രവർത്തനക്ഷമമായി കാണാം. സെഗ്‌മെന്റ് നിയന്ത്രണത്തിലേക്ക് കടക്കുന്നതിന് മുമ്പ് ഇത് നമ്മുടെ അടിസ്ഥാനം സ്ഥാപിക്കുന്നു.

<!-- HTML ഘടന -->
<div class="scene">
  <div class="dot"></div>
</div>

<style>
  .scene {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 2em auto;
  }

  .dot {
    width: 20px;
    height: 20px;
    background-color: dodgerblue;
    border-radius: 50%;
    offset-path: path('M 20,100 C 50,20 250,20 280,100');
    animation: move-along-full-path 4s infinite linear;
  }

  @keyframes move-along-full-path {
    from {
      offset-distance: 0%;
    }
    to {
      offset-distance: 100%;
    }
  }
</style>

ഈ ഉദാഹരണത്തിൽ, .dot എലമെന്റിന് ഒരു വളഞ്ഞ offset-path നൽകിയിരിക്കുന്നു. move-along-full-path ആനിമേഷൻ നാല് സെക്കൻഡ് കൊണ്ട് offset-distance 0%-ൽ നിന്ന് 100%-ലേക്ക് മാറ്റുന്നു. ഇത് സ്റ്റാൻഡേർഡ്, അടിസ്ഥാന ഉപയോഗമാണ്. എന്നാൽ നമ്മുടെ ലക്ഷ്യം ഈ ലളിതമായ തുടക്കം-അവസാനം മാതൃകയിൽ നിന്ന് പുറത്തുവരിക എന്നതാണ്.

പ്രധാന വെല്ലുവിളി: ഒരു പ്രത്യേക പാത സെഗ്‌മെന്റ് ആനിമേറ്റ് ചെയ്യുക

യഥാർത്ഥ ലോകം അപൂർവ്വമായി ഒരു ലളിതമായ A-യിൽ നിന്ന് Z-യിലേക്കുള്ള യാത്രയാണ്. ഒരു നഗരത്തിലെ പൊതുഗതാഗത വെബ്സൈറ്റിലെ ഒരു സബ്‌വേ മാപ്പ് സങ്കൽപ്പിക്കുക. നിങ്ങൾക്ക് ട്രെയിനിനെ മുഴുവൻ നഗര ശൃംഖലയിലൂടെയും ആനിമേറ്റ് ചെയ്യാൻ താൽപ്പര്യമില്ല; നിങ്ങൾക്ക് രണ്ട് പ്രത്യേക സ്റ്റേഷനുകൾക്കിടയിൽ അതിന്റെ യാത്ര കാണിക്കണം. അല്ലെങ്കിൽ ഒരു സംവേദനാത്മക ഉൽപ്പന്ന ടൂർ പരിഗണിക്കാം, അവിടെ ഉപയോക്താവിന്റെ ശ്രദ്ധ ഒരു ഉപകരണത്തിന്റെ സ്ക്രീനിൽ നിന്ന് അതിന്റെ ക്യാമറ ലെൻസിലേക്ക് ആകർഷിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു, ഇത് ഉപകരണത്തിന്റെ രൂപരേഖ തയ്യാറാക്കുന്ന ഒരു പാതയുടെ 20% മുതൽ 35% വരെ നീങ്ങുന്നത് പ്രതിനിധീകരിക്കും.

ഈ സാഹചര്യങ്ങൾ സൂക്ഷ്മമായ നിയന്ത്രണത്തിന്റെ ആവശ്യകത ഹൈലൈറ്റ് ചെയ്യുന്നു. ഞങ്ങൾക്ക് ഞങ്ങളുടെ ആനിമേഷനോട് ഇങ്ങനെ പറയാൻ ഒരു വഴി ആവശ്യമാണ്:

• പാതയുടെ യാദൃച്ഛികമായ ഒരു സ്ഥാനത്ത് നിന്ന് ആരംഭിക്കുക (ഉദാ., 25%).
• മറ്റൊരു യാദൃച്ഛിക സ്ഥാനത്ത് അവസാനിക്കുക (ഉദാ., 80%).
• ഈ ഭാഗിക യാത്ര ഞങ്ങളുടെ ആനിമേഷന്റെ മുഴുവൻ സമയത്തും നടപ്പാക്കുക.

ഇവിടെയാണ് CSS കീഫ്രെയിമുകളെക്കുറിച്ചുള്ള ആഴത്തിലുള്ള ധാരണ ഉപയോഗപ്രദമാവുക മാത്രമല്ല, അത്യാവശ്യമാവുകയും ചെയ്യുന്നത്. മാന്ത്രികവിദ്യ പുതിയ, കണ്ടെത്താത്ത CSS പ്രോപ്പർട്ടികളിൽ അല്ല; അത് നമുക്ക് ഇതിനകം അറിയാവുന്ന @keyframes നിയമത്തിനുള്ളിൽ offset-distance പ്രോപ്പർട്ടിയുടെ തന്ത്രപരമായ കൈകാര്യത്തിലാണ്.

പരിഹാരം: കീഫ്രെയിമുകളിലൂടെയുള്ള സൂക്ഷ്മമായ നിയന്ത്രണം

പാതയുടെ ഭാഗങ്ങളെ ആനിമേറ്റ് ചെയ്യുന്നതിനുള്ള താക്കോൽ, @keyframes ബ്ലോക്കിലുള്ള from, to (അല്ലെങ്കിൽ 0%, 100%) മാർക്കറുകൾ, ചലന പാതയുടെ തുടക്കത്തെയും അവസാനത്തെയും മാത്രമല്ല, ആനിമേഷന്റെ സമയപരിധിയെയാണ് സൂചിപ്പിക്കുന്നത് എന്ന് തിരിച്ചറിയുക എന്നതാണ്. ഈ മാർക്കറുകളിലേക്ക് നമുക്ക് ഏത് offset-distance മൂല്യവും നൽകാം.

ടെക്നിക് 1: ഒരു അടിസ്ഥാന സെഗ്‌മെന്റ് ആനിമേറ്റ് ചെയ്യുക

നമുക്ക് നമ്മുടെ മുൻ ഉദാഹരണം മാറ്റിയെഴുതാം. ഡോട്ടിനെ മുഴുവൻ പാതയിലൂടെയും നീക്കുന്നതിന് പകരം, നമ്മൾ അതിനെ മധ്യഭാഗത്തുകൂടി മാത്രം യാത്ര ചെയ്യിക്കാം, പ്രത്യേകിച്ച് 25% അടയാളത്തിൽ നിന്ന് 75% അടയാളത്തിലേക്ക്.

<!-- HTML ഇത് തന്നെ -->
<div class="scene">
  <div class="dot-segment"></div>
</div>

<style>
  /* .scene സ്റ്റൈലുകൾ ഇത് തന്നെ */
  .scene {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 2em auto;
  }

  .dot-segment {
    width: 20px;
    height: 20px;
    background-color: crimson;
    border-radius: 50%;
    /* മുമ്പത്തെപ്പോലെ തന്നെ പാത */
    offset-path: path('M 20,100 C 50,20 250,20 280,100');
    
    /* ആവശ്യമെങ്കിൽ പ്രാരംഭ സ്ഥാനം സജ്ജമാക്കുക */
    offset-distance: 25%;

    /* പുതിയ കീഫ്രെയിമുകൾ ഉപയോഗിച്ച് ആനിമേറ്റ് ചെയ്യുക */
    animation: move-along-segment 4s forwards;
  }

  @keyframes move-along-segment {
    from {
      offset-distance: 25%;
    }
    to {
      offset-distance: 75%;
    }
  }
</style>

പ്രധാന മാറ്റങ്ങൾ നമുക്ക് വിശദമായി പരിശോധിക്കാം:

1. കീഫ്രെയിമുകൾ: 0% മുതൽ 100% വരെ ആനിമേറ്റ് ചെയ്യുന്നതിന് പകരം, move-along-segment കീഫ്രെയിമുകൾ യാത്രയുടെ തുടക്കവും അവസാനവും വ്യക്തമായി നിർവചിക്കുന്നു: യഥാക്രമം offset-distance: 25%, offset-distance: 75%.
2. animation-fill-mode: forwards;: ഇത് വളരെ പ്രധാനപ്പെട്ടതാണ്. ഈ പ്രോപ്പർട്ടി ബ്രൗസറിനോട് പറയുന്നു, ആനിമേഷൻ പൂർത്തിയായ ശേഷം, അന്തിമ കീഫ്രെയിമിന്റെ (to അല്ലെങ്കിൽ 100%) സ്റ്റൈലുകൾ എലമെന്റ് നിലനിർത്തണം. forwards ഇല്ലാതെ, 4 സെക്കൻഡ് ആനിമേഷൻ അവസാനിച്ചതിന് ശേഷം, ഡോട്ട് ആനിമേഷൻ പ്രയോഗിക്കുന്നതിന് മുമ്പുള്ള അതിന്റെ പ്രാരംഭ അവസ്ഥയിലേക്ക് തിരികെ പോകും. ഇത് ഉപയോഗിക്കുന്നതിലൂടെ, ഡോട്ട് 25% മുതൽ 75% വരെ ആനിമേറ്റ് ചെയ്യുകയും തുടർന്ന് 75% അടയാളത്തിൽ തുടരുകയും ചെയ്യുന്നു എന്ന് ഉറപ്പാക്കുന്നു.
3. പ്രാരംഭ അവസ്ഥ (ഓപ്ഷണൽ എന്നാൽ നല്ല രീതി): offset-distance: 25%; നേരിട്ട് എലമെന്റിൽ സജ്ജീകരിക്കുന്നത് ആനിമേഷൻ ആരംഭിക്കുന്നതിന് മുമ്പ് അത് ശരിയായ സ്ഥാനത്ത് തുടങ്ങുമെന്ന് ഉറപ്പാക്കുന്നു.

ഈ ലളിതമായ മാറ്റത്തിലൂടെ, നിങ്ങൾക്ക് അടിസ്ഥാന വിദ്യകൾ ലഭിച്ചു. ആനിമേഷന്റെ മൊത്തം ദൈർഘ്യമായ 4 സെക്കൻഡ് ഇപ്പോൾ പാതയുടെ 50% ദൂരം (25% മുതൽ 75% വരെ) സഞ്ചരിക്കാൻ ഉപയോഗിക്കുന്നു, ഇത് ചലനത്തിന്റെ വ്യാപ്തിയിലും വേഗതയിലും നിങ്ങൾക്ക് കൃത്യമായ നിയന്ത്രണം നൽകുന്നു.

ടെക്നിക് 2: ഒന്നിലധികം ഘട്ടങ്ങളുള്ള യാത്രകൾ ക്രമീകരിക്കുന്നു

ഇനി കൂടുതൽ നൂതനവും പ്രായോഗികവുമായ ഒരു സാഹചര്യം: ഇടവേളകളുള്ള ഒരു ഒന്നിലധികം ഘട്ടങ്ങളുള്ള ആനിമേഷൻ സൃഷ്ടിക്കുന്നു. ഇത് ഗൈഡ് ചെയ്ത ടൂറുകൾ, കഥ പറച്ചിൽ, അല്ലെങ്കിൽ ഘട്ടം ഘട്ടമായുള്ള നിർദ്ദേശങ്ങൾ എന്നിവയ്ക്ക് അനുയോജ്യമാണ്. ഇനിപ്പറയുന്ന കോറിയോഗ്രഫിയോടുകൂടിയ ഒരു ആനിമേഷൻ നമുക്ക് സൃഷ്ടിക്കാം:

• ഘട്ടം 1: തുടക്കത്തിൽ (0%) നിന്ന് 40% അടയാളത്തിലേക്ക് നീങ്ങുക.
• ഘട്ടം 2: 40% അടയാളത്തിൽ ഒരു നിമിഷം നിർത്തിവയ്ക്കുക.
• ഘട്ടം 3: 40% അടയാളത്തിൽ നിന്ന് അവസാന 90% അടയാളത്തിലേക്ക് നീങ്ങുന്നത് തുടരുക.

ഇത് നേടുന്നതിന്, നമ്മുടെ കഥയെ ആനിമേഷന്റെ സമയപരിധിയിൽ മാപ്പ് ചെയ്യാൻ കീഫ്രെയിം ശതമാനങ്ങൾ ആവശ്യമാണ്. നമ്മുടെ മൊത്തം ആനിമേഷൻ ദൈർഘ്യം 10 സെക്കൻഡ് ആണെന്ന് കരുതുക. നമുക്ക് സമയം താഴെപ്പറയുന്ന രീതിയിൽ അനുവദിക്കാം:

• ആദ്യ ചലനം (4s): ആനിമേഷന്റെ സമയപരിധിയുടെ ആദ്യ 40% ഉപയോഗിക്കുക (0% മുതൽ 40% കീഫ്രെയിമുകൾ).
• ഇടവേള (2s): അടുത്ത 20% സമയപരിധി ഉപയോഗിക്കുക (40% മുതൽ 60% കീഫ്രെയിമുകൾ).
• രണ്ടാമത്തെ ചലനം (4s): സമയപരിധിയുടെ അവസാന 40% ഉപയോഗിക്കുക (60% മുതൽ 100% കീഫ്രെയിമുകൾ).

അത് കോഡിലേക്ക് എങ്ങനെ മാറുന്നു എന്നത് ഇതാ:

@keyframes multi-stage-journey {
  /* ഘട്ടം 1: പാതയുടെ 0% മുതൽ 40% വരെ നീങ്ങുക */
  /* ഇത് ആനിമേഷൻ ദൈർഘ്യത്തിന്റെ ആദ്യ 40% സമയത്ത് സംഭവിക്കുന്നു */
  0% {
    offset-distance: 0%;
  }
  40% {
    offset-distance: 40%;
  }

  /* ഘട്ടം 2: ഇടവേള */
  /* പാതയുടെ 40% സ്ഥാനത്ത് നിർത്തുക */
  /* ഇത് ആനിമേഷൻ ദൈർഘ്യത്തിന്റെ 40% നും 60% നും ഇടയിൽ സംഭവിക്കുന്നു */
  60% {
    offset-distance: 40%;
  }

  /* ഘട്ടം 3: പാതയുടെ 40% മുതൽ 90% വരെ നീങ്ങുക */
  /* ഇത് ആനിമേഷൻ ദൈർഘ്യത്തിന്റെ അവസാന 40% സമയത്ത് സംഭവിക്കുന്നു */
  100% {
    offset-distance: 90%;
  }
}

.dot-multi-stage {
  /* ... മറ്റ് സ്റ്റൈലുകൾ ... */
  animation: multi-stage-journey 10s forwards;
}

ഇടവേളയുടെ താക്കോൽ ഒരേ offset-distance മൂല്യമുള്ള രണ്ട് അടുത്തടുത്ത കീഫ്രെയിം അടയാളങ്ങളാണ് (40%, 60%). ആനിമേഷന്റെ സമയപരിധിയുടെ 40% നും 60% നും ഇടയിലുള്ള സമയത്ത്, `offset-distance` മാറുന്നില്ല, ഇത് ചലനത്തിൽ ഒരു മികച്ച ഇടവേള സൃഷ്ടിക്കുന്നു. ഈ ടെക്നിക് നിങ്ങളുടെ ആനിമേഷനുകളുടെ വേഗതയുടെയും താളത്തിന്റെയും സംവിധായക തലത്തിലുള്ള നിയന്ത്രണം നിങ്ങൾക്ക് നൽകുന്നു.

പ്രൊഫഷണൽ വർക്ക്ഫ്ലോകൾക്കുള്ള നൂതനമായ ടെക്നിക്കുകൾ

അടിസ്ഥാനകാര്യങ്ങൾ മാസ്റ്ററിംഗ് ചെയ്യുന്നത് നല്ലതാണ്, എന്നാൽ പ്രൊഫഷണൽ വികസനത്തിന് പരിപാലിക്കാവുന്നതും, ഡൈനാമിക്കും, ലഭ്യമായതുമായ പരിഹാരങ്ങൾ ആവശ്യമാണ്. ചില നൂതനമായ ടെക്നിക്കുകൾ നമുക്ക് പരിശോധിക്കാം.

CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ (വേരിയബിളുകൾ) ഉപയോഗിച്ച് ഡൈനാമിക് സെഗ്‌മെന്റുകൾ

25%, 75% പോലുള്ള മൂല്യങ്ങൾ നിങ്ങളുടെ കീഫ്രെയിമുകളിൽ ഹാർഡ്-കോഡ് ചെയ്യുന്നത് പ്രവർത്തിക്കും, പക്ഷേ അത് വളരെ സൗകര്യപ്രദമല്ല. CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങളുടെ ആനിമേഷൻ സെഗ്‌മെന്റുകൾ ഡൈനാമിക്കായി നിർവചിക്കാൻ നിങ്ങൾക്ക് കഴിയും, ഇത് നിങ്ങളുടെ കോഡ് കൂടുതൽ പുനരുപയോഗിക്കാവുന്നതും അപ്ഡേറ്റ് ചെയ്യാൻ എളുപ്പമുള്ളതുമാക്കുന്നു, പ്രത്യേകിച്ച് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുമ്പോൾ.

.element-dynamic {
  /* സെഗ്‌മെന്റ് എൻഡ്‌പോയിന്റുകൾ വേരിയബിളുകളായി നിർവചിക്കുക */
  --segment-start: 15%;
  --segment-end: 85%;

  offset-path: path('...');
  animation: move-dynamic-segment 5s forwards;
}

@keyframes move-dynamic-segment {
  from {
    offset-distance: var(--segment-start);
  }
  to {
    offset-distance: var(--segment-end);
  }
}

ഈ സമീപനം വളരെ ശക്തമാണ്. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് വ്യത്യസ്ത സ്റ്റാർട്ട്, എൻഡ് വേരിയബിളുകളുള്ള ഒരേ ആനിമേഷൻ ഉപയോഗിക്കുന്ന ഒന്നിലധികം എലമെന്റുകൾ ഉണ്ടാകാം. അല്ലെങ്കിൽ, മാപ്പിൽ ഒരു യാത്രയുടെ വ്യത്യസ്ത ഭാഗങ്ങൾ കാണിക്കുന്നതിന്, വ്യത്യസ്ത ബട്ടണുകളിൽ ക്ലിക്ക് ചെയ്യുന്നതുപോലെ, ഉപയോക്താവിന്റെ ഇടപെടലിന് പ്രതികരണമായി --segment-start, --segment-end എന്നിവ അപ്ഡേറ്റ് ചെയ്യാൻ നിങ്ങൾക്ക് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കാം.

animation-timing-function ഉപയോഗിച്ച് പെർ-സെഗ്‌മെന്റ് ഈസിംഗ്

ചലനം എന്നത് സ്ഥാനം മാത്രമല്ല; അത് സ്വഭാവത്തെക്കുറിച്ചാണ്. ഈസിംഗ് (സമയത്തിനനുസരിച്ച് ഒരു പാരാമീറ്ററിന്റെ മാറ്റത്തിന്റെ നിരക്ക്) നിങ്ങളുടെ ആനിമേഷന് വ്യക്തിത്വം നൽകുന്നു. ഒരു പൊതുവായ തെറ്റിദ്ധാരണ എന്തെന്നാൽ animation-timing-function പ്രോപ്പർട്ടി മുഴുവൻ ആനിമേഷനും മാത്രമാണ് ബാധകമാകുന്നത് എന്നതാണ്. എന്നിരുന്നാലും, ആ കീഫ്രെയിമിലേക്ക് നയിക്കുന്ന മാറ്റത്തെ സ്വാധീനിക്കാൻ നിങ്ങൾക്ക് അത് ഒരു കീഫ്രെയിമിനുള്ളിൽ പ്രഖ്യാപിക്കാം.

നമ്മുടെ ഒന്നിലധികം ഘട്ടങ്ങളുള്ള യാത്രയെ നമുക്ക് മെച്ചപ്പെടുത്താം. ആദ്യ ചലനം വേഗത്തിലാക്കാനും (ഈസ്-ഇൻ), ഇടവേള നിശ്ചലമായിരിക്കാനും, രണ്ടാമത്തെ ചലനം സൗമ്യമായി നിർത്താനും (ഈസ്-ഔട്ട്) നമ്മൾ ആഗ്രഹിക്കുന്നു.

@keyframes multi-stage-eased-journey {
  0% {
    offset-distance: 0%;
    animation-timing-function: ease-in;
  }
  40% {
    offset-distance: 40%;
    /* ഈ ടൈമിംഗ് ഫംഗ്ഷൻ ഇടവേളയ്ക്ക് ബാധകമാണ് */
    animation-timing-function: linear;
  }
  60% {
    offset-distance: 40%;
    /* ഈ ടൈമിംഗ് ഫംഗ്ഷൻ അടുത്ത ചലനത്തിന് ബാധകമാണ് */
    animation-timing-function: ease-out;
  }
  100% {
    offset-distance: 90%;
  }
}

0%, 40%, 60% കീഫ്രെയിം അടയാളങ്ങളിൽ ടൈമിംഗ് ഫംഗ്ഷൻ വ്യക്തമാക്കുന്നതിലൂടെ, ഞങ്ങൾ ആനിമേഷന്റെ ഓരോ പ്രത്യേക ഘട്ടത്തിനും ഈസിംഗ് നിർദ്ദേശിക്കുന്നു: 0-40% ചലനം, 40-60% ഇടവേള, 60-100% ചലനം. ഈ നിയന്ത്രണത്തിന്റെ തലത്തിലുള്ളത് സങ്കീർണ്ണവും സ്വാഭാവികമായി തോന്നുന്നതുമായ ചലനങ്ങൾ സൃഷ്ടിക്കാൻ നമ്മെ അനുവദിക്കുന്നു.

ആക്സസിബിലിറ്റി ആദ്യം: prefers-reduced-motion

ആഗോള പ്രേക്ഷകരുള്ള പ്രൊഫഷണലുകൾ എന്ന നിലയിൽ, എല്ലാവർക്കും ഉപയോഗിക്കാനാകുന്ന അനുഭവങ്ങൾ നിർമ്മിക്കാൻ നമുക്ക് ഉത്തരവാദിത്തമുണ്ട്. ചില ഉപയോക്താക്കൾക്ക്, പ്രത്യേകിച്ച് വെസ്റ്റിബുലാർ ഡിസോർഡേഴ്സ് ഉള്ളവർക്ക്, വലിയ തോതിലുള്ള ആനിമേഷനുകൾ തലകറക്കം, ഓക്കാനം, മറ്റ് ഗൗരവമായ പ്രശ്നങ്ങൾ എന്നിവയ്ക്ക് കാരണമാകും. CSS, prefers-reduced-motion മീഡിയ ക്വറി ഉപയോഗിച്ച് ഉപയോക്തൃ മുൻഗണനകളെ ബഹുമാനിക്കാൻ ലളിതവും ഫലപ്രദവുമായ ഒരു മാർഗ്ഗം നൽകുന്നു.

കുറഞ്ഞ ചലനം അഭ്യർത്ഥിക്കുന്നവർക്കായി ഒരു ബദൽ നൽകുന്ന രീതിയിൽ നിങ്ങളുടെ മോഷൻ പാത്ത് ആനിമേഷനുകൾ എപ്പോഴും പൊതിയുക.

/* ഡിഫോൾട്ടായി ആനിമേഷൻ പ്രയോഗിക്കുക */
.animated-element {
  animation: my-motion-path-animation 5s forwards;
}

/* കുറഞ്ഞ ചലനം ഇഷ്ടപ്പെടുന്ന ഉപയോക്താക്കൾക്കായി ഇത് ഓവർറൈഡ് ചെയ്യുക */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    /* ഓപ്ഷണലായി, നിങ്ങൾക്ക് ഇതിനെ ഒരു ലളിതമായ, ശ്രദ്ധ മാറ്റാത്ത ഫേഡ്-ഇൻ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാം */
    /* opacity: 0; */
    /* animation: fade-in 1s forwards; */
  }
}

ഈ ചെറിയ കൂട്ടിച്ചേർക്കൽ നിങ്ങളുടെ പ്രേക്ഷകരിലെ ഒരു കാര്യമായ ഭാഗത്തിന് വലിയ മാറ്റം വരുത്തുന്നു. ഇത് ആധുനിക, ഉത്തരവാദിത്തമുള്ള വെബ് വികസനത്തിന്റെ നിർബന്ധമായ ഭാഗമാണ്.

പ്രായോഗിക ഉപയോഗങ്ങളും ലോകമെമ്പാടുമുള്ള ഉപയോഗ സാഹചര്യങ്ങളും

സിദ്ധാന്തം മൂല്യവത്താണ്, എന്നാൽ ഈ വിദ്യകളെ പ്രായോഗികവും അന്താരാഷ്ട്ര തലത്തിൽ മനസ്സിലാക്കാവുന്നതുമായ സാഹചര്യങ്ങളുമായി ബന്ധിപ്പിക്കാം.

ഇ-കൊമേഴ്‌സ്: ഉൽപ്പന്ന സവിശേഷത ഹൈലൈറ്റിംഗ്

ഒരു പുതിയ ആഗോള സ്മാർട്ട്‌ഫോണിനായുള്ള ഉൽപ്പന്ന പേജ് സങ്കൽപ്പിക്കുക. സ്റ്റാറ്റിക് ബുള്ളറ്റ് പോയിന്റുകൾക്ക് പകരം, നിങ്ങൾക്ക് ഉപകരണത്തിന്റെ സിൽഹൗട്ട് ട്രേസ് ചെയ്യുന്ന ഒരു offset-path നിർവചിക്കാം. അപ്പോൾ ഒരു ആനിമേറ്റഡ് ഹോട്ട്‌സ്‌പോട്ടിന് സ്ക്രീനിന്റെ അറ്റത്ത് നിന്ന് (ഉദാ., 10%-30%) യാത്ര ചെയ്യാം, പുതിയ ക്യാമറ സിസ്റ്റത്തിൽ നിർത്താം (30% ൽ നിർത്തുക), തുടർന്ന് ഹൈ-സ്പീഡ് ചാർജിംഗ് പോർട്ട് (40%-60%) ഹൈലൈറ്റ് ചെയ്യാൻ വളവിലൂടെ തുടരാം. ഇത് ഡൈനാമിക്, ആകർഷകമായ, വിവരദായകമായ ഒരു ഉൽപ്പന്ന ടൂർ സൃഷ്ടിക്കുന്നു.

ഗതാഗതം & ലോജിസ്റ്റിക്സ്: ഒരു യാത്ര ദൃശ്യവൽക്കരിക്കുന്നു

ഏതൊരു അന്താരാഷ്ട്ര ഷിപ്പിംഗ് കമ്പനിക്കും, എയർലൈനിനും, അല്ലെങ്കിൽ യാത്രാ ബ്ലോഗിനും, റൂട്ടുകൾ ദൃശ്യവൽക്കരിക്കുന്നത് പ്രധാനമാണ്. ഒരു വിമാനമോ കപ്പലോ ലോകത്തിന്റെ ഭൂപടത്തിലൂടെ ആനിമേറ്റ് ചെയ്യാൻ കഴിയും. സെഗ്‌മെന്റ് ആനിമേഷൻ ഉപയോഗിച്ച്, ടോക്കിയോയിൽ നിന്ന് സിംഗപ്പൂരിലേക്കുള്ള ഒരു ഫ്ലൈറ്റ് (സെഗ്‌മെന്റ് 1), ഇടവേള കാണിക്കുക, തുടർന്ന് സിഡ്‌നിയിലേക്കുള്ള കണക്ഷൻ ഫ്ലൈറ്റ് ആനിമേറ്റ് ചെയ്യുക (സെഗ്‌മെന്റ് 2) എന്നിവ നിങ്ങൾക്ക് കാണിക്കാൻ കഴിയും. ഇത് ഭാഷാപരമായ തടസ്സങ്ങൾ ഇല്ലാത്ത വ്യക്തവും, ദൃശ്യപരവുമായ കഥ പറച്ചിൽ നൽകുന്നു.

ഉപയോക്തൃ ഇൻ്റർഫേസ് ഫീഡ്‌ബാക്ക്: ഉപയോക്താവിനെ നയിക്കുന്നു

ഒരു ഉപയോക്താവ് ഒരു പ്രവർത്തനം പൂർത്തിയാക്കുമ്പോൾ, വ്യക്തമായ ഫീഡ്‌ബാക്ക് അത്യാവശ്യമാണ്. ഒരു വെബ് ആപ്ലിക്കേഷനിലെ "സേവ്" ബട്ടണിൽ ഉപയോക്താവ് ക്ലിക്ക് ചെയ്യുന്നു എന്ന് കരുതുക. ഒരു ചെറിയ ചെക്ക്മാർക്ക് ഐക്കണിന് ബട്ടണിൽ നിന്ന് സ്റ്റാറ്റസ് സന്ദേശ ഏരിയയിലേക്ക് (ഉദാ., "നിങ്ങളുടെ ഡോക്യുമെന്റ് സേവ് ചെയ്തു.") ഒരു സൂക്ഷ്മമായ വക്രത്തിലൂടെ ആനിമേറ്റ് ചെയ്യാൻ കഴിയും. ഈ സെഗ്‌മെന്റ് ആനിമേഷൻ ഉപയോക്താവിന്റെ പ്രവർത്തനത്തെ ആപ്ലിക്കേഷന്റെ പ്രതികരണവുമായി മികച്ച രീതിയിൽ ബന്ധിപ്പിക്കുന്നു, ഉപയോഗക്ഷമത മെച്ചപ്പെടുത്തുന്നു, കൂടുതൽ മികച്ച ഉപയോക്തൃ അനുഭവം സൃഷ്ടിക്കുന്നു.

ബ്രൗസർ അനുയോജ്യതയും അവസാന ചിന്തകളും

CSS മോഷൻ പാത്ത് ഒരു ആധുനിക വെബ് സ്റ്റാൻഡേർഡ് ആണ്. ഈ എഴുതുമ്പോൾ, Chrome, Firefox, Safari, Edge എന്നിവ ഉൾപ്പെടെ എല്ലാ പ്രധാന എവർഗ്രീൻ ബ്രൗസറുകളിലും ഇത് മികച്ച പിന്തുണ നൽകുന്നു. എന്നിരുന്നാലും, ഒരു ആഗോള ഡെവലപ്പർക്ക് CanIUse.com പോലുള്ള ഒരു ഉറവിടം പരിശോധിക്കുന്നത് ഏറ്റവും പുതിയ അനുയോജ്യത വിവരങ്ങൾ ലഭിക്കുന്നതിന് എപ്പോഴും വിവേകപൂർണ്ണമാണ്, പ്രത്യേകിച്ചും നിങ്ങൾക്ക് പ്രത്യേക മേഖലകളിൽ പഴയ ബ്രൗസർ പതിപ്പുകൾ പിന്തുണയ്‌ക്കേണ്ടതുണ്ടെങ്കിൽ.

ഒരു പാതയുടെ ഭാഗങ്ങളിലൂടെ ആനിമേഷൻ നിയന്ത്രിക്കാനുള്ള കഴിവ് CSS മോഷൻ പാത്ത് മൊഡ്യൂളിനെ ഒരു നൂതനതയിൽ നിന്ന് പ്രൊഫഷണൽ ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർമാർക്കും മോഷൻ ഡിസൈൻ ചെയ്യുന്നവർക്കും വേണ്ടിയുള്ള ഒരു അത്യാവശ്യ ടൂളിലേക്ക് ഉയർത്തുന്നു. ഇത് മികച്ച പ്രകടനമുള്ളതും ഹാർഡ്‌വെയർ-ആക്സിലറേറ്റഡ് ആയതുമായ സങ്കീർണ്ണമായ, കോറിയോഗ്രാഫ്ഡ്, അർത്ഥവത്തായ ആനിമേഷനുകൾ സൃഷ്ടിക്കാൻ അനുവദിക്കുന്നു, അതെല്ലാം ബാഹ്യ ലൈബ്രറികളുടെ ഓവർഹെഡ് ഇല്ലാതെ.

ഉപസംഹാരം

ഞങ്ങൾ CSS മോഷൻ പാത്തിന്റെ അടിസ്ഥാനകാര്യങ്ങളിൽ നിന്ന് സെഗ്‌മെന്റ് നിയന്ത്രണത്തിന്റെ സൂക്ഷ്മമായ കലയിലേക്ക് യാത്ര ചെയ്തു. പ്രധാന പാഠം എന്തെന്നാൽ, CSS @keyframes-നുള്ളിൽ offset-distance തന്ത്രപരമായി കൈകാര്യം ചെയ്യുന്നതിലൂടെ, നിങ്ങളുടെ എലമെന്റിന്റെ യാത്രയിൽ നിങ്ങൾക്ക് കൃത്യമായ നിയന്ത്രണം ലഭിക്കും. നിങ്ങൾ ഒരു ലളിതമായ തുടക്കം-അവസാനം യാത്രയിൽ പരിമിതപ്പെടുത്തിയിട്ടില്ല.

അടിസ്ഥാന സെഗ്‌മെന്റ് ആനിമേഷൻ, ഇടവേളകളോടെയുള്ള ഒന്നിലധികം ഘട്ടങ്ങളുള്ള യാത്രകൾ ക്രമീകരിക്കുന്നു, കൂടാതെ CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ, പെർ-സെഗ്‌മെന്റ് ഈസിംഗ് പോലുള്ള നൂതനമായ വിദ്യകൾ എന്നിവ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, നിങ്ങൾക്ക് കൂടുതൽ ഡൈനാമിക്, ആവിഷ്കരിക്കുന്ന, പരിപാലിക്കാവുന്ന ആനിമേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. കൂടാതെ, prefers-reduced-motion ഉപയോഗിച്ച് എപ്പോഴും പ്രവേശനക്ഷമതയെ മുൻ‌നിർത്തിക്കൊണ്ട്, നിങ്ങളുടെ മനോഹരമായ സൃഷ്ടികൾ എല്ലാവർക്കും ലഭ്യവും ബഹുമാനിക്കുന്നതും ഉൾക്കൊള്ളുന്നതും ആണെന്ന് നിങ്ങൾ ഉറപ്പാക്കുന്നു.

വെബ് ചലനത്തിനുള്ള ഒരു കാൻവാസ് ആണ്. ഇപ്പോൾ നിങ്ങൾക്ക് കൂടുതൽ വഴക്കമുള്ളതും ശക്തവുമായ ഒരു ബ്രഷ് ഉണ്ട്. പരീക്ഷിക്കാൻ പോകുക, അത്ഭുതകരമായ കാര്യങ്ങൾ നിർമ്മിക്കുക, കൂടാതെ CSS ഉപയോഗിച്ച് എന്തു സാധ്യമാണെന്നതിനെക്കുറിച്ചുള്ള അതിരുകൾ തുടർന്നും മറികടക്കുക.