CSS மோஷன் பாத் ஆஃப்செட்: மேம்பட்ட அனிமேஷன் பாதை கட்டுப்பாட்டில் ஒரு ஆழமான பார்வை

பல ஆண்டுகளாக, இணையத்தில் சிக்கலான, நேர்கோடற்ற அனிமேஷன்களை உருவாக்க அதிக அளவு ஜாவாஸ்கிரிப்ட் அல்லது சிக்கலான SVG SMIL வித்தைகள் தேவைப்பட்டன. ஒரு வளைந்த அல்லது தனிப்பயன் பாதையில் ஒரு தனிமத்தை அனிமேட் செய்வது என்பது ஒவ்வொரு ஃபிரேமிற்கும் அதன் நிலைகளைக் கணக்கிடுவதைக் குறிக்கும், இது செயல்திறன் மிகுந்ததாகவும் பராமரிக்கக் கடினமானதாகவும் இருந்தது. ஆனால் வலைத் தளம் வளர்ச்சியடைந்துள்ளது, அதனுடன், நுட்பமான காட்சி அனுபவங்களை நேரடியாக உருவாக்கும் நமது திறனும் வளர்ந்துள்ளது. இதோ CSS மோஷன் பாத் தொகுதி வருகிறது, இது ஒரு தனிப்பயன் பாதையில் ஒரு தனிமத்தின் இயக்கத்தை டெவலப்பர்களுக்கு நேரடியாகக் கட்டுப்படுத்தும் சக்திவாய்ந்த பண்புகளின் தொகுப்பாகும்.

இந்தத் தொகுதி ஒரு தனிமத்தை புள்ளி A-யிலிருந்து புள்ளி B-க்கு நகர்த்துவது மட்டுமல்ல; இது முழுப் பயணத்தையும் வரையறுப்பதாகும். இது ஒரு காலத்தில் பிரத்யேக அனிமேஷன் மென்பொருளின் தனிப்பட்ட களமாக இருந்த திரவ, இயல்பான மற்றும் ஈர்க்கக்கூடிய அனிமேஷன்களை உருவாக்க நமக்கு உதவுகிறது. ஒரு அறிவிப்பு ஐகான் ஒரு அழகிய வளைவில் வர வேண்டுமானாலும், பயனர் ஸ்க்ரோல் செய்யும்போது ஒரு தயாரிப்புப் படம் ஒரு வளைந்த பாதையைப் பின்பற்ற வேண்டுமானாலும், அல்லது ஒரு விமானம் வரைபடத்தில் பறக்க வேண்டுமானாலும், CSS மோஷன் பாத் அதைத் திறமையாகவும் அழகாகவும் செய்ய தேவையான கருவிகளை வழங்குகிறது.

இந்த விரிவான வழிகாட்டியில், CSS மோஷன் பாத் பண்புகளின் முழுத் தொகுப்பையும் நாம் ஆராய்வோம். இவை பெரும்பாலும் ஒரு பாதையில் ஒரு தனிமத்தை 'offsetting' செய்யும் அவற்றின் செயல்பாட்டால் கூட்டாகக் குறிப்பிடப்படுகின்றன. நாம் ஒவ்வொரு பண்பையும் பிரித்து ஆராய்வோம், நடைமுறைப் பயன்பாடுகளைக் காண்போம், ரெஸ்பான்சிவ் மற்றும் ஊடாடும் அனிமேஷன்களுக்கான மேம்பட்ட நுட்பங்களை ஆழமாகப் பார்ப்போம், மற்றும் பொதுவான சவால்களை எதிர்கொள்வோம். இதன் முடிவில், நீங்கள் எளிய மாற்றங்களுக்கு அப்பால் சென்று உங்கள் வலைத் திட்டங்களை மேம்படுத்தும் உண்மையான டைனமிக், பாதை அடிப்படையிலான அனிமேஷன்களை உருவாக்கும் அறிவைப் பெற்றிருப்பீர்கள்.

முக்கிய பண்புகள்: மோஷன் பாத் தொகுதியைப் பிரித்தாய்தல்

CSS மோஷன் பாத்தின் மாயாஜாலம் இணக்கமாகச் செயல்படும் சில முக்கிய பண்புகளில் உள்ளது. அவற்றின் தனிப்பட்ட பங்களிப்புகளையும், அவை எவ்வாறு இணைந்து திரவ இயக்கத்தை உருவாக்குகின்றன என்பதையும் புரிந்துகொள்ள அவற்றை ஒவ்வொன்றாகப் பிரித்துப் பார்ப்போம்.

offset-path: உங்கள் பாதையை வரையறுத்தல்

offset-path பண்பு எந்தவொரு மோஷன் பாத் அனிமேஷனுக்கும் அடித்தளமாகும். இது ஒரு தனிமம் பின்பற்ற வேண்டிய வடிவியல் பாதையை வரையறுக்கிறது. ஒரு பாதை இல்லாமல், பயணம் இல்லை. ஒரு பாதையை வரையறுக்க மிகவும் பொதுவான மற்றும் சக்திவாய்ந்த வழி path() செயல்பாட்டைப் பயன்படுத்துவதாகும், இது ஒரு SVG பாத் டேட்டா ஸ்டிரிங்கை ஏற்றுக்கொள்கிறது—இது SVG <path> தனிமத்தின் d பண்புக்கூறில் நீங்கள் காணும் அதே ஸ்டிரிங் ஆகும்.

ஒரு SVG பாத் ஸ்டிரிங் என்பது வடிவங்களை வரைவதற்கான ஒரு சிறு மொழியாகும். உதாரணமாக:

• M x y: கோடு வரையாமல் (x, y) ஒருங்கிணைப்புக்கு நகர்த்தவும்.
• L x y: (x, y) ஒருங்கிணைப்புக்கு ஒரு நேர்கோட்டை வரையவும்.
• C c1x c1y, c2x c2y, x y: கட்டுப்பாட்டு புள்ளிகளான (c1x, c1y) மற்றும் (c2x, c2y) ஆகியவற்றைப் பயன்படுத்தி (x, y) க்கு ஒரு கியூபிக் பெசியர் வளைவை வரையவும்.
• Q cx cy, x y: கட்டுப்பாட்டு புள்ளி (cx, cy) ஐப் பயன்படுத்தி (x, y) க்கு ஒரு குவாட்ராடிக் பெசியர் வளைவை வரையவும்.
• Z: தொடக்கப் புள்ளிக்கு ஒரு கோட்டை வரைந்து பாதையை மூடவும்.

இந்தக் கட்டளைகளை நீங்கள் மனப்பாடம் செய்யத் தேவையில்லை. Inkscape, Figma அல்லது Adobe Illustrator போன்ற பெரும்பாலான வெக்டர் கிராபிக்ஸ் எடிட்டர்கள் SVG குறியீட்டை ஏற்றுமதி செய்ய முடியும், அதிலிருந்து நீங்கள் பாத் ஸ்டிரிங்கை எளிதாக நகலெடுக்கலாம்.

ஒரு அடிப்படை உதாரணத்தைப் பார்ப்போம்:

            
.element-to-animate {
  offset-path: path('M 20 20 C 100 20, 100 100, 200 120 S 300 140, 350 80');
  /* Additional animation properties will go here */
}

            

              
                Copy
              
            
          

path() தவிர, offset-path பண்பு circle(), ellipse(), மற்றும் polygon() போன்ற அடிப்படை வடிவங்களையும், அல்லது ஆவணத்திற்குள் உள்ள ஒரு SVG பாத் தனிமத்தைக் குறிக்கும் URL (url(#svgPathId)) ஐயும் ஏற்றுக்கொள்ளும். இருப்பினும், தனிப்பயன் பாதைகளுக்கு path() செயல்பாடு அதிகபட்ச பன்முகத்தன்மையை வழங்குகிறது.

offset-distance: பாதையில் அனிமேட் செய்தல்

ஒரு பாதையை வரையறுப்பது முதல் படி மட்டுமே. offset-distance பண்புதான் உண்மையில் தனிமத்தை அந்தப் பாதையில் நகர்த்துகிறது. இது பாதையின் தொடக்கத்திலிருந்து ஒரு தூரமாக தனிமத்தின் நிலையை குறிப்பிடுகிறது. 0% மதிப்பு தனிமத்தை தொடக்கத்தில் வைக்கிறது, 50% அதை நடுப்பகுதியில் வைக்கிறது, மற்றும் 100% அதை একেবারে இறுதியில் வைக்கிறது.

இந்தப் பண்பைத்தான் நீங்கள் பொதுவாக CSS @keyframes பயன்படுத்தி அனிமேட் செய்வீர்கள்.

            
.element-to-animate {
  offset-path: path('M 0 50 L 300 50'); /* A simple horizontal line */
  animation: move-along-path 3s linear infinite;
}

@keyframes move-along-path {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், தனிமம் 3 வினாடிகளில் கிடைமட்டக் கோட்டின் தொடக்கத்திலிருந்து (0%) இறுதிக்கு (100%) பயணிக்கும், முடிவில்லாமல் மீண்டும் மீண்டும் நிகழும். பாதையில் இயக்கத்தின் வேகத்தைக் கட்டுப்படுத்த, animation-timing-function (எ.கா., ease-in-out) போன்ற எந்தவொரு சரியான CSS அனிமேஷன் பண்புகளையும் நீங்கள் பயன்படுத்தலாம்.

offset-rotate: ஒரு தனிமத்தின் நோக்குநிலையைக் கட்டுப்படுத்துதல்

இயல்பாக, ஒரு பாதையில் நகரும் ஒரு தனிமம் அதன் அசல் நோக்குநிலையைத் தக்க வைத்துக் கொள்ளும். இது ஒரு எளிய புள்ளி அல்லது வட்டத்திற்கு நீங்கள் விரும்புவதாக இருக்கலாம், ஆனால் ஒரு அம்பு, கார் அல்லது விமானம் போன்ற ஒரு பொருளுக்கு, அது நகரும் திசையை எதிர்கொள்ள வேண்டும் என்று நீங்கள் விரும்புவீர்கள்.

இங்குதான் offset-rotate வருகிறது. இது பயணத்தின் போது தனிமத்தின் கோண நோக்குநிலையைக் கட்டுப்படுத்துகிறது. இது பல மதிப்புகளை ஏற்றுக்கொள்கிறது:

• auto (இயல்புநிலை): தனிமம் அதன் தற்போதைய நிலையில் பாதையின் திசைக்கு சமமான கோணத்தில் சுழற்றப்படுகிறது. இது தனிமத்தை 'முன்னோக்கிப் பார்க்க' வைக்கிறது.
• reverse: இது auto போலவே செயல்படுகிறது, ஆனால் 180-டிகிரி சுழற்சியைச் சேர்க்கிறது. பாதையில் பின்னோக்கிச் செல்ல வேண்டிய ஒரு பொருளுக்கு இது பயனுள்ளதாக இருக்கும்.
• <angle>: 90deg அல்லது -1.5rad போன்ற ஒரு நிலையான கோணம். தனிமம் இந்த சுழற்சியை அனிமேஷன் முழுவதும் பராமரிக்கும், பாதையின் திசையைப் புறக்கணிக்கும்.
• auto <angle>: இது தானியங்கி சுழற்சியை ஒரு நிலையான ஆஃப்செட்டுடன் இணைக்கிறது. உதாரணமாக, offset-rotate: auto 90deg; தனிமத்தைப் பாதையில் முன்னோக்கிச் செல்ல வைக்கும், ஆனால் கூடுதலாக 90-டிகிரி கடிகார திசையில் சுழற்சியுடன். உங்கள் சொத்தின் 'முன்னோக்கு' திசை நேர்மறை X-அச்சுடன் சீரமைக்கப்படவில்லை என்றால் (எ.கா., வலதுபுறம் சுட்டிக்காட்டுவதற்குப் பதிலாக மேல்நோக்கிச் சுட்டிக்காட்டும் ஒரு காரின் மேலிருந்து கீழ் தோற்றம்) இது நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும்.

முன்னோக்கிச் செல்லும் அம்புக்குறியுடன் நமது முந்தைய உதாரணத்தை மேம்படுத்துவோம்:

            
.arrow {
  /* Assuming the arrow SVG points to the right by default */
  offset-path: path('M 20 20 C 100 20, 100 100, 200 120');
  offset-rotate: auto;
  animation: follow-curve 4s ease-in-out infinite;
}

@keyframes follow-curve {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

            

              
                Copy
              
            
          

இப்போது, அம்பு வளைவில் நகரும்போது, அது பயணத்தின் திசையில் எப்போதும் சுட்டிக்காட்டும் வகையில் தானாகவே சுழலும், இது மிகவும் இயல்பான மற்றும் உள்ளுணர்வுடன் கூடிய அனிமேஷனை உருவாக்கும்.

offset-anchor: இயக்கத்தின் மையம்

இறுதி முக்கிய பண்பு offset-anchor ஆகும். இந்தப் பண்பு transform-origin ஐப் போன்றது, ஆனால் குறிப்பாக மோஷன் பாத் அனிமேஷன்களுக்காக. இது அனிமேட் செய்யப்பட்ட தனிமத்தின் எந்த குறிப்பிட்ட புள்ளி பாதையில் பொருத்தப்பட்டுள்ளது என்பதை வரையறுக்கிறது.

இயல்பாக, இந்த ஆங்கர் புள்ளி தனிமத்தின் மையம் (50% 50% அல்லது center) ஆகும். இருப்பினும், துல்லியமான சீரமைப்புக்காக நீங்கள் இதை மாற்ற வேண்டியிருக்கலாம். உதாரணமாக, நீங்கள் ஒரு வரைபடத்தில் ஒரு பின்னை அனிமேட் செய்கிறீர்கள் என்றால், அதன் மையத்தை விட, பின்னின் முனையை பாதையில் பின்பற்ற வைப்பீர்கள்.

offset-anchor பண்பு background-position அல்லது transform-origin போலவே ஒரு நிலை மதிப்பை ஏற்றுக்கொள்கிறது:

• Keywords: top, bottom, left, right, center.
• சதவீதங்கள்: 25% 75%.
• நீளங்கள்: 10px 20px.

ஒரு சுற்றுப்பாதை செயற்கைக்கோள் அனிமேஷனைக் கவனியுங்கள்:

            
.planet {
  /* Positioned at the center of the container */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.satellite {
  width: 20px;
  height: 20px;
  offset-path: circle(150px at center);
  offset-anchor: center; /* The satellite's center follows the circle */
  animation: orbit 10s linear infinite;
}

@keyframes orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

            

              
                Copy
              
            
          

இந்த சூழ்நிலையில், offset-anchor க்கு இயல்புநிலை center ஐப் பயன்படுத்துவது சரியாக வேலை செய்கிறது. ஆனால் செயற்கைக்கோளுக்கு ஒரு நீண்ட ஆண்டெனா இருந்தால், நீங்கள் முக்கிய உடலைப் பாதையில் பொருத்த விரும்பலாம், அதற்கு வேறு ஆங்கர் புள்ளி தேவைப்படும்.

நடைமுறைப் பயன்பாடுகள் மற்றும் மேம்பட்ட நுட்பங்கள்

முக்கிய பண்புகளைப் புரிந்துகொள்வது ஒரு விஷயம்; சிக்கலான, ரெஸ்பான்சிவ் மற்றும் ஊடாடும் அனிமேஷன்களை உருவாக்க அவற்றைப் பயன்படுத்துவது வேறு விஷயம். CSS மோஷன் பாத்தின் முழுத் திறனையும் வெளிப்படுத்தும் சில மேம்பட்ட நுட்பங்களை ஆராய்வோம்.

SVG பாதைகளுடன் சிக்கலான அனிமேஷன்களை உருவாக்குதல்

சிக்கலான path() ஸ்டிரிங்குகளை கைமுறையாக எழுதுவது கடினமானது மற்றும் பிழை ஏற்பட வாய்ப்புள்ளது. மிகவும் திறமையான வழிமுறை ஒரு வெக்டர் கிராபிக்ஸ் எடிட்டரைப் பயன்படுத்துவதாகும். இதோ ஒரு படிப்படியான உலகளாவிய நட்பு செயல்முறை:

1. பாதையை வடிவமைத்தல்: ஒரு வெக்டர் எடிட்டரைத் திறக்கவும் (இலவச மற்றும் திறந்த மூல Inkscape, அல்லது Figma அல்லது Adobe Illustrator போன்ற வணிகக் கருவிகள்). உங்கள் தனிமம் பின்பற்ற விரும்பும் சரியான பாதையை வரையவும். இது ஒரு லூப்பிங் ரோலர்கோஸ்டர் டிராக், ஒரு கண்டத்தின் எல்லைக்கோடு, அல்லது ஒரு விசித்திரமான கிறுக்கலாக இருக்கலாம்.
2. SVG ஆக ஏற்றுமதி செய்தல்: உங்கள் வரைபடத்தை ஒரு SVG கோப்பாக சேமிக்கவும் அல்லது ஏற்றுமதி செய்யவும். தூய்மையான குறியீட்டைப் பெற, 'plain SVG' அல்லது 'optimized SVG' விருப்பத்தைத் தேர்ந்தெடுக்கவும்.
3. பாத் டேட்டாவைப் பிரித்தெடுத்தல்: SVG கோப்பை ஒரு டெக்ஸ்ட் எடிட்டரிலோ அல்லது உங்கள் கோட் எடிட்டரிலோ திறக்கவும். நீங்கள் வரைந்த <path> தனிமத்தைக் கண்டுபிடித்து, அதன் d="..." பண்புக்கூறிலிருந்து முழு ஸ்டிரிங்கையும் நகலெடுக்கவும்.
4. CSS-ல் பயன்படுத்துதல்: இந்த ஸ்டிரிங்கை நேரடியாக உங்கள் CSS offset-path: path('...'); பண்பில் ஒட்டவும்.

இந்த வழிமுறை இயக்கத்தின் வடிவமைப்பைச் செயல்படுத்துவதிலிருந்து பிரிக்கிறது, இது வடிவமைப்பாளர்களையும் டெவலப்பர்களையும் திறம்பட ஒத்துழைக்க அனுமதிக்கிறது. ஒரு பூவைச் சுற்றி ஒரு பட்டாம்பூச்சி படபடப்பது போன்ற நம்பமுடியாத சிக்கலான அனிமேஷன்களை குறைந்த குறியீட்டில் உருவாக்க இது உங்களுக்கு அதிகாரம் அளிக்கிறது.

ரெஸ்பான்சிவ் மோஷன் பாதைகள்

offset-path உடன் ஒரு பெரிய சவால் என்னவென்றால், பாத் டேட்டா முழுமையான ஒருங்கிணைப்புகளால் வரையறுக்கப்படுகிறது. 1200px அகலமான டெஸ்க்டாப் திரையில் சரியாகத் தோன்றும் ஒரு பாதை, 375px அகலமான மொபைல் திரையில் துண்டிக்கப்படலாம் அல்லது முற்றிலும் தவறாக இருக்கலாம்.

இதைச் சமாளிக்க பல உத்திகள் உள்ளன:

1. இன்லைன் SVG மற்றும் url() ஐப் பயன்படுத்துதல்:

மிகவும் வலுவான முறைகளில் ஒன்று, உங்கள் HTML-ல் நேரடியாக ஒரு SVG-ஐ உட்பொதிப்பதாகும். ஒரு viewBox பண்புக்கூறுடன் கூடிய SVG இயல்பாகவே ரெஸ்பான்சிவ் ஆகும். பின்னர் உங்கள் CSS-லிருந்து அந்த SVG-க்குள் உள்ள ஒரு பாதையை நீங்கள் குறிப்பிடலாம்.

            
<!-- In your HTML -->
<div class="animation-container">
  <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="xMidYMid meet">
    <path id="responsivePath" d="M 20 20 C 100 20, 100 100, 200 120 S 300 140, 350 80" fill="none" stroke="lightgrey" />
  </svg>
  <div class="moving-element"></div>
</div>

/* In your CSS */
.animation-container {
  position: relative;
  width: 80vw;
  max-width: 800px;
}

.moving-element {
  position: absolute; /* Crucial for positioning within the container */
  top: 0; left: 0;
  offset-path: url(#responsivePath);
  animation: travel 5s infinite;
}

@keyframes travel {
  100% { offset-distance: 100%; }
}

            

              
                Copy
              
            
          

இந்த அமைப்பில், SVG அதன் கொள்கலனுக்குப் பொருந்தும் வகையில் அளவிடப்படுகிறது, மேலும் .moving-element அந்த SVG-லிருந்து பாதையைப் பயன்படுத்துவதால், அதன் பாதையும் அதனுடன் சேர்ந்து அளவிடப்படுகிறது.

2. ஜாவாஸ்கிரிப்ட்-இயக்கும் பாதைகள்:

மிகவும் டைனமிக் சூழ்நிலைகளுக்கு, தற்போதைய வியூபோர்ட் அல்லது கொள்கலன் அளவின் அடிப்படையில் பாத் ஸ்டிரிங்கைக் கணக்கிட நீங்கள் ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தலாம். நீங்கள் விண்டோவின் resize நிகழ்வைக் கேட்டு, CSS தனிப்பயன் பண்பை அல்லது நேரடியாக தனிமத்தின் ஸ்டைலை புதுப்பிக்கலாம்.

            
const element = document.querySelector('.moving-element');

function updatePath() {
  const width = window.innerWidth;
  const height = 200;
  const pathString = `M 0 ${height / 2} Q ${width / 2} 0, ${width} ${height / 2}`;
  element.style.offsetPath = `path('${pathString}')`;
}

window.addEventListener('resize', updatePath);
updatePath(); // Initial call

            

              
                Copy
              
            
          

ஜாவாஸ்கிரிப்டுடன் ஊடாடும் கட்டுப்பாட்டிற்காக ஒருங்கிணைத்தல்

CSS மோஷன் பாத் ஜாவாஸ்கிரிப்டுடன் இணைக்கப்படும்போது இன்னும் சக்திவாய்ந்ததாகிறது. ஒரு நிலையான அனிமேஷனுக்குப் பதிலாக, நீங்கள் offset-distance ஐ ஸ்க்ரோலிங், மவுஸ் இயக்கம் அல்லது ஆடியோ உள்ளீடு போன்ற பயனர் ஊடாடல்களுடன் இணைக்கலாம்.

ஒரு சிறந்த உதாரணம் ஸ்க்ரோல்-இயக்கும் அனிமேஷன் உருவாக்குவது. பயனர் பக்கத்தில் கீழே ஸ்க்ரோல் செய்யும்போது, ஒரு தனிமம் முன்னரே வரையறுக்கப்பட்ட பாதையில் நகரும்.

            
const pathElement = document.querySelector('.path-rider');

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollPercentage = (scrollTop / scrollHeight) * 100;

  // Update offset-distance based on scroll percentage
  pathElement.style.offsetDistance = `${scrollPercentage}%`;
});

            

              
                Copy
              
            
          

இந்த எளிய ஸ்கிரிப்ட் முழுப் பக்கத்தின் ஸ்க்ரோல் முன்னேற்றத்தை அதன் பாதையில் உள்ள தனிமத்தின் நிலையுடன் இணைக்கிறது. இந்தக் நுட்பம் கதைசொல்லல், காட்சி தரவு பிரதிநிதித்துவம் மற்றும் ஈர்க்கக்கூடிய லேண்டிங் பக்கங்களை உருவாக்குவதற்கு அருமையானது.

குறிப்பு: புதிய CSS ஸ்க்ரோல்-இயக்கும் அனிமேஷன்ஸ் API இந்த வகையான அனிமேஷன்களை முற்றிலும் CSS-ல் சாத்தியமாக்குவதை நோக்கமாகக் கொண்டுள்ளது, இது குறிப்பிடத்தக்க செயல்திறன் நன்மைகளை வழங்குகிறது. உலாவி ஆதரவு வளரும்போது, இது விருப்பமான முறையாக மாறும்.

செயல்திறன் பரிசீலனைகள் மற்றும் உலாவி ஆதரவு

CSS மோஷன் பாத்தின் ஒரு முக்கிய நன்மை செயல்திறன் ஆகும். offset-distance ஐ அனிமேட் செய்வது top மற்றும் left பண்புகளை அனிமேட் செய்வதை விட மிகவும் செயல்திறன் மிக்கது. transform மற்றும் opacity போலவே, offset-distance இல் ஏற்படும் மாற்றங்கள் பெரும்பாலும் உலாவியின் கம்போசிட்டர் த்ரெட்டால் கையாளப்படலாம், இது மென்மையான, வன்பொருள்-முடுக்கப்பட்ட அனிமேஷன்களுக்கு வழிவகுக்கிறது, அவை பிரதான த்ரெட்டில் கனமான ஜாவாஸ்கிரிப்ட் செயலாக்கத்தால் குறுக்கிடப்படுவதற்கான வாய்ப்புகள் குறைவு.

உலாவி ஆதரவைப் பொறுத்தவரை, CSS மோஷன் பாத் தொகுதி Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட அனைத்து நவீன எவர்கிரீன் உலாவிகளிலும் நன்கு ஆதரிக்கப்படுகிறது. இருப்பினும், CanIUse.com போன்ற ஒரு வளத்தை சமீபத்திய ஆதரவு தரவுகளுக்காகச் சரிபார்ப்பது எப்போதும் புத்திசாலித்தனம், குறிப்பாக நீங்கள் பழைய உலாவி பதிப்புகளை ஆதரிக்க வேண்டியிருந்தால். அதை ஆதரிக்காத உலாவிகளுக்கு, அனிமேஷன் வெறுமனே இயங்காது, மற்றும் தனிமம் அதன் நிலையான நிலையில் இருக்கும், இது பல சந்தர்ப்பங்களில் ஏற்றுக்கொள்ளக்கூடிய பின்னடைவாக இருக்கலாம்.

பொதுவான இடர்பாடுகள் மற்றும் சரிசெய்தல்

எந்தவொரு சக்திவாய்ந்த அம்சத்தையும் போலவே, CSS மோஷன் பாத்தை முதலில் பயன்படுத்தும்போது நீங்கள் சில பொதுவான சிக்கல்களை சந்திக்க நேரிடலாம். அவற்றை எவ்வாறு சரிசெய்வது என்பது இங்கே.

• சிக்கல்: எனது தனிமம் நகரவில்லை!
  • தீர்வு: நீங்கள் உண்மையில் offset-distance பண்பை அனிமேட் செய்கிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். வெறுமனே ஒரு offset-path ஐ வரையறுப்பது எந்த இயக்கத்தையும் ஏற்படுத்தாது. உங்களுக்கு offset-distance ஐ காலப்போக்கில் மாற்றும் ஒரு @keyframes விதி தேவை. மேலும், நீங்கள் உங்கள் தனிமத்திற்கு animation பண்புடன் அனிமேஷனை சரியாகப் பயன்படுத்தியுள்ளீர்களா என்பதைச் சரிபார்க்கவும்.
• சிக்கல்: அனிமேஷன் எதிர்பாராத இடத்திலிருந்து தொடங்குகிறது.
  • தீர்வு: மோஷன் பாத் பண்புகள் அனிமேஷனின் போது top, left, மற்றும் transform போன்ற நிலையான நிலைப்படுத்தல் பண்புகளை மீறுகின்றன என்பதை நினைவில் கொள்ளுங்கள். தனிமம் சாதாரண ஓட்டத்திலிருந்து 'தூக்கப்பட்டு' பாதையில் வைக்கப்படுகிறது. பாதை தானாகவே தனிமத்தின் கொள்கலன் தொகுதிக்கு சார்பாக நிலைநிறுத்தப்படுகிறது. உங்கள் பாத் டேட்டாவின் தொடக்கப் புள்ளியையும் (the 'M' command) மற்றும் கொள்கலனின் நிலைப்படுத்தலையும் சரிபார்க்கவும்.
• சிக்கல்: எனது தனிமத்தின் சுழற்சி தவறாக அல்லது நடுங்குகிறது.
  • தீர்வு: இது பெரும்பாலும் offset-rotate பண்புடன் தொடர்புடையது. நீங்கள் auto ஐப் பயன்படுத்துகிறீர்கள் என்றால், உங்கள் பாதை மென்மையாக இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். கூர்மையான மூலைகள் (ஒரு `L` கட்டளையில் உள்ளது போல) திசையில் ஒரு உடனடி மாற்றத்தை ஏற்படுத்தும், இதனால் சுழற்சியில் ஒரு திடீர் முறிவு ஏற்படும். மென்மையான திருப்பங்களுக்கு பெசியர் வளைவுகளை (C அல்லது Q) பயன்படுத்தவும். உங்கள் தனிம சொத்து 'முன்னோக்கி' (வலதுபுறம்) ausgerichtet இல்லை என்றால், அதை சரிசெய்ய auto <angle> தொடரியலை (எ.கா., offset-rotate: auto 90deg;) பயன்படுத்தவும்.
• சிக்கல்: எனது ரெஸ்பான்சிவ் தளவமைப்புடன் பாதை அளவிடப்படவில்லை.
  • தீர்வு: மேம்பட்ட நுட்பங்கள் பிரிவில் விவாதிக்கப்பட்டபடி, இது path() செயல்பாடு ஒரு முழுமையான ஒருங்கிணைப்பு அமைப்பைப் பயன்படுத்துவதால் ஏற்படுகிறது. ஒரு வலுவான, ரெஸ்பான்சிவ் தீர்விற்கு இன்லைன் SVG உடன் url(#pathId) நுட்பத்தைப் பயன்படுத்தவும்.

இணையத்தில் இயக்கத்தின் எதிர்காலம்

CSS மோஷன் பாத் வலை அனிமேஷனுக்கான ஒரு குறிப்பிடத்தக்க முன்னேற்றமாகும், இது படைப்பாளர்களுக்கு முன்பு அடைவதற்கு மிகவும் கடினமாக இருந்த பணக்கார, கதை-உந்துதல் அனுபவங்களை உருவாக்க அதிகாரம் அளிக்கிறது. இது அறிவிப்பு ஸ்டைலிங்கிற்கும் சிக்கலான அனிமேஷனுக்கும் இடையிலான இடைவெளியைக் குறைக்கிறது, இது டெவலப்பர்களுக்கு செயல்திறனை தியாகம் செய்யாமல் இயக்கத்தின் மீது நுணுக்கமான கட்டுப்பாட்டை அளிக்கிறது.

முன்னோக்கிப் பார்க்கும்போது, மோஷன் பாத் மற்றும் வளர்ந்து வரும் CSS API-களுக்கு இடையிலான ஒருங்கிணைப்பு நம்பமுடியாத அளவிற்கு உற்சாகமானது. மேற்கூறிய ஸ்க்ரோல்-இயக்கும் அனிமேஷன்ஸ் API உயர் செயல்திறன், ஸ்க்ரோல்-இணைக்கப்பட்ட பாத் அனிமேஷன்களை உருவாக்குவதை அற்பமானதாக மாற்றும். CSS Houdini உடன் ஒருங்கிணைப்பு ஒரு நாள் பாதைகளை CSS மூலமாகவே டைனமிக் மற்றும் நிரலாக்க ரீதியாக உருவாக்க அனுமதிக்கக்கூடும். இந்த தொழில்நுட்பங்கள் கூட்டாக வலையை மேலும் வெளிப்படையான மற்றும் டைனமிக் கேன்வாஸாக மாற்றுகின்றன.

முடிவுரை

CSS மோஷன் பாத் தொகுதி புதிய பண்புகளின் தொகுப்பை விட மேலானது; இது இணையத்தில் அனிமேஷனைப் பற்றி சிந்திப்பதற்கான ஒரு புதிய வழியாகும். இயக்கத்தின் பாதையை அனிமேஷனின் நேரத்திலிருந்து பிரிப்பதன் மூலம், இது இணையற்ற நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது.

நாம் அத்தியாவசிய கட்டுமானத் தொகுதிகளை உள்ளடக்கியுள்ளோம்:

• offset-path: உங்கள் அனிமேஷனுக்கான சாலை வரைபடம்.
• offset-distance: சாலையில் பயணிக்கும் வாகனம்.
• offset-rotate: வாகனத்தை வழிநடத்தும் ஸ்டீயரிங் வீல்.
• offset-anchor: சாலையில் வாகனத்தின் தொடும் புள்ளி.

இந்த பண்புகளில் தேர்ச்சி பெறுவதன் மூலமும், ரெஸ்பான்சிவ் மற்றும் ஊடாடும் தன்மைக்கான மேம்பட்ட நுட்பங்களைப் பயன்படுத்துவதன் மூலமும், நீங்கள் எளிய ஃபேடுகள் மற்றும் ஸ்லைடுகளைத் தாண்டிச் செல்லலாம். நீங்கள் பார்வைக்கு ஈர்க்கக்கூடிய அனிமேஷன்களை மட்டுமல்ல, அர்த்தமுள்ளவையாகவும், பயனரின் கண்ணை வழிநடத்துவதாகவும், ஒரு கதையைச் சொல்வதாகவும், மேலும் ஈர்க்கக்கூடிய மற்றும் மகிழ்ச்சியான பயனர் அனுபவத்தை உருவாக்குவதாகவும் வடிவமைக்கலாம். வலை என்பது நிலையான இயக்கத்தின் ஒரு தளமாகும், மேலும் CSS மோஷன் பாத் மூலம், அந்த இயக்கத்தை துல்லியத்துடனும் படைப்பாற்றலுடனும் வழிநடத்தும் சக்தி இப்போது உங்களிடம் உள்ளது.