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

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

CSS மோஷன் பாத்தை புரிந்துகொள்ளுதல்

செயல்திறன் சுயவிவரத்தில் மூழ்குவதற்கு முன், CSS மோஷன் பாத்தின் முக்கிய கருத்துக்களை சுருக்கமாகப் பார்ப்போம்.

motion-path பண்பு, ஒரு தனிமம் பின்பற்ற வேண்டிய வடிவியல் வடிவத்தைக் குறிப்பிட உங்களை அனுமதிக்கிறது. இந்த வடிவத்தை பல்வேறு முறைகளைப் பயன்படுத்தி வரையறுக்கலாம்:

• அடிப்படை வடிவங்கள்: வட்டங்கள், நீள்வட்டங்கள், செவ்வகங்கள் மற்றும் பலகோணங்கள்.
• பாதை சரங்கள்: சிக்கலான வளைவுகள் மற்றும் வடிவங்களை வரையறுக்கும் SVG பாதை கட்டளைகள் (எ.கா., M, L, C, S, Q, T, A, Z).
• வெளிப்புற SVG பாதைகள்: url() செயல்பாட்டைப் பயன்படுத்தி <path> தனிமத்துடன் ஒரு SVG தனிமத்தைக் குறிப்பிடுவது.

motion-offset பண்பு, மோஷன் பாதையில் தனிமத்தின் நிலையை கட்டுப்படுத்துகிறது. motion-offset-ஐ 0 முதல் 1 வரை அனிமேட் செய்வது, தனிமத்தை முழு பாதையிலும் நகர்த்தச் செய்கிறது.

motion-rotation பண்பு, தனிமம் பாதையில் நகரும்போது அது எவ்வாறு சுழல்கிறது என்பதைக் கட்டுப்படுத்துகிறது. auto மற்றும் auto-reverse மதிப்புகள் பொதுவான விருப்பங்கள், இது தனிமத்தை பாதை தொடுகோட்டுடன் தன்னை நோக்குநிலையாக்க அனுமதிக்கிறது.

செயல்திறன் சுயவிவரத்தின் முக்கியத்துவம்

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

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

செயல்திறன் சுயவிவரத்திற்கான கருவிகள்

நவீன உலாவிகள் செயல்திறன் சுயவிவரத்திற்கு சக்திவாய்ந்த டெவலப்பர் கருவிகளை வழங்குகின்றன. இங்கே சில பொதுவாகப் பயன்படுத்தப்படும் விருப்பங்கள்:

• Chrome DevTools: Chrome-இன் DevTools ஒரு விரிவான செயல்திறன் பேனலை வழங்குகிறது, இது ரெண்டரிங் செயல்முறையை பதிவுசெய்து பகுப்பாய்வு செய்ய உங்களை அனுமதிக்கிறது.
• Firefox Developer Tools: Firefox-இன் டெவலப்பர் கருவிகளும் Chrome-இன் DevTools-க்கு ஒத்த செயல்பாடுகளுடன் கூடிய செயல்திறன் சுயவிவரத்தைக் கொண்டுள்ளது.
• Safari Web Inspector: Safari-இன் Web Inspector செயல்திறன் இடையூறுகளை பகுப்பாய்வு செய்ய ஒரு டைம்லைன் காட்சியை வழங்குகிறது.

சுயவிவரத்திற்காக Chrome DevTools-ஐப் பயன்படுத்துதல்

CSS மோஷன் பாத் அனிமேஷன்களை சுயவிவரப்படுத்த Chrome DevTools-ஐப் பயன்படுத்துவதற்கான படிப்படியான வழிகாட்டி இங்கே:

1. Chrome DevTools-ஐத் திறக்கவும்: Chrome DevTools-ஐத் திறக்க F12 (அல்லது macOS-இல் Cmd+Opt+I) ஐ அழுத்தவும்.
2. செயல்திறன் பேனலுக்குச் செல்லவும்: "Performance" தாவலைக் கிளிக் செய்யவும்.
3. பதிவைத் தொடங்கவும்: உங்கள் அனிமேஷனின் செயல்திறனைப் பதிவுசெய்யத் தொடங்க "Record" பொத்தானை (மேல்-இடது மூலையில் உள்ள வட்டப் பொத்தான்) கிளிக் செய்யவும்.
4. உங்கள் அனிமேஷனை இயக்கவும்: நீங்கள் சுயவிவரப்படுத்த விரும்பும் அனிமேஷனைத் தூண்டவும்.
5. பதிவை நிறுத்தவும்: பதிவை நிறுத்த "Stop" பொத்தானைக் கிளிக் செய்யவும்.
6. முடிவுகளை பகுப்பாய்வு செய்யவும்: செயல்திறன் பேனல் பதிவின் டைம்லைன் காட்சியைக் காண்பிக்கும். நீங்கள் பெரிதாக்கவும், வெளியேறவும், குறிப்பிட்ட நேர வரம்புகளைத் தேர்ந்தெடுக்கவும், மற்றும் பல்வேறு செயல்திறன் அளவீடுகளை பகுப்பாய்வு செய்யவும் முடியும்.

கவனிக்க வேண்டிய முக்கிய செயல்திறன் அளவீடுகள்

செயல்திறன் சுயவிவரத்தை பகுப்பாய்வு செய்யும்போது, பின்வரும் முக்கிய அளவீடுகளுக்கு கவனம் செலுத்துங்கள்:

• பிரேம்கள் પ્રતિ வினாடி (FPS): ஒரு உயர் FPS மென்மையான அனிமேஷனைக் குறிக்கிறது. சிறந்த பயனர் அனுபவத்திற்கு 60 FPS-ஐ நோக்கமாகக் கொள்ளுங்கள். 30 FPS-க்குக் கீழே உள்ள எதுவும் தடுமாற்றமாக உணரப்படும்.
• CPU பயன்பாடு: அதிக CPU பயன்பாடு செயல்திறன் இடையூறுகளைக் குறிக்கலாம். அனிமேஷன் பிரேம்களின் போது CPU பயன்பாட்டில் ஏற்படும் கூர்மையான அதிகரிப்புகளைக் கவனியுங்கள்.
• ரெண்டரிங் நேரம்: ஒவ்வொரு பிரேமையும் ரெண்டர் செய்ய உலாவி எடுக்கும் நேரம். நீண்ட ரெண்டரிங் நேரங்கள் குறைந்த FPS-க்கு பங்களிக்கக்கூடும்.
• ஸ்கிரிப்டிங் நேரம்: JavaScript குறியீட்டை இயக்க செலவிடப்பட்ட நேரம். உங்கள் அனிமேஷன் JavaScript-ஐ உள்ளடக்கியிருந்தால், ஸ்கிரிப்டிங் நேரத்தைக் குறைக்க உங்கள் குறியீட்டை மேம்படுத்துங்கள்.
• ரெண்டரிங் புதுப்பிப்புகள்: லேஅவுட் மற்றும் பெயிண்ட் செயல்பாடுகளின் எண்ணிக்கை. அதிகப்படியான லேஅவுட் மற்றும் பெயிண்ட் செயல்பாடுகள் செயல்திறனை கணிசமாக பாதிக்கலாம்.
• GPU பயன்பாடு: அனிமேஷன் வன்பொருள் முடுக்கிவிடப்பட்டால், GPU பயன்பாட்டைக் கண்காணிக்கவும். அதிக GPU பயன்பாடு அவசியமாக மோசமானது அல்ல, ஆனால் நீடித்த அதிக பயன்பாடு மேம்படுத்தல் வாய்ப்புகளைக் குறிக்கலாம்.

செயல்திறன் இடையூறுகளை அடையாளம் காணுதல்

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

• சிக்கலான பாதை சரங்கள்: மிக நீண்ட மற்றும் சிக்கலான SVG பாதை சரங்களை ரெண்டர் செய்வது கணினிக்கு அதிக செலவாகும். முடிந்தவரை உங்கள் பாதைகளை எளிமையாக்குங்கள்.
• அதிக அனிமேட் செய்யப்பட்ட தனிமங்கள்: ஒரே நேரத்தில் அதிக எண்ணிக்கையிலான தனிமங்களை அனிமேட் செய்வது உலாவியின் வளங்களை சிரமப்படுத்தலாம். அனிமேட் செய்யப்பட்ட தனிமங்களின் எண்ணிக்கையைக் குறைப்பதைக் கருத்தில் கொள்ளுங்கள் அல்லது அனிமேஷன் ஸ்டாகரிங் போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• தேவையற்ற மறுபெயிண்ட்கள் மற்றும் ரிஃப்ளோக்கள்: மறுபெயிண்ட்கள் (மறுவரைவுகள்) மற்றும் ரிஃப்ளோக்களை (லேஅவுட் மறுகணக்கீடுகள்) தூண்டும் DOM-இல் ஏற்படும் மாற்றங்கள் செயல்திறனை கணிசமாக பாதிக்கலாம். அனிமேஷன்களின் போது தேவையற்ற DOM கையாளுதல்களைத் தவிர்க்கவும்.
• CSS மூலம் செய்யக்கூடிய அனிமேஷன்களுக்கு JavaScript-ஐப் பயன்படுத்துதல்: CSS அனிமேஷன்கள் பெரும்பாலும் வன்பொருள் முடுக்கிவிடப்படுகின்றன, இது JavaScript-அடிப்படையிலான அனிமேஷன்களை விட சிறந்த செயல்திறனுக்கு வழிவகுக்கிறது.
• motion-offset க்கு பதிலாக transform: translate() ஐப் பயன்படுத்துதல்: transform: translate() இயக்கத்தை உருவகப்படுத்தப் பயன்படுத்தப்படலாம் என்றாலும், motion-offset பாதை அடிப்படையிலான அனிமேஷனுக்காக வெளிப்படையாக வடிவமைக்கப்பட்டுள்ளது மற்றும் பொதுவாக அத்தகைய சூழ்நிலைகளில் அதிக செயல்திறன் கொண்டது, ஏனெனில் உலாவி ஒரு பாதையில் இயக்கத்திற்காக குறிப்பாக ரெண்டரிங்கை மேம்படுத்த முடியும்.

CSS மோஷன் பாத் அனிமேஷன்களுக்கான மேம்படுத்தல் நுட்பங்கள்

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

1. பாதை சரங்களை எளிமையாக்குங்கள்

பாதை சரத்தின் சிக்கலானது ரெண்டரிங் நேரத்தை நேரடியாக பாதிக்கிறது. கட்டுப்பாட்டு புள்ளிகள் மற்றும் பிரிவுகளின் எண்ணிக்கையைக் குறைப்பதன் மூலம் உங்கள் பாதை சரங்களை எளிமையாக்குங்கள். உங்கள் CSS-இல் பயன்படுத்துவதற்கு முன்பு பாதையை மேம்படுத்த ஒரு வெக்டர் கிராபிக்ஸ் எடிட்டரை (எ.கா., Adobe Illustrator, Inkscape) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

உதாரணம்:

பல கியூபிக் பெசியர் வளைவுகளால் வரையறுக்கப்பட்ட மிகவும் விரிவான வளைவுக்குப் பதிலாக, அதை ஒரு எளிய வளைவு அல்லது தொடர்ச்சியான நேர்கோடுகளுடன் (பாதை சரத்தில் L கட்டளைகளைப் பயன்படுத்தி) தோராயமாக மாற்ற முயற்சிக்கவும். காட்சி வேறுபாடு மிகக் குறைவாக இருக்கலாம், ஆனால் செயல்திறன் மேம்பாடு குறிப்பிடத்தக்கதாக இருக்கும்.

2. அனிமேட் செய்யப்பட்ட தனிமங்களின் எண்ணிக்கையைக் குறைக்கவும்

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

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

3. வன்பொருள் முடுக்கத்தைப் பயன்படுத்தவும்

வன்பொருள் முடுக்கம் அனிமேஷன் கணக்கீடுகளைச் செய்ய GPU-ஐ (கிராபிக்ஸ் பிராசசிங் யூனிட்) பயன்படுத்துகிறது, மற்ற பணிகளுக்காக CPU-ஐ விடுவிக்கிறது. CSS அனிமேஷன்கள் பெரும்பாலும் இயல்பாகவே வன்பொருள் முடுக்கிவிடப்படுகின்றன, ஆனால் அனிமேட் செய்யப்பட்ட தனிமத்திற்கு transform: translateZ(0); அல்லது backface-visibility: hidden; ஐப் பயன்படுத்துவதன் மூலம் நீங்கள் வெளிப்படையாக வன்பொருள் முடுக்கத்தைத் தூண்டலாம்.

உதாரணம்:

            .animated-element {
  transform: translateZ(0);
  /* or */
  backface-visibility: hidden;
}
            

              
                Copy
              
            
          

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

4. தேவையற்ற மறுபெயிண்ட்கள் மற்றும் ரிஃப்ளோக்களைத் தவிர்க்கவும்

மறுபெயிண்ட்கள் மற்றும் ரிஃப்ளோக்கள் செலவு மிக்க செயல்பாடுகள், அவை செயல்திறனை கணிசமாக பாதிக்கலாம். அனிமேஷன்களின் போது அவற்றை தேவையற்ற முறையில் தூண்டுவதைத் தவிர்க்கவும்.

DOM கையாளுதல்களைக் குறைக்கவும்: அனிமேஷன்களின் போது DOM-ஐ மாற்றுவதைத் தவிர்க்கவும். நீங்கள் DOM-ஐப் புதுப்பிக்க வேண்டுமானால், அதை அனிமேஷனுக்கு முன்னரோ அல்லது பின்னரோ செய்யுங்கள், அதன் போது அல்ல.

CSS Transforms மற்றும் Opacity-ஐப் பயன்படுத்தவும்: லேஅவுட் மாற்றங்களைத் தூண்டும் பிற பண்புகளை (எ.கா., width, height, position) மாற்றுவதை விட transform மற்றும் opacity போன்ற CSS பண்புகளை மாற்றுவது பொதுவாக அதிக செயல்திறன் கொண்டது. இந்தப் பண்புகள் பெரும்பாலும் முழு மறுபெயிண்ட் தேவைப்படாமல் GPU மூலம் நேரடியாக கையாளப்படலாம்.

5. பாதை தரவை மேம்படுத்துங்கள்

பாதை தரவு, குறிப்பாக சிக்கலான வடிவங்களுக்கு, செயல்திறன் மேல்நிலையின் ஒரு குறிப்பிடத்தக்க ஆதாரமாக இருக்கலாம். இந்த மேம்படுத்தல்களைக் கருத்தில் கொள்ளுங்கள்:

• துல்லியத்தைக் குறைக்கவும்: உங்கள் பாதை தரவு அதிகப்படியான தசம இடங்களைக் கொண்டிருந்தால், மதிப்புகளை ஒரு நியாயமான துல்லிய நிலைக்கு округளப்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். எடுத்துக்காட்டாக, 123.456789 க்கு பதிலாக, 123.46 ஐப் பயன்படுத்தவும். காட்சி வேறுபாடு பெரும்பாலும் உணரப்படாது, ஆனால் தரவு அளவில் ஏற்படும் குறைப்பு செயல்திறனை மேம்படுத்தும்.
• வடிவங்களை எளிமையாக்குங்கள்: ஒட்டுமொத்த வடிவத்தை எளிமையாக்க வாய்ப்புகளைத் தேடுங்கள். சிக்கலான வளைவுகளை எளிய வடிவங்கள் அல்லது நேர்கோடுகளால் மாற்ற முடியுமா?
• பாதை தரவை கேச் செய்யவும்: பாதை தரவு நிலையானதாக இருந்தால், பாதை சரத்தை மீண்டும் மீண்டும் பாகுபடுத்துவதைத் தவிர்க்க அதை ஒரு JavaScript மாறியில் கேச் செய்வதைக் கருத்தில் கொள்ளுங்கள்.

6. சரியான அனிமேஷன் நுட்பத்தைத் தேர்வுசெய்யுங்கள்

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

• CSS Transitions: அடிப்படை பண்பு மாற்றங்களை (எ.கா., நிறம், ஒளிபுகாநிலை, நிலை) உள்ளடக்கிய எளிய அனிமேஷன்களுக்கு, CSS மாற்றங்கள் பெரும்பாலும் மிகவும் செயல்திறன் மிக்க விருப்பமாகும்.
• CSS Animations: பல கீஃப்ரேம்களை உள்ளடக்கிய மிகவும் சிக்கலான அனிமேஷன்களுக்கு, CSS அனிமேஷன்கள் செயல்திறன் மற்றும் நெகிழ்வுத்தன்மைக்கு இடையே ஒரு நல்ல சமநிலையை வழங்குகின்றன.
• JavaScript Animations: மிகவும் சிக்கலான அனிமேஷன்கள் அல்லது டைனமிக் கணக்கீடுகள் தேவைப்படும் அனிமேஷன்களுக்கு, JavaScript அனிமேஷன்கள் அவசியமாக இருக்கலாம். இருப்பினும், JavaScript-அடிப்படையிலான அனிமேஷன்களின் செயல்திறன் மேல்நிலையைக் கவனத்தில் கொள்ளுங்கள். GreenSock (GSAP) போன்ற நூலகங்கள் JavaScript அனிமேஷன்களை மேம்படுத்த உதவலாம்.

7. உலாவி-குறிப்பிட்ட பரிசீலனைகள்

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

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

8. will-change பண்பைப் பயன்படுத்தவும் (கவனத்துடன்)

will-change பண்பு, அனிமேட் செய்யப்பட உள்ள பண்புகள் குறித்து முன்கூட்டியே உலாவிக்குத் தெரிவிக்க உங்களை அனுமதிக்கிறது. இது அந்த பண்புகளுக்கான ரெண்டரிங் செயல்முறையை மேம்படுத்த உலாவியை அனுமதிக்கலாம்.

உதாரணம்:

            .animated-element {
  will-change: motion-offset, motion-rotation;
}
            

              
                Copy
              
            
          

எச்சரிக்கை: will-change-ஐ குறைவாகப் பயன்படுத்துங்கள், ஏனெனில் இது கூடுதல் நினைவகம் மற்றும் வளங்களைப் பயன்படுத்தக்கூடும். will-change-ஐ அதிகமாகப் பயன்படுத்துவது உண்மையில் செயல்திறனைக் குறைக்கக்கூடும். செயலில் அனிமேட் செய்யப்படும் பண்புகளுக்கு மட்டுமே இதைப் பயன்படுத்தவும்.

நடைமுறை உதாரணங்கள் மற்றும் வழக்கு ஆய்வுகள்

இந்த மேம்படுத்தல் நுட்பங்களை விளக்க சில நடைமுறை உதாரணங்கள் மற்றும் வழக்கு ஆய்வுகளைக் கருத்தில் கொள்வோம்.

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

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

1. பாதையை எளிமையாக்குங்கள்: மிகவும் விரிவான வளைவைப் பயன்படுத்துவதற்குப் பதிலாக, அதை ஒரு எளிய வளைவு அல்லது தொடர்ச்சியான நேர்கோடுகளுடன் தோராயமாக மாற்றவும்.
2. வன்பொருள் முடுக்கம்: வன்பொருள் முடுக்கத்தைத் தூண்ட லோகோ தனிமத்திற்கு transform: translateZ(0); ஐப் பயன்படுத்தவும்.
3. பாதை தரவை மேம்படுத்துங்கள்: பாதை தரவில் உள்ள தசம இடங்களை ஒரு நியாயமான துல்லிய நிலைக்கு округளப்படுத்துங்கள்.

உதாரணம் 2: ஒரு பாதையில் பல தனிமங்களை அனிமேட் செய்தல்

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

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

வழக்கு ஆய்வு: ஒரு இணையதளத்தில் ஒரு சிக்கலான அனிமேஷனை மேம்படுத்துதல்

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

Chrome DevTools-ஐப் பயன்படுத்தி அனிமேஷனை சுயவிவரப்படுத்திய பிறகு, டெவலப்பர்கள் பின்வரும் இடையூறுகளைக் கண்டறிந்தனர்:

• சிக்கலான பாதை சரங்கள்
• தேவையற்ற மறுபெயிண்ட்கள் மற்றும் ரிஃப்ளோக்கள்
• வன்பொருள் முடுக்கம் இல்லாமை

அவர்கள் பின்வரும் மேம்படுத்தல்களைப் பயன்படுத்தினர்:

• பாதை சரங்களை எளிமையாக்கினர்
• DOM கையாளுதல்களைக் குறைத்தனர்
• அனிமேட் செய்யப்பட்ட தனிமங்களுக்கு transform: translateZ(0); ஐப் பயன்படுத்தினர்

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

முடிவுரை

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

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