CSS அனிமேஷன்கள்

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

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

அனிமேஷன் என்றால் என்ன?

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

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

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

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

அனிமேஷன் வகைகள்

அனிமேஷனில் பல்வேறு வகைகள் உள்ளன:

கார்ட்டூன் அல்லது பாரம்பரிய அனிமேஷன்

பிரேம் பை பிரேம் கதாநாயகனுக்கு இயக்கம் கொடுப்பது இந்த ஸ்டைல். தொடக்கத்தில், போதிய ஆடியோவிஷுவல் மீடியா இல்லாதபோது, ​​ஒவ்வொரு சட்டகத்தின் வரைதல் மற்றும் ஓவியம் (அனிமேஷனின் பின்னணி, மேடை அல்லது பின்னணி உட்பட) மூலம் அவை மேற்கொள்ளப்பட்டன.

இயக்கம் நிறுத்து

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

பிக்ஸலேஷன்

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

ரோட்டோஸ்கோபி

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

கட்அவுட்கள் அல்லது கட் அவுட் அனிமேஷன் மூலம் அனிமேஷன்

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

3 டி அனிமேஷன்

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

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

CSS என்றால் என்ன?

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

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

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

CSS என்பது எதற்காக?

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

பொதுவாக, இந்தக் கருவி எதைப் பற்றியது என்பதை நீங்கள் நன்றாகப் புரிந்துகொள்வதற்காக, டிஜிட்டல் மார்க்கெட்டிங் நிபுணர்கள் இதைப் பற்றி முதலில் புரிந்துகொள்வார்கள், ஏனெனில் அவர்கள்தான் அவற்றைக் கையாளுகிறார்கள்.

CSS இல் உயிரூட்டு

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

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

இந்த அனிமேஷன்கள் ஒவ்வொன்றும் பல நன்மைகளைக் கொண்டுள்ளன:

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

அனிமேஷன் அமைப்புகள்

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

துணை பண்புகள்:

அனிமேஷன் - தாமதம்

உறுப்பு ஏற்றப்பட்ட தருணத்திற்கும் அனிமேஷன் வரிசையின் தொடக்கத்திற்கும் இடையிலான தாமத நேரம்.

அனிமேஷன் - திசை

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

அனிமேஷன் - காலம்

அனிமேஷன் அதன் சுழற்சியை முடிக்க எடுக்கும் நேரத்தைக் குறிக்கிறது (காலம்)

அனிமேஷன் - மறு செய்கை - எண்ணிக்கை

எத்தனை முறை மீண்டும் மீண்டும் செய்யப்படுகிறது. நாம் குறிப்பிடலாம் எல்லையற்ற அனிமேஷனை காலவரையின்றி மீண்டும் செய்ய.

அனிமேஷன் - பெயர்

அனிமேஷனின் ஒவ்வொரு பிரேம்களையும் விவரிக்கும் பெயரைக் குறிப்பிட இது பயன்படுத்தப்படுகிறது.

அனிமேஷன் - நாடகம் - நிலை

அனிமேஷன் வரிசையை இடைநிறுத்தி மீண்டும் தொடங்க உங்களை அனுமதிக்கிறது.

அனிமேஷன் - நேரம்- செயல்பாடு

இது அனிமேஷனின் தாளத்தைக் குறிக்கிறது, அதாவது அனிமேஷன் பிரேம்கள் எவ்வாறு காட்டப்படுகின்றன, இதற்காக, முடுக்கம் வளைவுகள் நிறுவப்பட்டுள்ளன.

அனிமேஷன் - நிரப்பு - முறை

அனிமேஷன் முடிந்ததும் பண்புகள் என்ன மதிப்புகளைக் கொண்டிருக்கும் என்பதைக் குறிப்பிடுகிறது.

பிரேம்களுடன் வரிசையை அமைக்கவும்

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

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

குறிக்க நேரம் மற்றும் ரிதம், சட்டகம் பயன்படுத்துகிறது சதவிதம் மற்றும் உடன் இருந்து மற்றும்இதற்கு நன்றி, ஆரம்பம் எப்போது 0% மற்றும் முடிவு 100% என்று குறிப்பிடலாம்.

சட்ட மற்றும் உரை அனிமேஷன்

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

75% எழுத்துரு - அளவு: 300%; விளிம்பு - இடது: 25%; அகலம்: 150%;

இந்தக் குறியீட்டைக் கொண்டு, 75% வரிசையில், தலைப்பின் இடது விளிம்பு 25% மற்றும் 200% அளவு 150% அகலத்துடன் இருக்குமாறு உலாவிக்கு பரிந்துரைக்கிறோம்.

அனிமேஷன் மீண்டும்

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

முடிவுக்கு

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

நீங்கள் ஏற்கனவே துணிந்துவிட்டீர்களா?