CSS கியூபிக் பெசியர் உருவாக்கி என்றால் என்ன?
இந்தக் கருவி இரண்டு கட்டுப்பாட்டு புள்ளிகளை இழுப்பதன் மூலம் ஒரு CSS ஈசிங் வளைவை (easing curve) காட்சிப்பூர்வமாக உருவாக்க உங்களை அனுமதிக்கிறது. நீங்கள் வளைவைச் சரிசெய்யும்போது, ஒரு புள்ளி அதன் வழியே நகர்ந்து, சீரான வேகத்தில் நகரும் மற்றொரு புள்ளிக்கு அருகில் அதன் ஈசிங் விளைவை உங்களுக்கு விளக்கிக் காட்டுகிறது. பின்னர், இந்தத் துல்லியமான வளைவுக்கு இணையான cubic-bezier() மதிப்பை இந்தக் கருவி உங்களுக்கு வழங்குகிறது, அதை நீங்கள் நகலெடுத்து உங்கள் CSS-இல் பயன்படுத்திக் கொள்ளலாம்.
உள்ளீடுகள் மற்றும் கட்டுப்பாடுகள்
இந்தக் கருவியில் பின்வரும் உள்ளீடுகளைப் பயன்படுத்தி நீங்கள் ஈசிங் வளைவை வடிவமைக்கலாம்:
- இரண்டு கைப்பிடிகளை இழுத்தல்: இந்த கைப்பிடிகள் ஈசிங் வளைவின் வடிவத்தைக் கட்டுப்படுத்துகின்றன.
- முதல் கட்டுப்பாட்டு புள்ளி X: 0 மற்றும் 1 க்கு இடைப்பட்ட ஒரு எண் மதிப்பு.
- முதல் கட்டுப்பாட்டு புள்ளி Y: -0.70 மற்றும் 1.70 க்கு இடைப்பட்ட ஒரு எண் மதிப்பு.
- இரண்டாவது கட்டுப்பாட்டு புள்ளி X: 0 மற்றும் 1 க்கு இடைப்பட்ட ஒரு எண் மதிப்பு.
- இரண்டாவது கட்டுப்பாட்டு புள்ளி Y: -0.70 மற்றும் 1.70 க்கு இடைப்பட்ட ஒரு எண் மதிப்பு.
- முன்னமைவுகள் தேர்வு: "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out", அல்லது "Back In-Out" போன்ற விருப்பங்களிலிருந்து நீங்கள் தேவையானதைத் தேர்ந்தெடுக்கலாம்.
வெளியீடுகள்
வளைவை நீங்கள் மாற்றியமைக்கும்போது, பின்வரும் வெளியீடுகளைக் காண முடியும்:
- உங்கள் வளைவு: ஈசிங் வளைவின் காட்சி வடிவம்.
- cubic-bezier(x1, y1, x2, y2): வடிவமைக்கப்பட்ட வளைவுக்கு இணையான CSS
cubic-bezier()செயல்பாட்டு மதிப்பு. - Copied:
cubic-bezier()மதிப்பு வெற்றிகரமாக நகலெடுக்கப்பட்ட பிறகு காட்டப்படும் நிலை.
விதிகள் மற்றும் வரம்புகள்
துல்லியமான ஈசிங் வளைவை உருவாக்க பின்வரும் விதிகள் மற்றும் வரம்புகளைப் புரிந்துகொள்வது அவசியமாகும்:
- வளைவானது கீழ்-இடதுபுறத்தில் (தொடக்கம்) இருந்து மேல்-வலதுபுறம் (முடிவு) வரை இயங்குகிறது.
- நேரம் இடமிருந்து வலமாகவும், முன்னேற்றம் மேலாகவும் செல்கிறது.
- கட்டுப்பாட்டு புள்ளிகளுக்கான X மதிப்புகள் எப்போதும் 0 மற்றும் 1 க்கு இடையில் மட்டுமே இருக்க வேண்டும்.
- கட்டுப்பாட்டு புள்ளிகளுக்கான Y மதிப்புகள், எல்லை மீறல் (overshoot) அல்லது பின்வாங்கல் (pull-back) விளைவுகளை உருவாக்குவதற்காக, உச்சிக்கு மேலே அல்லது அடிக்குக் கீழே செல்லலாம்.
- உள்ளீட்டு புலங்களில் X மதிப்புகள் 0–1 வரம்பிற்குள்ளும், Y மதிப்புகள் -0.70–1.70 வரம்பிற்குள்ளும் மட்டுமே இருக்க வேண்டும்.
- "முதல் கட்டுப்பாட்டு புள்ளி X" புலத்தில்
9போன்ற தவறான மதிப்பை உள்ளிட்டு, பின்னர் கவனம் (focus) இழக்கும்போது, அந்த மதிப்பு தானாகவே1ஆக மாறிவிடும். - எண் உள்ளீட்டு புலத்தை முழுமையாக அழித்துவிட்டு, பின்னர் கவனம் இழக்கும்போது, முந்தைய சரியான மதிப்பு மீண்டும் மீட்டமைக்கப்படும்.
- ஒரு கட்டுப்பாட்டு புள்ளி கைப்பிடி மீது கவனம் இருக்கும்போது, இடது அம்பு விசையை (Left arrow key) அழுத்தினால் அதன் மதிப்பு மாறும் (உதாரணமாக,
0.99ஆக மாறும்). - "Back Out" முன்னமைவைத் தேர்ந்தெடுக்கும்போது, அது
cubic-bezier()மதிப்பைcubic-bezier(0.34, 1.56, 0.64, 1)என அமைக்கும். - வெற்று அல்லது எண் அல்லாத உள்ளீடுகள் வழங்கப்பட்டால், கருவி முழுமையான மதிப்புக்காகக் காத்திருக்கும்.
- மதிப்பை நகலெடுக்கும்போது வெற்றிகரமான நிலை மட்டுமே காட்டப்படும்; தோல்வி அல்லது நிராகரிப்புக்கான அறிவிப்புகள் எதுவும் இல்லை.
- ஒரு ஒற்றை
cubic-bezierசெயல்பாடானது எதிர்பார்ப்பு மற்றும் எல்லை மீறல் விளைவுகளை ஏற்படுத்த முடியும் என்றாலும், அது ஒரு திசையில் மட்டுமே நகர்ந்து பின்னர் நிலைபெற முடியும். இதனால் பவுன்ஸ் (bounce) அல்லது எலாஸ்டிக் (elastic) போன்ற பல முறை திசையை மாற்றும் விளைவுகளை வெளிப்படுத்த முடியாது.
தனியுரிமை மற்றும் செயலாக்கம்
இந்தக் கருவியில் உங்கள் தனியுரிமை முழுமையாகப் பாதுகாக்கப்படுகிறது. வளைவு உங்கள் உலாவியிலேயே நேரடியாக வரையப்படுகிறது. நீங்கள் இந்தக் கருவியில் அமைக்கும் எந்தவொரு அமைப்பும் அல்லது தரவும் BroBroGo-விற்கு பதிவேற்றப்படாது.
இந்தக் கருவி யாருக்குத் தேவைப்படும்?
- CSS மாற்றங்கள் (transitions) அல்லது அனிமேஷன்களுக்குத் தனிப்பயனாக்கப்பட்ட ஈசிங் விளைவுகளை உருவாக்க விரும்பும் நபர்கள்.
ease,ease-in,ease-out, மற்றும்ease-in-outபோன்ற பொதுவான CSS நேரச் சார்பு முக்கிய வார்த்தைகளின் பின்னால் உள்ள துல்லியமானcubic-bezier()மதிப்புகளைப் புரிந்து கொள்ள விரும்பும் நபர்கள்.- தங்கள் அனிமேஷன்களில் இறுதி நிலைக்கு முன்னதாகவே பின்வாங்கும் அல்லது எல்லை மீறும் விளைவுகளைச் செயல்படுத்த விரும்பும் நபர்கள்.
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
இரண்டு கைப்பிடிகள் மற்றும் நான்கு எண்கள் என்ன குறிக்கின்றன?
வளைவு கீழ்-இடதுபுறத்தில் (தொடக்கம்) இருந்து மேல்-வலதுபுறம் (முடிவு) வரை இயங்குகிறது, நேரம் இடமிருந்து வலமாகவும், முன்னேற்றம் மேலாகவும் செல்கிறது. இரண்டு கைப்பிடிகள் அதை வளைக்கும் கட்டுப்பாட்டு புள்ளிகள் ஆகும் — ஒவ்வொன்றிலும் ஒரு X மற்றும் Y உள்ளது, எனவே அவை ஒன்றாக cubic-bezier(x1, y1, x2, y2) ஆகும். X எப்போதும் 0 மற்றும் 1 க்கு இடையில் இருக்கும், அதே நேரத்தில் Y இயக்கத்தை எல்லை மீறச் செய்ய அல்லது நிலைபெறுவதற்கு முன்பு பின்வாங்கச் செய்ய மேலே அல்லது கீழே செல்லலாம்.
எனது CSS-இல் இந்த மதிப்பை எவ்வாறு பயன்படுத்துவது?
cubic-bezier()-ஐ நகலெடுத்து, நேரச் சார்பு (timing function) தேவைப்படும் இடங்களில் பயன்படுத்தவும் — transition-timing-function, animation-timing-function, அல்லது சுருக்க வடிவம், எ.கா. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out மற்றும் ease-in-out ஆகிய முக்கிய வார்த்தைகள் நிலையான cubic-bezier வளைவுகள் மட்டுமே, எனவே அந்த முன்னமைவுகளில் ஒன்றைத் தேர்ந்தெடுப்பது அதன் பின்னால் உள்ள துல்லியமான மதிப்பைக் காட்டுகிறது.
இதனால் ஒரு bounce அல்லது elastic விளைவை உருவாக்க முடியுமா?
தனியாக முடியாது. ஒரு ஒற்றை cubic-bezier எதிர்பார்த்து பின்வாங்கவும் மற்றும் எல்லை மீறவும் (overshoot) முடியும் — "back" முன்னமைவுகள் சரியாக அதைச் செய்ய ஒரு கைப்பிடியை பெட்டிக்கு வெளியே இழுக்கின்றன — ஆனால் அது ஒரு வழியில் மட்டுமே நகர்ந்து பின்னர் நிலைபெற முடியும். Bounce மற்றும் elastic ஆகியவை திசையை பல முறை மாற்றுகின்றன, அதை ஒரு ஒற்றை cubic-bezier மூலம் வெளிப்படுத்த முடியாது; அதற்கு CSS keyframes அல்லது பல நிறுத்தங்களைக் கொண்ட linear() செயல்பாடு தேவை.