CSS மோஷன் பாத் செக்மென்ட்களைக் கட்டுப்படுத்த கற்றுக்கொள்வதன் மூலம் மேம்பட்ட வலை அனிமேஷன்களைத் திறக்கவும். இந்த வழிகாட்டி துல்லியமான பாத் போர்ஷன் கட்டுப்பாட்டிற்கான offset-path, offset-distance மற்றும் keyframe நுட்பங்களை உள்ளடக்கியது.
CSS மோஷன் பாத் செக்மென்ட்களில் தேர்ச்சி பெறுதல்: பாத் போர்ஷன் அனிமேஷனில் ஒரு ஆழமான பார்வை
வலை வடிவமைப்பு மற்றும் மேம்பாட்டின் எப்போதும் மாறிவரும் நிலப்பரப்பில், பயனர் அனுபவத்திற்கு இயக்கம் ஒரு முக்கியமான மொழியாக மாறியுள்ளது. அது கவனத்தை வழிநடத்துகிறது, பின்னூட்டத்தை வழங்குகிறது, மற்றும் நிலையான இடைமுகங்களால் முடியாத வழிகளில் கதைகளைச் சொல்கிறது. பல ஆண்டுகளாக, சிக்கலான இயக்கத்திற்கு கனமான ஜாவாஸ்கிரிப்ட் லைப்ரரிகள் அல்லது பிரத்யேக அனிமேஷன் கருவிகள் தேவைப்பட்டன. இருப்பினும், CSS மோஷன் பாத் தொகுதி ஒரு சக்திவாய்ந்த, இயல்பான தீர்வாக உருவெடுத்துள்ளது, இது டெவலப்பர்களை தங்கள் ஸ்டைல்ஷீட்களில் நேரடியாக தனிப்பயன் வரையறுக்கப்பட்ட பாதைகளில் தனிமங்களை அனிமேட் செய்ய அனுமதிக்கிறது. இது செயல்திறன் மிக்க, அறிவிப்பு அடிப்படையிலான அனிமேஷன்களை உருவாக்குவதில் ஒரு புரட்சியாகும்.
பெரும்பாலான பயிற்சிகள், ஒரு தனிமத்தை ஒரு பாதையின் முழுவதுமாக, ஆரம்பம் முதல் இறுதி வரை அனிமேட் செய்வதன் மூலம் மோஷன் பாத்தை அறிமுகப்படுத்துகின்றன. ஆனால் உங்கள் படைப்பாற்றல் பார்வைக்கு இன்னும் நுணுக்கம் தேவைப்படும்போது என்ன செய்வது? ஒரு பொருள் ஒரு சிக்கலான வடிவத்தின் ஒரு வளைவில் மட்டும் நகர்ந்து, நின்று, பின்னர் மற்றொரு பகுதியில் தொடர வேண்டுமானால் என்ன செய்வது? இங்குதான் உண்மையான தேர்ச்சி உள்ளது: பாதையை மட்டுமல்ல, பயணத்தின் குறிப்பிட்ட பகுதிகளையும் கட்டுப்படுத்துவதில்.
இந்த விரிவான வழிகாட்டி, அடிப்படைகளுக்கு அப்பால் செல்ல விரும்பும் உலகெங்கிலும் உள்ள டெவலப்பர்கள் மற்றும் வடிவமைப்பாளர்களுக்கானது. ஒரு CSS மோஷன் பாத்தின் குறிப்பிட்ட பிரிவுகளில் தனிமங்களை அனிமேட் செய்யத் தேவையான நுட்பங்களை நாங்கள் பிரித்தெடுப்போம், ஒரு வரி ஜாவாஸ்கிரிப்ட் கூட இல்லாமல் ஒரு புதிய நிலைக்கு நடனமாடிய மற்றும் வெளிப்படையான வலை அனிமேஷன்களைத் திறப்போம்.
அடிப்படைகள்: CSS மோஷன் பாத்தின் ஒரு விரைவான சுற்றுப்பயணம்
நாம் பிரிவுகளைக் கட்டுப்படுத்துவதற்கு முன், மோஷன் பாத் வேலை செய்ய உதவும் முக்கிய பண்புகளைப் பற்றி நாம் ஒரு திடமான புரிதலைக் கொண்டிருக்க வேண்டும். நீங்கள் ஏற்கனவே அவற்றுடன் பழகியிருந்தால், இதை ஒரு சுருக்கமான நினைவூட்டலாகக் கருதுங்கள்; நீங்கள் புதியவர் என்றால், இது உங்கள் அத்தியாவசிய தொடக்கப் புள்ளி.
முக்கிய பண்புகள்
CSS மோஷன் பாத் லெவல் 1 விவரக்குறிப்பு, ஒரு தனிமத்தின் இயக்கத்தை வரையறுத்து கட்டுப்படுத்த ஒருங்கிணைந்து செயல்படும் பண்புகளின் தொகுப்பை வரையறுக்கிறது. மிக முக்கியமானவை:
offset-path: இது தொகுதியின் இதயம். இது தனிமம் பின்பற்ற வேண்டிய வடிவியல் பாதையை வரையறுக்கிறது. இதை வரையறுக்க மிகவும் பொதுவான மற்றும் சக்திவாய்ந்த வழிpath()செயல்பாட்டைப் பயன்படுத்துவதாகும், இது ஒரு SVG பாத் தரவு சரத்தை ஏற்றுக்கொள்கிறது. இதன் பொருள், நீங்கள் எந்த வெக்டர் கிராபிக்ஸ் எடிட்டரிலும் (இல்லஸ்ட்ரேட்டர், இங்க்ஸ்கேப் அல்லது ஃபிக்மா போன்றவை) ஒரு சிக்கலான பாதையை வடிவமைத்து, SVG பாத் தரவை நகலெடுத்து, அதை நேரடியாக உங்கள் CSS இல் ஒட்டலாம்.offset-distance: இதை அனிமேஷனுக்கான முன்னேற்றப் பட்டை என்று நினைத்துப் பாருங்கள். இதுoffset-pathவழியே தனிமத்தின் நிலையை குறிப்பிடுகிறது.0%மதிப்பு தனிமத்தை பாதையின் தொடக்கத்திலும்,100%மதிப்பு அதை பாதையின் முடிவிலும் வைக்கிறது. இந்த பண்பை அனிமேட் செய்வதுதான் இயக்கத்தை உருவாக்குகிறது.offset-rotate: இந்த பண்பு, தனிமம் பாதையில் நகரும்போது அதன் நோக்குநிலையைக் கட்டுப்படுத்துகிறது. இயல்பாக, தனிமம் சுழலாது. அதைautoஎன்று அமைப்பது, தனிமத்தின் அடிப்படையை பாதையின் திசையுடன் சீரமைக்க வைக்கிறது, இது சாலையில் கார்கள் அல்லது வானத்தில் விமானங்கள் போன்ற விஷயங்களுக்கு ஏற்றது. நீங்கள்auto 90degபோன்ற ஒரு கோணத்தையும் சேர்க்கலாம், இது தனிமத்தை பாதையின் திசைக்கு செங்குத்தாக இருக்க வைக்கும்.offset-anchor: இது தனிமத்தின் எந்தப் புள்ளி பாதையுடன் இணைக்கப்பட்டுள்ளது என்பதை வரையறுக்கிறது. இயல்புநிலைautoஆகும், இது50% 50%அல்லது தனிமத்தின் மையத்திற்கு சமம். தனிமம் அதன் பாதையில் எவ்வாறு "பின்" செய்யப்படுகிறது என்பதை மாற்ற மற்ற ஆயங்களை (எ.கா., மேல்-இடது மூலைக்கு0% 0%) குறிப்பிடலாம்.
ஒரு எளிய "முழு-பாதை" அனிமேஷன் எடுத்துக்காட்டு
ஒரு எளிய வளைந்த பாதையின் ஆரம்பம் முதல் இறுதி வரை ஒரு பொருளை அனிமேட் செய்யும் ஒரு உன்னதமான எடுத்துக்காட்டுடன் இந்த பண்புகளைச் செயல்பாட்டில் பார்ப்போம். இது பகுதி கட்டுப்பாட்டிற்குள் நாம் செல்வதற்கு முன் நமது அடிப்படையை நிறுவுகிறது.
<!-- HTML Structure -->
<div class="scene">
<div class="dot"></div>
</div>
<style>
.scene {
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin: 2em auto;
}
.dot {
width: 20px;
height: 20px;
background-color: dodgerblue;
border-radius: 50%;
offset-path: path('M 20,100 C 50,20 250,20 280,100');
animation: move-along-full-path 4s infinite linear;
}
@keyframes move-along-full-path {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
</style>
இந்த எடுத்துக்காட்டில், .dot தனிமத்திற்கு ஒரு வளைந்த offset-path ஒதுக்கப்பட்டுள்ளது. பின்னர் move-along-full-path அனிமேஷன் offset-distance ஐ நான்கு வினாடிகளில் 0% இலிருந்து 100% வரை கையாளுகிறது. இது நிலையான, அடிப்படை பயன்பாட்டு வழக்கு. ஆனால் எங்கள் குறிக்கோள் இந்த எளிய தொடக்கத்திலிருந்து இறுதி வரையிலான மாதிரியிலிருந்து விடுபடுவது.
முக்கிய சவால்: ஒரு குறிப்பிட்ட பாதை பகுதியை அனிமேட் செய்தல்
நிஜ உலகம் அரிதாகவே ஒரு எளிய A-to-Z பயணமாக இருக்கிறது. ஒரு நகரத்தின் பொதுப் போக்குவரத்து இணையதளத்தில் ஒரு சுரங்கப்பாதை வரைபடத்தை கற்பனை செய்து பாருங்கள். நீங்கள் முழு நகர நெட்வொர்க்கிலும் ரயிலை அனிமேட் செய்ய விரும்பவில்லை; நீங்கள் இரண்டு குறிப்பிட்ட நிலையங்களுக்கு இடையில் அதன் பயணத்தைக் காட்ட விரும்புகிறீர்கள். அல்லது ஒரு ஊடாடும் தயாரிப்பு சுற்றுப்பயணத்தைக் கவனியுங்கள், அங்கு நீங்கள் பயனரின் கவனத்தை சாதனத்தின் திரையில் இருந்து அதன் கேமரா லென்ஸுக்கு ஈர்க்க விரும்புகிறீர்கள், இது சாதனத்தை கோடிட்டுக் காட்டும் முன் வரையறுக்கப்பட்ட பாதையில் 20% முதல் 35% வரை நகர்வதைக் குறிக்கலாம்.
இந்த காட்சிகள் நுணுக்கமான கட்டுப்பாட்டின் தேவையை எடுத்துக்காட்டுகின்றன. எங்கள் அனிமேஷனுக்குக் கூற ஒரு வழி நமக்குத் தேவை:
- பாதையில் ஒரு தன்னிச்சையான புள்ளியில் தொடங்கு (எ.கா., 25%).
- மற்றொரு தன்னிச்சையான புள்ளியில் முடி (எ.கா., 80%).
- இந்த பகுதி பயணத்தை எங்கள் அனிமேஷனின் முழு காலத்திலும் செயல்படுத்தவும்.
இங்குதான் CSS கீஃப்ரேம்களைப் பற்றிய ஆழமான புரிதல் பயனுள்ளதாக மட்டுமல்ல, அவசியமாகவும்ிறது. மேஜிக் ஒரு புதிய, கண்டுபிடிக்கப்படாத CSS பண்பில் இல்லை; அது நாம் ஏற்கனவே அறிந்த @keyframes விதிக்குள் offset-distance பண்பை மூலோபாய ரீதியாக கையாளுவதில் உள்ளது.
தீர்வு: கீஃப்ரேம்களுடன் நுணுக்கமான கட்டுப்பாடு
பாதை பகுதி அனிமேஷனின் திறவுகோல், @keyframes பிளாக்கிற்குள் உள்ள from மற்றும் to (அல்லது 0% மற்றும் 100%) குறிப்பான்கள் அனிமேஷனின் காலவரிசையையே குறிக்கின்றன என்பதை உணர்ந்து கொள்வதாகும், அவசியம் இயக்கப் பாதையின் தொடக்கத்தையும் முடிவையும் அல்ல. இந்த குறிப்பான்களுக்கு நாம் எந்த offset-distance மதிப்பையும் ஒதுக்கலாம்.
நுட்பம் 1: ஒரு அடிப்படைப் பகுதியை அனிமேட் செய்தல்
நமது முந்தைய உதாரணத்தை மாற்றி அமைப்போம். புள்ளியை முழுப் பாதையிலும் நகர்த்துவதற்குப் பதிலாக, அதை நடுத்தரப் பகுதியில் மட்டும், குறிப்பாக 25% குறியிலிருந்து 75% குறி வரை பயணிக்கச் செய்வோம்.
<!-- HTML is the same -->
<div class="scene">
<div class="dot-segment"></div>
</div>
<style>
/* .scene styles are the same */
.scene {
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin: 2em auto;
}
.dot-segment {
width: 20px;
height: 20px;
background-color: crimson;
border-radius: 50%;
/* The same path as before */
offset-path: path('M 20,100 C 50,20 250,20 280,100');
/* Set initial position if needed */
offset-distance: 25%;
/* Animate with new keyframes */
animation: move-along-segment 4s forwards;
}
@keyframes move-along-segment {
from {
offset-distance: 25%;
}
to {
offset-distance: 75%;
}
}
</style>
முக்கியமான மாற்றங்களைப் பிரித்துப் பார்ப்போம்:
- கீஃப்ரேம்கள்:
0%இலிருந்து100%க்கு அனிமேட் செய்வதற்குப் பதிலாக,move-along-segmentகீஃப்ரேம்கள் பயணத்தின் தொடக்க மற்றும் இறுதிப் புள்ளிகளை முறையேoffset-distance: 25%மற்றும்offset-distance: 75%என வெளிப்படையாக வரையறுக்கின்றன. animation-fill-mode: forwards;: இது மிகவும் முக்கியமானது. இந்த பண்பு, அனிமேஷன் முடிந்தவுடன், தனிமம் இறுதி கீஃப்ரேமின் (toஅல்லது100%) ஸ்டைல்களைத் தக்க வைத்துக் கொள்ள வேண்டும் என்று உலவிக்கு சொல்கிறது.forwardsஇல்லாமல், 4-வினாடி அனிமேஷன் முடிந்த பிறகு, புள்ளி அனிமேஷன் பயன்படுத்தப்படுவதற்கு முன்பு அதன் ஆரம்ப நிலைக்குத் திரும்பிவிடும். இதைப் பயன்படுத்துவதன் மூலம், புள்ளி 25% முதல் 75% வரை அனிமேட் செய்யப்பட்டு, பின்னர் 75% குறியிலேயே இருப்பதை உறுதி செய்கிறோம்.- ஆரம்ப நிலை (விருப்பத்தேர்வு ஆனால் நல்ல பழக்கம்): தனிமத்தில் நேரடியாக
offset-distance: 25%;ஐ அமைப்பது, அனிமேஷன் தொடங்குவதற்கு முன்பே அது சரியான நிலையில் தொடங்குவதை உறுதி செய்கிறது.
இந்த எளிய மாற்றத்துடன், நீங்கள் அடிப்படைக் நுட்பத்தைத் திறந்துவிட்டீர்கள். அனிமேஷனின் மொத்த கால அளவு 4 வினாடிகள் இப்போது பாதையின் நீளத்தில் வெறும் 50% (25% முதல் 75% வரை) பயணிக்கப் பயன்படுத்தப்படுகிறது, இது இயக்கத்தின் நோக்கம் மற்றும் வேகத்தின் மீது துல்லியமான கட்டுப்பாட்டை உங்களுக்கு வழங்குகிறது.
நுட்பம் 2: பல-கட்ட பயணங்களை ஒருங்கிணைத்தல்
இப்போது ஒரு மேம்பட்ட மற்றும் நடைமுறை காட்சிக்கு: இடைநிறுத்தங்களுடன் கூடிய பல-கட்ட அனிமேஷனை உருவாக்குதல். இது வழிகாட்டப்பட்ட சுற்றுப்பயணங்கள், கதைசொல்லல் அல்லது படிப்படியான வழிமுறைகளுக்கு ஏற்றது. பின்வரும் நடன அமைப்புடன் ஒரு அனிமேஷனை உருவாக்குவோம்:
- கட்டம் 1: தொடக்கத்திலிருந்து (0%) 40% குறியை நோக்கி நகர்த்தவும்.
- கட்டம் 2: 40% குறியீட்டில் ஒரு கணம் இடைநிறுத்தவும்.
- கட்டம் 3: 40% குறியிலிருந்து இறுதி 90% குறியை நோக்கி தொடர்ந்து செல்லவும்.
இதை அடைய, கீஃப்ரேம் சதவீதங்களைப் பயன்படுத்தி நமது கதையை அனிமேஷனின் காலவரிசையில் பொருத்த வேண்டும். நமது மொத்த அனிமேஷன் காலம் 10 வினாடிகள் என்று வைத்துக்கொள்வோம். பின்வருமாறு நேரத்தை ஒதுக்கலாம்:
- முதல் இயக்கம் (4வி): அனிமேஷனின் காலவரிசையின் முதல் 40% ஐப் பயன்படுத்தவும் (0% முதல் 40% கீஃப்ரேம்கள்).
- இடைநிறுத்தம் (2வி): காலவரிசையின் அடுத்த 20% ஐப் பயன்படுத்தவும் (40% முதல் 60% கீஃப்ரேம்கள்).
- இரண்டாவது இயக்கம் (4வி): காலவரிசையின் இறுதி 40% ஐப் பயன்படுத்தவும் (60% முதல் 100% கீஃப்ரேம்கள்).
இது குறியீட்டில் எவ்வாறு மொழிபெயர்க்கப்பட்டுள்ளது என்பது இங்கே:
@keyframes multi-stage-journey {
/* Stage 1: Move from 0% to 40% of the path */
/* This happens during the first 40% of the animation's duration */
0% {
offset-distance: 0%;
}
40% {
offset-distance: 40%;
}
/* Stage 2: Pause */
/* Hold the position at 40% of the path */
/* This happens between 40% and 60% of the animation's duration */
60% {
offset-distance: 40%;
}
/* Stage 3: Move from 40% to 90% of the path */
/* This happens during the final 40% of the animation's duration */
100% {
offset-distance: 90%;
}
}
.dot-multi-stage {
/* ... other styles ... */
animation: multi-stage-journey 10s forwards;
}
இடைநிறுத்தத்தின் திறவுகோல், இரண்டு அடுத்தடுத்த கீஃப்ரேம் குறிப்பான்கள் (40% மற்றும் 60%) ஒரே offset-distance மதிப்பைக் கொண்டிருப்பதாகும். அனிமேஷனின் காலவரிசையின் 40% மற்றும் 60% குறியீட்டிற்கு இடைப்பட்ட நேரத்தில், `offset-distance` மாறாது, இது இயக்கத்தில் ஒரு சரியான இடைநிறுத்தத்தை உருவாக்குகிறது. இந்த நுட்பம் உங்கள் அனிமேஷன்களின் வேகம் மற்றும் தாளத்தின் மீது இயக்குனர் அளவிலான கட்டுப்பாட்டை உங்களுக்கு வழங்குகிறது.
தொழில்முறை வேலைப்பாய்வுகளுக்கான மேம்பட்ட நுட்பங்கள்
அடிப்படைகளில் தேர்ச்சி பெறுவது சிறந்தது, ஆனால் தொழில்முறை மேம்பாட்டிற்கு பராமரிக்கக்கூடிய, மாறும் மற்றும் அணுகக்கூடிய தீர்வுகள் தேவை. சில மேம்பட்ட நுட்பங்களை ஆராய்வோம்.
CSS தனிப்பயன் பண்புகளுடன் (மாறிகள்) மாறும் பிரிவுகள்
உங்கள் கீஃப்ரேம்களில் 25% மற்றும் 75% போன்ற மதிப்புகளை ஹார்ட்கோட் செய்வது வேலை செய்கிறது, ஆனால் அது மிகவும் நெகிழ்வானது அல்ல. CSS தனிப்பயன் பண்புகளைப் பயன்படுத்துவதன் மூலம், உங்கள் அனிமேஷன் பிரிவுகளை மாறும் வகையில் வரையறுக்கலாம், இது உங்கள் குறியீட்டை மேலும் மறுபயன்பாட்டிற்குரியதாகவும், புதுப்பிப்பதற்கு எளிதாகவும் ஆக்குகிறது, குறிப்பாக ஜாவாஸ்கிரிப்ட் உடன்.
.element-dynamic {
/* Define the segment endpoints as variables */
--segment-start: 15%;
--segment-end: 85%;
offset-path: path('...');
animation: move-dynamic-segment 5s forwards;
}
@keyframes move-dynamic-segment {
from {
offset-distance: var(--segment-start);
}
to {
offset-distance: var(--segment-end);
}
}
இந்த அணுகுமுறை நம்பமுடியாத அளவிற்கு சக்தி வாய்ந்தது. உதாரணமாக, நீங்கள் ஒரே அனிமேஷனைப் பயன்படுத்தும் பல தனிமங்களைக் கொண்டிருக்கலாம், ஆனால் வெவ்வேறு தொடக்க மற்றும் இறுதி மாறிகளுடன். அல்லது, ஒரு வரைபடத்தில் ஒரு பயணத்தின் வெவ்வேறு பகுதிகளைக் காட்ட வெவ்வேறு பொத்தான்களைக் கிளிக் செய்வது போன்ற பயனர் தொடர்புக்கு பதிலளிக்கும் வகையில் --segment-start மற்றும் --segment-end ஐப் புதுப்பிக்க ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தலாம்.
animation-timing-function உடன் ஒரு-பிரிவுக்கான ஈஸிங்
இயக்கம் என்பது நிலையைப் பற்றியது மட்டுமல்ல; அது குணத்தைப் பற்றியது. ஈஸிங் (காலப்போக்கில் ஒரு அளவுருவின் மாற்ற விகிதம்) உங்கள் அனிமேஷனுக்கு ஒரு ஆளுமையை அளிக்கிறது. ஒரு பொதுவான தவறான கருத்து என்னவென்றால், animation-timing-function பண்பு முழு அனிமேஷனுக்கும் மட்டுமே பொருந்தும். இருப்பினும், அந்தக் கீஃப்ரேமிற்கு வழிவகுக்கும் மாற்றத்தைப் பாதிக்க நீங்கள் அதை ஒரு கீஃப்ரேமிற்குள் அறிவிக்கலாம்.
நமது பல-கட்டப் பயணத்தைச் செம்மைப்படுத்துவோம். முதல் இயக்கம் வேகமெடுக்கவும் (ease-in), இடைநிறுத்தம் நிலையானதாகவும், இரண்டாவது இயக்கம் மெதுவாக ஒரு மென்மையான நிறுத்தத்திற்கு (ease-out) வேகத்தைக் குறைக்கவும் நாங்கள் விரும்புகிறோம்.
@keyframes multi-stage-eased-journey {
0% {
offset-distance: 0%;
animation-timing-function: ease-in;
}
40% {
offset-distance: 40%;
/* This timing function applies to the pause */
animation-timing-function: linear;
}
60% {
offset-distance: 40%;
/* This timing function applies to the next movement */
animation-timing-function: ease-out;
}
100% {
offset-distance: 90%;
}
}
0%, 40%, மற்றும் 60% கீஃப்ரேம்களில் நேர செயல்பாட்டைக் குறிப்பிடுவதன் மூலம், அனிமேஷனின் ஒவ்வொரு தனித்துவமான கட்டத்திற்கும் ஈஸிங்கை நாங்கள் ஆணையிடுகிறோம்: 0-40% நகர்வு, 40-60% இடைநிறுத்தம் மற்றும் 60-100% நகர்வு. இந்த அளவிலான கட்டுப்பாடு அதிநவீன மற்றும் இயற்கையான உணர்வுள்ள இயக்கத்தை உருவாக்க அனுமதிக்கிறது.
அணுகல்தன்மை முதலில்: prefers-reduced-motion
உலகளாவிய பார்வையாளர்களைக் கொண்ட தொழில் வல்லுநர்களாக, உள்ளடக்கிய அனுபவங்களை உருவாக்குவதற்கு எங்களுக்கு ஒரு பொறுப்பு உள்ளது. சில பயனர்களுக்கு, குறிப்பாக வெஸ்டிபுலர் கோளாறுகள் உள்ளவர்களுக்கு, பெரிய அளவிலான அனிமேஷன்கள் தலைச்சுற்றல், குமட்டல் மற்றும் பிற கடுமையான சிக்கல்களை ஏற்படுத்தும். CSS, prefers-reduced-motion மீடியா வினவலுடன் பயனர் விருப்பங்களை மதிக்க ஒரு எளிய மற்றும் பயனுள்ள வழியை வழங்குகிறது.
குறைக்கப்பட்ட இயக்கத்தைக் கோருவோருக்கு ஒரு மாற்றீட்டை வழங்கும் வகையில் உங்கள் மோஷன் பாத் அனிமேஷன்களை எப்போதும் மடக்கவும்.
/* Apply the animation by default */
.animated-element {
animation: my-motion-path-animation 5s forwards;
}
/* Override it for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none;
/* Optionally, you could replace it with a simple, non-distracting fade-in */
/* opacity: 0; */
/* animation: fade-in 1s forwards; */
}
}
இந்த சிறிய সংযোজন உங்கள் பார்வையாளர்களின் ஒரு குறிப்பிடத்தக்க பகுதிக்கு ஒரு பெரிய வித்தியாசத்தை ஏற்படுத்துகிறது. இது நவீன, பொறுப்பான வலை மேம்பாட்டின் ஒரு தவிர்க்க முடியாத பகுதியாகும்.
நடைமுறை பயன்பாடுகள் மற்றும் உலகளாவிய பயன்பாட்டு வழக்குகள்
கோட்பாடு மதிப்புமிக்கது, ஆனால் இந்த நுட்பங்களை நடைமுறை, சர்வதேச அளவில் புரிந்து கொள்ளப்பட்ட காட்சிகளுடன் இணைப்போம்.
மின்-வணிகம்: தயாரிப்பு அம்சத்தை முன்னிலைப்படுத்துதல்
ஒரு புதிய உலகளாவிய ஸ்மார்ட்போனுக்கான ஒரு தயாரிப்பு பக்கத்தை கற்பனை செய்து பாருங்கள். நிலையான புல்லட் புள்ளிகளுக்கு பதிலாக, சாதனத்தின் நிழற்படத்தைக் கண்டறியும் ஒரு offset-path ஐ நீங்கள் வரையறுக்கலாம். ஒரு அனிமேஷன் செய்யப்பட்ட ஹாட்ஸ்பாட் பின்னர் திரையின் விளிம்பிலிருந்து (எ.கா., 10%-30%) பயணித்து, புதிய கேமரா அமைப்பில் நின்று (30% இல் பிடித்து), பின்னர் அதிவேக சார்ஜிங் போர்ட்டை முன்னிலைப்படுத்த வளைவில் தொடரலாம் (40%-60%). இது ஒரு மாறும், ஈர்க்கக்கூடிய மற்றும் தகவலறிந்த தயாரிப்பு சுற்றுப்பயணத்தை உருவாக்குகிறது.
போக்குவரத்து & தளவாடங்கள்: ஒரு பயணத்தை காட்சிப்படுத்துதல்
எந்தவொரு சர்வதேச கப்பல் நிறுவனம், விமான நிறுவனம் அல்லது பயண வலைப்பதிவிற்கும், வழிகளைக் காட்சிப்படுத்துவது முக்கியம். ஒரு விமானம் அல்லது கப்பல் ஐகானை உலகின் வரைபடத்தில் அனிமேட் செய்யலாம். பகுதி அனிமேஷனைப் பயன்படுத்தி, டோக்கியோவிலிருந்து சிங்கப்பூருக்கு ஒரு விமானத்தைக் காட்டலாம் (பிரிவு 1), அனிமேஷனை இடைநிறுத்துவதன் மூலம் ஒரு லேஓவரைக் காட்டலாம், பின்னர் சிட்னிக்கு இணைக்கும் விமானத்தை அனிமேட் செய்யலாம் (பிரிவு 2). இது மொழித் தடைகளைக் கடக்கும் தெளிவான, காட்சி கதைசொல்லலை வழங்குகிறது.
பயனர் இடைமுக பின்னூட்டம்: பயனரை வழிநடத்துதல்
ஒரு பயனர் ஒரு செயலை முடிக்கும்போது, தெளிவான பின்னூட்டம் அவசியம். ஒரு பயனர் ஒரு வலை பயன்பாட்டில் "சேமி" பொத்தானைக் கிளிக் செய்கிறார் என்று வைத்துக்கொள்வோம். ஒரு சிறிய சரிபார்ப்பு ஐகான் பொத்தானிலிருந்து ஒரு நிலை செய்தி பகுதிக்கு (எ.கா., "உங்கள் ஆவணம் சேமிக்கப்பட்டது.") ஒரு நுட்பமான வளைவில் அனிமேட் செய்யலாம். இந்த பகுதி அனிமேஷன் பயனரின் செயலை பயன்பாட்டின் எதிர்வினையுடன் நேர்த்தியாக இணைக்கிறது, பயன்பாட்டினை மேம்படுத்துகிறது மற்றும் மேலும் மெருகூட்டப்பட்ட பயனர் அனுபவத்தை உருவாக்குகிறது.
உலாவி இணக்கத்தன்மை மற்றும் இறுதி எண்ணங்கள்
CSS மோஷன் பாத் ஒரு நவீன வலைத் தரநிலை. இதை எழுதும் நேரத்தில், இது Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட அனைத்து முக்கிய எவர்கிரீன் உலாவிகளிலும் சிறந்த ஆதரவைப் பெறுகிறது. இருப்பினும், ஒரு உலகளாவிய டெவலப்பர் CanIUse.com போன்ற ஒரு ஆதாரத்தை கலந்தாலோசிப்பது எப்போதுமே விவேகமானது, குறிப்பாக நீங்கள் குறிப்பிட்ட பிராந்தியங்களில் பழைய உலாவி பதிப்புகளை ஆதரிக்க வேண்டியிருந்தால், மிகச் சமீபத்திய இணக்கத்தன்மை தகவலைப் பெற.
ஒரு பாதையின் பகுதிகள் வழியாக அனிமேஷனைக் கட்டுப்படுத்தும் திறன், CSS மோஷன் பாத் தொகுதியை ஒரு புதுமையிலிருந்து தொழில்முறை முன்முனை டெவலப்பர்கள் மற்றும் மோஷன் வடிவமைப்பாளர்களுக்கான ஒரு அத்தியாவசிய கருவியாக உயர்த்துகிறது. இது சிக்கலான, நடனமாடிய, மற்றும் அர்த்தமுள்ள அனிமேஷன்களை உருவாக்க அனுமதிக்கிறது, அவை செயல்திறன் மிக்கவை மற்றும் வன்பொருள்-துரிதப்படுத்தப்பட்டவை, அனைத்தும் வெளிப்புற லைப்ரரிகளின் கூடுதல் சுமை இல்லாமல்.
முடிவுரை
நாம் CSS மோஷன் பாத்தின் அடிப்படைகளிலிருந்து பகுதி கட்டுப்பாட்டின் நுணுக்கமான கலைக்கு பயணித்துள்ளோம். முக்கிய பாடம் என்னவென்றால், CSS @keyframes க்குள் offset-distance ஐ மூலோபாய ரீதியாக கையாளுவதன் மூலம், உங்கள் தனிமத்தின் பயணத்தின் மீது துல்லியமான கட்டுப்பாட்டைப் பெறுகிறீர்கள். நீங்கள் இனி ஒரு எளிய தொடக்கத்திலிருந்து இறுதி வரையிலான பயணத்திற்கு மட்டுப்படுத்தப்படவில்லை.
அடிப்படைப் பகுதி அனிமேஷனில் தேர்ச்சி பெறுவதன் மூலமும், இடைநிறுத்தங்களுடன் பல-கட்ட பயணங்களை ஒருங்கிணைப்பதன் மூலமும், CSS தனிப்பயன் பண்புகள் மற்றும் ஒரு-பிரிவுக்கான ஈஸிங் போன்ற மேம்பட்ட நுட்பங்களைப் பயன்படுத்துவதன் மூலமும், நீங்கள் மேலும் மாறும், வெளிப்படையான மற்றும் பராமரிக்கக்கூடிய அனிமேஷன்களை உருவாக்கலாம். மேலும் prefers-reduced-motion உடன் அணுகல்தன்மையை எப்போதும் முன்னணியில் வைப்பதன் மூலம், உங்கள் அழகான படைப்புகள் அனைத்து பயனர்களுக்கும் உள்ளடக்கியதாகவும் மரியாதைக்குரியதாகவும் இருப்பதை உறுதி செய்கிறீர்கள்.
வலை என்பது இயக்கத்திற்கான ஒரு கேன்வாஸ். இப்போது உங்களிடம் மேலும் பல்துறை மற்றும் சக்திவாய்ந்த தூரிகை உள்ளது. சென்று பரிசோதனை செய்யுங்கள், அற்புதமான விஷயங்களை உருவாக்குங்கள், மேலும் CSS மூலம் சாத்தியமானவற்றின் எல்லைகளைத் தொடர்ந்து தள்ளுங்கள்.