இதைப் படியுங்கள்: நீங்கள் ஒரு புதிய திட்டத்தில் சேருங்கள், கோட்பேஸில் முழுக்குங்கள், முதல் சில மணிநேரங்களில், வெறுப்பூட்டும் வகையில் பழக்கமான ஒன்றைக் கண்டறியலாம். ஸ்டைல்ஷீட்கள் முழுவதும் சிதறி, ஒரே அடிப்படை அனிமேஷன்களுக்கு பல @keyframes வரையறைகளைக் காணலாம். மூன்று வெவ்வேறு ஃபேட்-இன் விளைவுகள், இரண்டு அல்லது மூன்று ஸ்லைடு மாறுபாடுகள், ஒரு சில ஜூம் அனிமேஷன்கள் மற்றும் குறைந்தது இரண்டு வெவ்வேறு ஸ்பின் அனிமேஷன்கள், ஏன் இல்லை? @keyframes துடிப்பு { இலிருந்து { அளவு: 1; } க்கு { அளவு: 1.1; } }
@keyframes பெரிய துடிப்பு { 0%, 20%, 100% { அளவு: 1; } 10%, 40% { அளவு: 1.2; } }
இந்த காட்சி தெரிந்திருந்தால், நீங்கள் தனியாக இல்லை. பல்வேறு திட்டங்களில் எனது அனுபவத்தில், நான் வழங்கக்கூடிய மிக நிலையான விரைவான வெற்றிகளில் ஒன்று கீஃப்ரேம்களை ஒருங்கிணைப்பதும் தரப்படுத்துவதும் ஆகும். எந்தவொரு புதிய கோட்பேஸ்ஸிலும் எனது முதல் பணிகளில் ஒன்றாக இந்த தூய்மைப்படுத்தலை எதிர்பார்க்கிறேன். தி லாஜிக் பிஹைண்ட் தி கேயாஸ் நீங்கள் இதைப் பற்றி சிந்திக்கும்போது இந்த பணிநீக்கம் சரியான அர்த்தத்தை அளிக்கிறது. நாம் அனைவரும் நமது அன்றாட வேலைகளில் ஒரே மாதிரியான அனிமேஷனைப் பயன்படுத்துகிறோம்: மங்கல்கள், ஸ்லைடுகள், ஜூம்கள், ஸ்பின்கள் மற்றும் பிற பொதுவான விளைவுகள். இந்த அனிமேஷன்கள் மிகவும் நேரடியானவை, மேலும் வேலையைச் செய்ய விரைவான @keyframes வரையறையை உருவாக்குவது எளிது. மையப்படுத்தப்பட்ட அனிமேஷன் அமைப்பு இல்லாமல், டெவலப்பர்கள் இயற்கையாகவே இந்த கீஃப்ரேம்களை புதிதாக எழுதுகிறார்கள், இதே போன்ற அனிமேஷன்கள் ஏற்கனவே கோட்பேஸில் வேறு எங்கும் உள்ளன என்பது தெரியாது. கூறுகள் அடிப்படையிலான கட்டமைப்புகளில் பணிபுரியும் போது இது மிகவும் பொதுவானது (இந்த நாட்களில் நம்மில் பெரும்பாலோர் செய்கிறோம்), ஏனெனில் குழுக்கள் பெரும்பாலும் பயன்பாட்டின் வெவ்வேறு பகுதிகளில் இணையாக வேலை செய்கின்றன. விளைவு? அனிமேஷன் குழப்பம். தி ஸ்மால் பிராப்ளம் கீஃப்ரேம்கள் நகலெடுப்பதில் உள்ள மிகத் தெளிவான சிக்கல்கள், வளர்ச்சி நேரத்தை வீணடிப்பது மற்றும் தேவையற்ற குறியீடு வீங்குதல் ஆகும். பல கீஃப்ரேம் வரையறைகள் தேவைகள் மாறும்போது புதுப்பிக்க பல இடங்களைக் குறிக்கிறது. உங்கள் ஃபேட் அனிமேஷனின் நேரத்தை சரிசெய்ய வேண்டுமா? உங்கள் கோட்பேஸ் முழுவதும் ஒவ்வொரு நிகழ்வையும் தேட வேண்டும். எளிதாக்கும் செயல்பாடுகளை தரப்படுத்த வேண்டுமா? அனைத்து மாறுபாடுகளையும் கண்டறிய நல்ல அதிர்ஷ்டம். பராமரிப்புப் புள்ளிகளின் இந்தப் பெருக்கல் எளிய அனிமேஷன் புதுப்பிப்புகளைக் கூட நேரத்தைச் செலவழிக்கும் பணியாக ஆக்குகிறது. பெரிய பிரச்சனை இந்த கீஃப்ரேம்களின் நகல் மேற்பரப்புக்கு அடியில் பதுங்கியிருக்கும் மிகவும் நயவஞ்சகமான சிக்கலை உருவாக்குகிறது: உலகளாவிய நோக்கப் பொறி. கூறு அடிப்படையிலான கட்டமைப்புகளுடன் பணிபுரியும் போது கூட, CSS கீஃப்ரேம்கள் எப்போதும் உலகளாவிய நோக்கத்தில் வரையறுக்கப்படுகின்றன. இதன் பொருள் அனைத்து கீஃப்ரேம்களும் அனைத்து கூறுகளுக்கும் பொருந்தும். எப்போதும். ஆம், உங்கள் பாகத்தில் நீங்கள் வரையறுத்துள்ள கீஃப்ரேம்களை உங்கள் அனிமேஷன் பயன்படுத்த வேண்டிய அவசியமில்லை. உலகளாவிய நோக்கத்தில் ஏற்றப்பட்ட அதே பெயருடன் பொருந்தக்கூடிய கடைசி கீஃப்ரேம்களை இது பயன்படுத்துகிறது. உங்கள் கீஃப்ரேம்கள் அனைத்தும் ஒரே மாதிரியாக இருக்கும் வரை, இது ஒரு சிறிய சிக்கலாகத் தோன்றலாம். ஆனால் ஒரு குறிப்பிட்ட பயன்பாட்டிற்கான அனிமேஷனைத் தனிப்பயனாக்க விரும்பும் தருணத்தில், நீங்கள் சிக்கலில் உள்ளீர்கள், அல்லது அதைவிட மோசமாக, நீங்கள்தான் அவற்றை ஏற்படுத்துவீர்கள். உங்கள் அனிமேஷன் வேலை செய்யாது, ஏனெனில் உங்கள் அனிமேஷன், உங்கள் கீஃப்ரேம்களை மேலெழுதுதல், அல்லது உங்களின் கூறு ஏற்றப்படும், மேலும் அந்த கீஃப்ரேமின் பெயரைப் பயன்படுத்தி மற்ற எல்லா கூறுகளுக்கும் தற்செயலாக அனிமேஷன் நடத்தையை மாற்றியமைக்கும். சிக்கலை நிரூபிக்கும் ஒரு எளிய எடுத்துக்காட்டு இங்கே: .கூறு-ஒன்று { /* கூறு பாணிகள் */ animation: pulse 1s ஈஸ்-இன்-அவுட் எல்லையற்ற மாற்று; }
/* இந்த @keyframes வரையறை வேலை செய்யாது */ @keyframes துடிப்பு { இலிருந்து { அளவு: 1; } க்கு { அளவு: 1.1; } }
/* பின்னர் குறியீட்டில்... */
.கூறு-இரண்டு { /* கூறு பாணிகள் */ animation: pulse 1s Ease-in-out infinite; }
/* இந்த கீஃப்ரேம்கள் இரண்டு கூறுகளுக்கும் பொருந்தும் */ @keyframes துடிப்பு { 0%, 20%, 100% { அளவு: 1; } 10%, 40% { அளவு: 1.2; } }
இரண்டு கூறுகளும் ஒரே அனிமேஷன் பெயரைப் பயன்படுத்துகின்றன, ஆனால் இரண்டாவது @keyframes வரையறை முதல் ஒன்றை மேலெழுதுகிறது. இப்போது கூறு-ஒன்று மற்றும் கூறு-இரண்டு இரண்டும் இரண்டாவது கீஃப்ரேம்களைப் பயன்படுத்தும், எந்த கூறு எந்த கீஃப்ரேம்களை வரையறுக்கிறது என்பதைப் பொருட்படுத்தாமல். அமித் ஷீன் எழுதிய பென் கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 1 [ஃபோர்க்டு] பார்க்கவும். மோசமான பகுதி? இது பெரும்பாலும் உள்ளூர் மேம்பாட்டில் சரியாக வேலை செய்யும் ஆனால் உருவாக்க செயல்முறைகள் உங்கள் ஸ்டைல்ஷீட்களின் ஏற்றுதல் வரிசையை மாற்றும் போது உற்பத்தியில் மர்மமான முறையில் உடைந்து விடும். எந்தெந்த பாகங்கள் ஏற்றப்படுகின்றன, எந்த வரிசையில் உள்ளன என்பதைப் பொறுத்து வித்தியாசமாக நடந்துகொள்ளும் அனிமேஷன்களுடன் நீங்கள் முடிவடையும். தீர்வு: ஒருங்கிணைந்த கீஃப்ரேம்கள் இந்த குழப்பத்திற்கான பதில் வியக்கத்தக்க எளிமையானது: பகிரப்பட்ட ஸ்டைல்ஷீட்டில் சேமிக்கப்பட்ட முன் வரையறுக்கப்பட்ட டைனமிக் கீஃப்ரேம்கள். ஒவ்வொரு கூறுகளும் அதன் சொந்த அனிமேஷன்களை வரையறுக்க அனுமதிப்பதற்குப் பதிலாக, நன்கு ஆவணப்படுத்தப்பட்ட, எளிதான மையப்படுத்தப்பட்ட கீஃப்ரேம்களை உருவாக்குகிறோம்.பயன்படுத்தவும், பராமரிக்கவும் மற்றும் உங்கள் திட்டத்தின் குறிப்பிட்ட தேவைகளுக்கு ஏற்பவும். அதை கீஃப்ரேம் டோக்கன்களாக நினைத்துப் பாருங்கள். வண்ணங்கள் மற்றும் இடைவெளிகளுக்கு டோக்கன்களைப் பயன்படுத்துவதைப் போலவே, நம்மில் பலர் ஏற்கனவே அனிமேஷன் பண்புகளுக்காக டோக்கன்களைப் பயன்படுத்துகிறோம், கால அளவு மற்றும் எளிதாக்கும் செயல்பாடுகள், ஏன் கீஃப்ரேம்களுக்கும் டோக்கன்களைப் பயன்படுத்தக்கூடாது? இந்த அணுகுமுறை நீங்கள் பயன்படுத்தும் தற்போதைய வடிவமைப்பு டோக்கன் பணிப்பாய்வுகளுடன் இயற்கையாக ஒருங்கிணைக்க முடியும், அதே நேரத்தில் சிறிய சிக்கல் (குறியீடு நகல்) மற்றும் பெரிய சிக்கல் (உலகளாவிய நோக்கம் முரண்பாடுகள்) இரண்டையும் ஒரே நேரத்தில் தீர்க்கும். யோசனை நேரடியானது: எங்கள் பொதுவான அனிமேஷன்கள் அனைத்திற்கும் உண்மையின் ஒரு மூலத்தை உருவாக்கவும். இந்தப் பகிரப்பட்ட ஸ்டைல்ஷீட்டில், எங்கள் திட்டம் உண்மையில் பயன்படுத்தும் அனிமேஷன் வடிவங்களை உள்ளடக்கிய கவனமாக வடிவமைக்கப்பட்ட கீஃப்ரேம்கள் உள்ளன. மங்கலான அனிமேஷன் ஏற்கனவே எங்காவது எங்கள் கோட்பேஸில் உள்ளதா என்று யூகிக்க வேண்டாம். மற்ற கூறுகளிலிருந்து தற்செயலாக அனிமேஷன்களை மேலெழுத வேண்டாம். ஆனால் இங்கே முக்கியமானது: இவை நிலையான நகல்-பேஸ்ட் அனிமேஷன்கள் அல்ல. அவை CSS தனிப்பயன் பண்புகள் மூலம் மாறும் மற்றும் தனிப்பயனாக்கக்கூடியதாக வடிவமைக்கப்பட்டுள்ளன, ஒரே இடத்தில் சற்று பெரிய "பல்ஸ்" அனிமேஷன் தேவைப்பட்டால், குறிப்பிட்ட பயன்பாட்டு நிகழ்வுகளுக்கு அனிமேஷன்களை மாற்றியமைக்கும் நெகிழ்வுத்தன்மையைக் கொண்டிருக்கும் போது, நிலைத்தன்மையை பராமரிக்க அனுமதிக்கிறது. முதல் Keyframes டோக்கனை உருவாக்குதல் நாம் சமாளிக்க வேண்டிய முதல் குறைந்த தொங்கும் பழங்களில் ஒன்று "ஃபேட்-இன்" அனிமேஷன். எனது சமீபத்திய திட்டங்களில் ஒன்றில், ஒரு டஜன் தனித்தனி ஃபேட்-இன் வரையறைகளைக் கண்டேன், ஆம், அவை அனைத்தும் ஒளிபுகாநிலையை 0 முதல் 1 வரை அனிமேஷன் செய்தன. எனவே, ஒரு புதிய ஸ்டைல்ஷீட்டை உருவாக்கி, அதை kf-tokens.css என்று அழைப்போம், அதை எங்கள் திட்டத்தில் இறக்குமதி செய்து, அதன் உள்ளே சரியான கருத்துகளுடன் எங்கள் கீஃப்ரேம்களை வைப்போம். /* keyframes-tokens.css */
/* * ஃபேட் இன் - ஃபேட் நுழைவு அனிமேஷன் * பயன்பாடு: அனிமேஷன்: kf-fade-in 0.3s Ease-out; */ @keyframes kf-fade-in { இலிருந்து { ஒளிபுகாநிலை: 0; } க்கு { ஒளிபுகாநிலை: 1; } }
இந்த ஒற்றை @keyframes அறிவிப்பு, எங்கள் கோட்பேஸ் முழுவதும் சிதறிய ஃபேட்-இன் அனிமேஷன்களை மாற்றுகிறது. சுத்தமான, எளிமையான மற்றும் உலகளவில் பொருந்தும். இப்போது இந்த டோக்கனை வரையறுத்துள்ளோம், எங்கள் திட்டம் முழுவதும் எந்த கூறுகளிலிருந்தும் இதைப் பயன்படுத்தலாம்: .மாதிரி { அனிமேஷன்: kf-fade-in 0.3s Ease-out; }
.உதவிக்குறிப்பு { அனிமேஷன்: kf-fade-in 0.2s ஈஸ்-இன்-அவுட்; }
.அறிவிப்பு { அனிமேஷன்: kf-fade-in 0.5s Ease-out; }
அமித் ஷீனின் பென் கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 2 [ஃபோர்க்டு] பார்க்கவும். குறிப்பு: எங்களின் அனைத்து @keyframes பெயர்களிலும் kf- முன்னொட்டைப் பயன்படுத்துகிறோம். இந்த முன்னொட்டு ஒரு பெயர்வெளியாக செயல்படுகிறது, இது திட்டத்தில் இருக்கும் அனிமேஷன்களுடன் முரண்பாடுகளை பெயரிடுவதைத் தடுக்கிறது மற்றும் இந்த கீஃப்ரேம்கள் எங்கள் கீஃப்ரேம்கள் டோக்கன்கள் கோப்பிலிருந்து வந்தவை என்பதை உடனடியாகத் தெளிவாக்குகிறது. டைனமிக் ஸ்லைடை உருவாக்குதல் கேஎஃப்-ஃபேட்-இன் கீஃப்ரேம்கள் சிறப்பாக செயல்படுகின்றன, ஏனெனில் இது எளிமையானது மற்றும் விஷயங்களை குழப்புவதற்கு இடமில்லை. இருப்பினும், மற்ற அனிமேஷன்களில், நாம் மிகவும் ஆற்றல் வாய்ந்ததாக இருக்க வேண்டும், மேலும் இங்கு CSS தனிப்பயன் பண்புகளின் மகத்தான சக்தியைப் பயன்படுத்த முடியும். சிதறிய நிலையான அனிமேஷன்களுடன் ஒப்பிடும்போது கீஃப்ரேம்கள் டோக்கன்கள் உண்மையில் பிரகாசிக்கின்றன. ஒரு பொதுவான காட்சியை எடுத்துக் கொள்வோம்: "ஸ்லைடு-இன்" அனிமேஷன்கள். ஆனால் எங்கிருந்து சரிய? வலதுபுறத்தில் இருந்து 100px? இடமிருந்து 50%? அது திரையின் மேலிருந்து நுழைய வேண்டுமா? அல்லது கீழே இருந்து மிதக்கலாமா? பல சாத்தியக்கூறுகள் உள்ளன, ஆனால் ஒவ்வொரு திசைக்கும் ஒவ்வொரு மாறுபாட்டிற்கும் தனித்தனி கீஃப்ரேம்களை உருவாக்குவதற்குப் பதிலாக, எல்லா சூழ்நிலைகளுக்கும் ஏற்ப ஒரு நெகிழ்வான டோக்கனை உருவாக்கலாம்: /* * ஸ்லைடு இன் - திசை ஸ்லைடு அனிமேஷன் * திசையை கட்டுப்படுத்த --kf-slide-லிருந்து பயன்படுத்தவும் * இயல்புநிலை: இடமிருந்து ஸ்லைடுகள் (-100%) * பயன்பாடு: * அனிமேஷன்: kf-slide-in 0.3s Ease-out; * --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; } }
இப்போது நாம் இந்த ஒற்றை @keyframes டோக்கனை எந்த ஸ்லைடு திசைக்கும் --kf-slide-from தனிப்பயன் சொத்தை மாற்றுவதன் மூலம் பயன்படுத்தலாம்: பக்கப்பட்டி { அனிமேஷன்: kf-slide-in 0.3s Ease-out; /* இயல்புநிலை மதிப்பைப் பயன்படுத்துகிறது: இடமிருந்து ஸ்லைடுகள் */ }
.அறிவிப்பு { அனிமேஷன்: kf-slide-in 0.4s Ease-out; --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-zoom கீஃப்ரேம்களை உருவாக்குவோம்:
/* * பெரிதாக்கு - அளவிலான அனிமேஷன் * அளவு மதிப்புகளைக் கட்டுப்படுத்த --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%) இன் இயல்புநிலையானது, டோஸ்ட் செய்திகள் மற்றும் கார்டுகள் போன்ற பெரும்பாலான UI உறுப்புகளுக்குச் சரியாகச் செயல்படுகிறது, அதே சமயம் சிறப்பு நிகழ்வுகளுக்குத் தனிப்பயனாக்க எளிதானது. அமித் ஷீன் எழுதிய பென் கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 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 { animation: kf-spin 1s லீனியர் இன்ஃபினைட்; /* இயல்புநிலையைப் பயன்படுத்துகிறது: 0deg முதல் 360deg வரை சுழலும் */ }
.ஃபாஸ்ட்-லோடர் { animation: kf-spin 1.2s ஈஸ்-இன்-அவுட் இன்ஃபினைட் ஆல்டர்நேட்; --kf-spin-turns: 3; /* ஒரு சுழற்சிக்கு ஒவ்வொரு திசைக்கும் 3 முழு சுழற்சிகள்*/ }
.படி-தலைகீழ் { animation: kf-spin 1.5s படிகள்(8) infinite; --kf-spin-to: -360deg; /* எதிரெதிர் திசையில் */ }
.நுட்பமான அசைவு { animation: 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); } }
இது பல பண்புகளை உயிரூட்டக்கூடிய நெகிழ்வான துடிப்பை உருவாக்குகிறது: .call-to-action { animation: kf-pulse 0.6s infinite alternate; --kf-pulse-opacity-from: 0.5; /* ஒளிபுகா துடிப்பு */ }
.notification-dot { animation: kf-pulse 0.6s ஈஸ்-இன்-அவுட் இன்ஃபினைட் ஆல்டர்நேட்; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* அளவிலான துடிப்பு */ }
.text-highlight { animation: kf-pulse 1.5s ஈஸ்-அவுட் இன்ஃபினைட்; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* அளவு மற்றும் ஒளிபுகா துடிப்பு */ }
அமித் ஷீன் எழுதிய பென் கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 6 [ஃபோர்க்டு] பார்க்கவும். இந்த ஒற்றை கேஎஃப்-பல்ஸ் கீஃப்ரேம் நுட்பமான கவனத்தை ஈர்க்கிறது முதல் வியத்தகு சிறப்பம்சங்கள் வரை அனைத்தையும் கையாள முடியும், தனிப்பயனாக்க எளிதானது. மேம்பட்ட தளர்வு கீஃப்ரேம்கள் டோக்கன்களைப் பயன்படுத்துவதில் உள்ள ஒரு சிறந்த விஷயம் என்னவென்றால், எங்கள் அனிமேஷன் லைப்ரரியை விரிவுபடுத்துவது மற்றும் எலாஸ்டிக் அல்லது பவுன்ஸ் போன்ற புதிதாக எழுதுவதற்கு பெரும்பாலான டெவலப்பர்கள் கவலைப்படாத விளைவுகளை வழங்குவது எவ்வளவு எளிது. ஜம்ப் உயரத்தைக் கட்டுப்படுத்த --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; }
.எலாஸ்டிக்-இன் { animation: 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 அனிமேஷன் மட்டுமே பொருந்தும் என்பதால், இது திட்டமிட்டபடி செயல்படாது. .மோசமான சேர்க்கை { அனிமேஷன்: kf-zoom 0.5s முன்னோக்கி, kf-துடிப்பு 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-pulse அனிமேஷன் kf-zoom அனிமேஷனை மாற்றுகிறது, எனவே நாம் ஆரம்ப ஜூம் பார்க்க மாட்டோம் மற்றும் 1.2 க்கு எதிர்பார்க்கப்படும் அளவைப் பெற முடியாது. சேர்க்க அனிமேஷன்-கலவையை அமைப்பதன் மூலம், இரண்டு அனிமேஷன்களையும் இணைக்க உலாவிக்கு சொல்கிறோம். இது நாம் விரும்பும் முடிவை அளிக்கிறது. .கூறு-இரண்டு { அனிமேஷன்-கலவை: சேர்; }
அமித் ஷீன் எழுதிய பென் கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 8 [ஃபோர்க்டு] பார்க்கவும். ஒரே சொத்தின் மீதான விளைவுகளை நாம் இணைக்க விரும்பும் பெரும்பாலான சந்தர்ப்பங்களில் இந்த அணுகுமுறை நன்றாக வேலை செய்கிறது. நிலையான சொத்து மதிப்புகளுடன் அனிமேஷன்களை இணைக்க வேண்டியிருக்கும் போது இது பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, நாம் விரும்பும் இடத்தில் அதை சரியாக நிலைநிறுத்துவதற்கு மொழிபெயர்ப்பு சொத்தை பயன்படுத்தும் ஒரு உறுப்பு எங்களிடம் இருந்தால், அதை kf-ஸ்லைடு-இன் கீஃப்ரேம்களில் அனிமேஷன் செய்ய விரும்பினால், அனிமேஷன்-கலவை இல்லாமல் ஒரு மோசமான புலப்படும் ஜம்ப் கிடைக்கும். அமித் ஷீன் எழுதிய பென் கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 9 [ஃபோர்க்டு] பார்க்கவும். அனிமேஷன்-கலவையை சேர்க்க, அனிமேஷன் ஏற்கனவே உள்ளவற்றுடன் சீராக இணைக்கப்பட்டுள்ளதுஉருமாற்றம், எனவே உறுப்பு இடத்தில் தங்கி, எதிர்பார்த்தபடி உயிரூட்டுகிறது. அனிமேஷன் ஸ்டாக்கர் பல அனிமேஷனைக் கையாள்வதற்கான மற்றொரு வழி, "தடுமாற்றம்" செய்வதாகும் - அதாவது, முதல் அனிமேஷனை முடித்த பிறகு, இரண்டாவது அனிமேஷனை சிறிது தொடங்கவும். ஒவ்வொரு வழக்குக்கும் இது ஒரு தீர்வு அல்ல, ஆனால் ஒரு நுழைவு அனிமேஷனைத் தொடர்ந்து தொடர்ச்சியான அனிமேஷனைப் பெறும்போது இது பயனுள்ளதாக இருக்கும். /* மங்கல் + ஒளிபுகா துடிப்பு */ .அறிவிப்பு { அனிமேஷன்: kf-fade-in 2s ஈஸி-அவுட், kf-துடிப்பு 0.5s 2s ஈஸ்-இன்-அவுட் எல்லையற்ற மாற்று; --kf-pulse-opacity-to: 0.5; }
அமித் ஷீன் எழுதிய பென் கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 10 [ஃபோர்க்டு] பார்க்கவும். ஆர்டர் விஷயங்கள் நாங்கள் பணிபுரியும் அனிமேஷன்களில் பெரும்பகுதி மாற்றும் பண்புகளைப் பயன்படுத்துகிறது. பெரும்பாலான சந்தர்ப்பங்களில், இது மிகவும் வசதியானது. டிரான்ஸ்ஃபார்ம் அனிமேஷன்கள் GPU-முடுக்கப்பட்டதாக இருப்பதால் இது ஒரு செயல்திறன் நன்மையையும் கொண்டுள்ளது. ஆனால் நாம் உருமாற்றங்களைப் பயன்படுத்தினால், நமது மாற்றங்களைச் செய்யும் வரிசை முக்கியமானது என்பதை நாம் ஏற்றுக்கொள்ள வேண்டும். நிறைய. இதுவரை எங்களின் கீஃப்ரேம்களில், தனிப்பட்ட மாற்றங்களைப் பயன்படுத்தியுள்ளோம். விவரக்குறிப்புகளின்படி, இவை எப்போதும் ஒரு நிலையான வரிசையில் பயன்படுத்தப்படுகின்றன: முதலில், உறுப்பு மொழிபெயர்க்கப்படும், பின்னர் சுழற்று, பின்னர் அளவிடப்படும். இது அர்த்தமுள்ளதாக இருக்கிறது மற்றும் நம்மில் பெரும்பாலோர் எதிர்பார்ப்பதும் இதுதான். இருப்பினும், நாம் மாற்றும் பண்புகளைப் பயன்படுத்தினால், செயல்பாடுகள் எழுதப்பட்ட வரிசை அவை பயன்படுத்தப்படும் வரிசையாகும். இந்த நிலையில், X- அச்சில் 100 பிக்சல்களை நகர்த்தி, அதை 45 டிகிரியால் சுழற்றினால், முதலில் அதை 45 டிகிரி சுழற்றி 100 பிக்சல்கள் நகர்த்துவதற்கு சமம் அல்ல. /* இளஞ்சிவப்பு சதுரம்: முதலில் மொழிபெயர்த்து, பின்னர் சுழற்று */ .உதாரணம்-ஒன்று { உருமாற்றம்: translateX(100px) சுழற்று(45deg); }
/* பச்சை சதுரம்: முதலில் சுழற்று, பின்னர் மொழிபெயர்க்க */ .உதாரணம்-இரண்டு { உருமாற்றம்: சுழற்று(45டிகி) ட்ரான்ஸ்லேட்எக்ஸ்(100பிக்சல்); }
அமித் ஷீனின் பேனா கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 11 [ஃபோர்க்டு] பார்க்கவும். ஆனால் உருமாற்ற வரிசையின் படி, அனைத்து தனிப்பட்ட உருமாற்றங்களும் - நாம் கீஃப்ரேம்கள் டோக்கன்களுக்குப் பயன்படுத்திய அனைத்தும் - உருமாற்ற செயல்பாடுகளுக்கு முன்பே நடக்கும். அதாவது நீங்கள் மாற்றும் சொத்தில் அமைக்கும் அனைத்தும் அனிமேஷன்களுக்குப் பிறகு நடக்கும். ஆனால் நீங்கள் அமைத்தால், எடுத்துக்காட்டாக, kf-spin கீஃப்ரேம்களுடன் ஒன்றாக மொழிபெயர்த்தால், மொழிமாற்றம் அனிமேஷனுக்கு முன் நடக்கும். இன்னும் குழப்பமா?! நிலையான மதிப்புகள் ஒரே அனிமேஷனுக்கு வெவ்வேறு முடிவுகளை ஏற்படுத்தக்கூடிய சூழ்நிலைகளுக்கு இது வழிவகுக்கிறது, பின்வரும் நிகழ்வைப் போல:
/* இரு ஸ்பின்னர்களுக்கும் பொதுவான அனிமேஷன் */ .ஸ்பின்னர் { animation: kf-spin 1s லீனியர் இன்ஃபினைட்; }
/* பிங்க் ஸ்பின்னர்: சுழற்றுவதற்கு முன் மொழிபெயர் (தனிப்பட்ட மாற்றம்) */ .ஸ்பின்னர்-பிங்க் { மொழிபெயர்: 100% 50%; }
/* பச்சை ஸ்பின்னர்: சுழற்றவும் பின்னர் மொழிபெயர்க்கவும் (செயல்பாட்டு வரிசை) */ .ஸ்பின்னர்-பச்சை { உருமாற்றம்: மொழிபெயர் (100%, 50%); }
அமித் ஷீன் எழுதிய பென் கீஃப்ரேம்ஸ் டோக்கன்கள் - டெமோ 12 [ஃபோர்க்டு] பார்க்கவும். முதல் ஸ்பின்னர் (இளஞ்சிவப்பு) kf-ஸ்பின் சுழற்றுவதற்கு முன் நடக்கும் மொழிபெயர்ப்பைப் பெறுவதை நீங்கள் காணலாம், எனவே அது முதலில் அதன் இடத்திற்கு நகர்ந்து பின்னர் சுழலும். இரண்டாவது ஸ்பின்னர் (பச்சை) ஒரு மொழிமாற்றம் () செயல்பாட்டைப் பெறுகிறது, இது தனிப்பட்ட மாற்றத்திற்குப் பிறகு நடக்கும், எனவே உறுப்பு முதலில் சுழல்கிறது, பின்னர் அதன் தற்போதைய கோணத்துடன் தொடர்புடையதாக நகர்கிறது, மேலும் அந்த பரந்த சுற்றுப்பாதை விளைவைப் பெறுகிறோம். இல்லை, இது ஒரு பிழை அல்ல. பல அனிமேஷன்கள் அல்லது பல மாற்றங்களுடன் பணிபுரியும் போது CSS பற்றி நாம் தெரிந்து கொள்ள வேண்டிய விஷயங்களில் இதுவும் ஒன்று. தேவைப்பட்டால், rotate() செயல்பாட்டைப் பயன்படுத்தி உறுப்புகளைச் சுழற்றக்கூடிய 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 { /* அசல் பவுன்ஸ் கீஃப்ரேம்கள் */ } }
இப்போது, இயக்கம் குறைக்கப்பட்ட பயனர்கள் தோற்ற உணர்வைப் பெறுகிறார்கள், ஆனால் துள்ளல் அல்லது மீள் அனிமேஷனின் தீவிர அசைவு இல்லாமல். கட்டுமானத் தொகுதிகள் உள்ள நிலையில், அவற்றை எவ்வாறு உண்மையான பணிப்பாய்வு பகுதியாக மாற்றுவது என்பது அடுத்த கேள்வி. நெகிழ்வான கீஃப்ரேம்களை எழுதுவது ஒரு விஷயம், ஆனால் ஒரு பெரிய திட்டத்தில் அவற்றை நம்பகமானதாக மாற்றுவதற்கு நான் கடினமான வழியைக் கற்றுக்கொள்ள வேண்டிய சில உத்திகள் தேவை. அமலாக்க உத்திகள் & சிறந்த நடைமுறைகள் கீஃப்ரேம்கள் டோக்கன்களின் திடமான நூலகம் எங்களிடம் இருந்தால், அவற்றை எவ்வாறு அன்றாட வேலைகளில் கொண்டு வருவது என்பதுதான் உண்மையான சவால்.
ஒரே நேரத்தில் அனைத்து கீஃப்ரேம்களையும் விட்டுவிட்டு, சிக்கலைத் தீர்த்துவிட்டதாக அறிவிக்க வேண்டும் என்பதுதான் தூண்டுதலாகும், ஆனால் நடைமுறையில் படிப்படியான தத்தெடுப்பு மூலம் சிறந்த முடிவுகள் வருவதை நான் கண்டேன். ஃபேட் அல்லது ஸ்லைடு போன்ற பொதுவான அனிமேஷன்களுடன் தொடங்கவும். பெரிய மாற்றங்களைத் தேவையில்லாமல் உடனடி மதிப்பைக் காட்டும் எளிதான வெற்றிகள் இவை. பெயரிடுதல் கவனத்திற்குரிய மற்றொரு புள்ளி. ஒரு நிலையான முன்னொட்டு அல்லது பெயர்வெளி எந்த அனிமேஷன் டோக்கன்கள் மற்றும் அவை உள்ளூர் ஒன்-ஆஃப்கள் என்பதைத் தெளிவாக்குகிறது. இது தற்செயலான மோதல்களைத் தடுக்கிறது மற்றும் புதிய குழு உறுப்பினர்கள் பகிரப்பட்ட அமைப்பை ஒரே பார்வையில் அடையாளம் காண உதவுகிறது. குறியீட்டைப் போலவே ஆவணப்படுத்தலும் முக்கியமானது. ஒவ்வொரு கீஃப்ரேம் டோக்கனுக்கும் மேலே ஒரு சிறிய கருத்து கூட பல மணிநேரங்களை யூகிக்காமல் சேமிக்கும். ஒரு டெவலப்பர் டோக்கன்கள் கோப்பைத் திறக்க முடியும், அவர்களுக்குத் தேவையான விளைவை ஸ்கேன் செய்து, அவற்றின் கூறுகளுக்கு நேராக பயன்பாட்டு முறையை நகலெடுக்க முடியும். நெகிழ்வுத்தன்மையே இந்த அணுகுமுறையை முயற்சிக்கு மதிப்பளிக்கிறது. விவேகமான தனிப்பயன் பண்புகளை வெளிப்படுத்துவதன் மூலம், கணினியை உடைக்காமல் அனிமேஷனை மாற்றியமைக்க குழுக்களுக்கு இடமளிக்கிறோம். அதே நேரத்தில், மிகைப்படுத்தாமல் இருக்க முயற்சி செய்யுங்கள். முக்கியமான கைப்பிடிகளை வழங்கவும், மீதமுள்ளவற்றைக் கருத்தில் கொள்ளவும். இறுதியாக, அணுகலை நினைவில் கொள்ளுங்கள். ஒவ்வொரு அனிமேஷனுக்கும் குறைக்கப்பட்ட இயக்க மாற்று தேவையில்லை, ஆனால் பலருக்கு தேவை. இந்தச் சீர்திருத்தங்களைச் சீக்கிரமாகச் செய்வதன் மூலம், நாம் அவற்றைப் பின்னர் மாற்றியமைக்க வேண்டியதில்லை, மேலும் எங்கள் பயனர்கள் அதைக் குறிப்பிடவில்லை என்றாலும் கூட கவனிக்கும் அளவை இது காட்டுகிறது.
எனது அனுபவத்தில், எங்கள் வடிவமைப்பு டோக்கன்களின் பணிப்பாய்வுகளின் ஒரு பகுதியாக கீஃப்ரேம் டோக்கன்களைக் கையாள்வதே அவற்றை ஒட்டிக்கொள்ள வைக்கிறது. அவை அமைந்தவுடன், அவை ஸ்பெஷல் எஃபெக்ட்கள் போல உணர்வதை நிறுத்தி, வடிவமைப்பு மொழியின் ஒரு பகுதியாக மாறும், இது தயாரிப்பு எவ்வாறு நகர்கிறது மற்றும் பதிலளிக்கிறது என்பதற்கான இயற்கையான நீட்டிப்பாகும். மடக்குதல் அனிமேஷன்கள் இடைமுகங்களை உருவாக்குவதில் மிகவும் மகிழ்ச்சியான பகுதிகளாக இருக்கலாம், ஆனால் கட்டமைப்பு இல்லாமல், அவை விரக்தியின் மிகப்பெரிய ஆதாரங்களில் ஒன்றாகவும் மாறும். கீஃப்ரேம்களை டோக்கன்களாகக் கருதுவதன் மூலம், வழக்கமாக குழப்பமான மற்றும் நிர்வகிக்க கடினமாக இருக்கும் ஒன்றை எடுத்து, அதை தெளிவான, யூகிக்கக்கூடிய அமைப்பாக மாற்றுவீர்கள். உண்மையான மதிப்பு ஒரு சில வரிகளை சேமிப்பதில் மட்டும் இல்லை. நீங்கள் ஃபேட், ஸ்லைடு, ஜூம் அல்லது ஸ்பின் ஆகியவற்றைப் பயன்படுத்தும் போது, அது திட்டம் முழுவதும் எப்படிச் செயல்படும் என்பதை நீங்கள் நன்கு அறிவீர்கள். இது முடிவில்லாத மாறுபாடுகளின் குழப்பம் இல்லாமல் தனிப்பயன் பண்புகளிலிருந்து வரும் நெகிழ்வுத்தன்மையில் உள்ளது. மேலும் இது என சேர்க்கப்படுவதற்கு பதிலாக அடித்தளத்தில் கட்டமைக்கப்பட்ட அணுகல்தன்மையில் உள்ளதுஒரு பின் சிந்தனை. இந்த யோசனைகள் வெவ்வேறு குழுக்கள் மற்றும் வெவ்வேறு கோட்பேஸ்களில் செயல்படுவதை நான் பார்த்திருக்கிறேன், மேலும் முறை எப்போதும் ஒரே மாதிரியாக இருக்கும். டோக்கன்கள் அமைக்கப்பட்டவுடன், கீஃப்ரேம்கள் தந்திரங்களின் சிதறிய தொகுப்பாக இருப்பதை நிறுத்தி, வடிவமைப்பு மொழியின் ஒரு பகுதியாக மாறும். அவை தயாரிப்பை மிகவும் வேண்டுமென்றே, மிகவும் சீரானதாக, மேலும் உயிருடன் உணர வைக்கின்றன. இந்தக் கட்டுரையிலிருந்து ஒரு விஷயத்தை நீங்கள் எடுத்துக் கொண்டால், அது இப்படி இருக்கட்டும்: அனிமேஷன்கள் வண்ணங்கள், அச்சுக்கலை மற்றும் இடைவெளி ஆகியவற்றிற்கு நாம் ஏற்கனவே கொடுக்கும் அதே கவனிப்பு மற்றும் கட்டமைப்பிற்கு தகுதியானவை. கீஃப்ரேம் டோக்கன்களில் ஒரு சிறிய முதலீடு உங்கள் இடைமுகம் நகரும் ஒவ்வொரு முறையும் செலுத்துகிறது.
