මෙය සිතුවම් කරන්න: ඔබ නව ව්යාපෘතියකට සම්බන්ධ වී, කේත පදනමට කිමිදෙන්න, සහ පළමු පැය කිහිපය තුළ, ඔබ කලකිරවනසුලු හුරුපුරුදු දෙයක් සොයා ගනී. මෝස්තර පත්රිකා පුරා විසිරී ඇති, ඔබට එකම මූලික සජීවිකරණ සඳහා බහු @keyframes අර්ථ දැක්වීම් සොයාගත හැකිය. වෙනස් වියැකී යාමේ ප්රයෝග තුනක්, විනිවිදක වෙනස්කම් දෙකක් හෝ තුනක්, විශාලන සජීවිකරණ අතලොස්සක් සහ අවම වශයෙන් වෙනස් දඟ සජීවිකරණ දෙකක් නිසා, හොඳයි, ඇයි එසේ නොවන්නේ? @keyframes ස්පන්දනය { { සිට පරිමාණය: 1; } { වෙත පරිමාණය: 1.1; } }
@keyframes විශාල ස්පන්දනය { 0%, 20%, 100% { පරිමාණය: 1; } 10%, 40% { පරිමාණය: 1.2; } }
මෙම දර්ශනය හුරුපුරුදු නම්, ඔබ තනිවම නොවේ. විවිධ ව්යාපෘති හරහා මගේ අත්දැකීම් අනුව, මට ලබා දිය හැකි වඩාත්ම ස්ථාවර ඉක්මන් ජයග්රහණවලින් එකක් වන්නේ යතුරු රාමු ඒකාබද්ධ කිරීම සහ ප්රමිතිකරණය කිරීමයි. එය කෙතරම් විශ්වාසදායක රටාවක් වීද යත්, ඕනෑම නව කේත පදනමක මගේ පළමු කාර්යයක් ලෙස මම මෙම පිරිසිදු කිරීම බලාපොරොත්තු වෙමි. අවුල් සහගතව පිටුපස ඇති තර්කය ඔබ ඒ ගැන සිතන විට මෙම අතිරික්තය පරිපූර්ණ ලෙස අර්ථවත් කරයි. අපි සියලු දෙනාම අපගේ එදිනෙදා වැඩ වලදී එකම මූලික සජීවිකරණ භාවිතා කරමු: වියැකී යාම, විනිවිදක, විශාලනය, භ්රමණය සහ අනෙකුත් පොදු බලපෑම්. මෙම සජීවිකරණ ඉතා සරල වන අතර, කාර්යය ඉටු කිරීම සඳහා ඉක්මන් @keyframes නිර්වචනයක් ඉදිරිපත් කිරීම පහසුය. මධ්යගත සජීවිකරණ පද්ධතියක් නොමැතිව, සංවර්ධකයින් ස්වභාවිකවම මෙම යතුරු රාමු මුල සිටම ලියන්නේ, සමාන සජීවිකරණ දැනටමත් කේත පදනමේ වෙනත් තැනක පවතින බව නොදැනය. කණ්ඩායම් බොහෝ විට යෙදුමේ විවිධ කොටස් හරහා සමාන්තරව ක්රියා කරන බැවින්, සංරචක මත පදනම් වූ ගෘහ නිර්මාණ ශිල්පයේ (මේ දිනවල අපගෙන් බොහෝ දෙනෙක් කරන) වැඩ කරන විට මෙය විශේෂයෙන් පොදු වේ. ප්රතිඵලය? සජීවිකරණ අවුල්. කුඩා ගැටලුව යතුරු රාමු අනුපිටපත් කිරීම සමඟ ඇති වඩාත්ම පැහැදිලි ගැටළු වන්නේ සංවර්ධන කාලය නාස්ති කිරීම සහ අනවශ්ය කේත පිම්බීමයි. බහු යතුරු රාමු නිර්වචන යනු අවශ්යතා වෙනස් වන විට යාවත්කාලීන කිරීමට ස්ථාන කිහිපයක් අදහස් කරයි. ඔබේ වියැකී යන සජීවිකරණයේ වේලාව සීරුමාරු කිරීමට අවශ්යද? ඔබට ඔබේ කේත පදනම හරහා සෑම අවස්ථාවක්ම දඩයම් කිරීමට අවශ්ය වනු ඇත. ලිහිල් කිරීමේ කාර්යයන් සම්මත කිරීමට අවශ්යද? සියලු වෙනස්කම් සොයා ගැනීමට වාසනාව. මෙම නඩත්තු ලක්ෂ්ය ගුණ කිරීම සරල සජීවිකරණ යාවත්කාලීන කිරීම් පවා කාලය ගතවන කාර්යයක් බවට පත් කරයි. ලොකුම ගැටලුව මෙම යතුරු රාමු අනුපිටපත් කිරීම මතුපිටට යටින් සැඟවී ඇති වඩාත් ද්රෝහී ගැටලුවක් නිර්මාණය කරයි: ගෝලීය විෂය පථය උගුල. සංරචක මත පදනම් වූ ගෘහ නිර්මාණ ශිල්පය සමඟ වැඩ කරන විට පවා, CSS යතුරු රාමු සෑම විටම ගෝලීය විෂය පථය තුළ අර්ථ දක්වා ඇත. මෙයින් අදහස් කරන්නේ සියලුම යතුරු රාමු සියලුම සංරචක සඳහා අදාළ වන බවයි. සෑම විටම. ඔව්, ඔබේ සජීවිකරණය අනිවාර්යයෙන්ම ඔබේ සංරචකයේ ඔබ අර්ථ දක්වා ඇති යතුරු රාමු භාවිතා නොකරයි. එය ගෝලීය විෂය පථයට පටවා ඇති එම නමටම ගැලපෙන අවසාන යතුරු රාමු භාවිතා කරයි. ඔබගේ සියලුම යතුරු රාමු එක සමාන වන තාක්, මෙය සුළු ගැටළුවක් සේ පෙනෙනු ඇත. නමුත් ඔබට නිශ්චිත භාවිත අවස්ථාවක් සඳහා සජීවිකරණයක් අභිරුචිකරණය කිරීමට අවශ්ය මොහොතේ, ඔබ කරදරයක සිටී, නැතහොත් වඩාත් නරක අතට, ඔබ ඒවාට හේතු වනු ඇත. එක්කෝ ඔබේ සජීවිකරණය ක්රියා නොකරනු ඇත, මන්ද ඔබේ සජීවිකරණයට පසුව වෙනත් සංරචකයක් පූරණය වීම, ඔබේ යතුරු රාමු උඩින් ලිවීම හෝ ඔබේ සංරචක පූරණය අවසන් වන අතර එම යතුරු රාමුවේ නම භාවිතා කරන අනෙක් සෑම සංරචකයක් සඳහාම සජීවිකරණ හැසිරීම අහම්බෙන් වෙනස් කරයි, සහ ඔබට එය නොදැනීමට පවා ඉඩ ඇත. ගැටලුව පෙන්නුම් කරන සරල උදාහරණයක් මෙන්න: .සංරචකය-එක { /* සංරචක මෝස්තර */ සජීවිකරණය: ස්පන්දන 1s පහසුව-ඉන්-පිටත අනන්ත විකල්ප; }
/* මෙම @keyframes අර්ථ දැක්වීම ක්රියා නොකරනු ඇත */ @keyframes ස්පන්දනය { { සිට පරිමාණය: 1; } { වෙත පරිමාණය: 1.1; } }
/* පසුව කේතයේ... */
.සංරචකය-දෙක { /* සංරචක මෝස්තර */ සජීවිකරණය: ස්පන්දන 1s පහසුව-ඉන්-පිටත අනන්තය; }
/* මෙම යතුරු රාමු සංරචක දෙකටම අදාළ වේ */ @keyframes ස්පන්දනය { 0%, 20%, 100% { පරිමාණය: 1; } 10%, 40% { පරිමාණය: 1.2; } }
සංරචක දෙකම එකම සජීවිකරණ නාමය භාවිතා කරයි, නමුත් දෙවන @keyframes අර්ථ දැක්වීම පළමු එක උඩින් ලියයි. දැන් සංරචක-එක සහ සංරචක-දෙක යන දෙකම දෙවන යතුරු රාමු භාවිතා කරනු ඇත, කුමන සංරචකය කුමන යතුරු රාමු නිර්වචනය කළත්. අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 1 [forked] බලන්න. නරකම කොටස? මෙය බොහෝ විට දේශීය සංවර්ධනයේදී හොඳින් ක්රියා කරන නමුත් ගොඩනැගීමේ ක්රියාවලීන් ඔබේ මෝස්තර පත්ර පැටවීමේ අනුපිළිවෙල වෙනස් කරන විට නිෂ්පාදනයේදී අභිරහස් ලෙස කැඩී යයි. කුමන සංරචක පටවනු ලබන්නේද සහ කුමන අනුපිළිවෙලෙහිද යන්න මත පදනම්ව ඔබ වෙනස් ලෙස හැසිරෙන සජීවිකරණ සමඟ අවසන් වේ. විසඳුම: ඒකාබද්ධ යතුරු රාමු මෙම ව්යාකූලත්වයට පිළිතුර පුදුම සහගත ලෙස සරල ය: බෙදාගත් මෝස්තර පත්රිකාවක ගබඩා කර ඇති පූර්ව නිශ්චිත ගතික යතුරු රාමු. සෑම සංරචකයකටම තමන්ගේම සජීවිකරණ නිර්වචනය කිරීමට ඉඩ දෙනවා වෙනුවට, අපි හොඳින් ලේඛනගත, පහසු වන මධ්යගත යතුරු රාමු නිර්මාණය කරමු.භාවිතා කිරීම, නඩත්තු කළ හැකි, සහ ඔබේ ව්යාපෘතියේ නිශ්චිත අවශ්යතා සඳහා සකස් කර ඇත. එය යතුරු රාමු සංකේත ලෙස සිතන්න. අපි වර්ණ සහ පරතරය සඳහා ටෝකන භාවිතා කරනවා සේම, සහ අපගෙන් බොහෝ දෙනෙක් දැනටමත් සජීවිකරණ ගුණාංග සඳහා ටෝකන භාවිතා කරයි, කාලසීමාව සහ පහසු කිරීමේ කාර්යයන් වැනි, යතුරු රාමු සඳහාද ටෝකන භාවිතා නොකරන්නේ මන්ද? මෙම ප්රවේශය කුඩා ගැටලුව (කේත අනුපිටපත් කිරීම) සහ විශාල ගැටලුව (ගෝලීය විෂය පථ ගැටුම්) යන දෙකම එකවර විසඳන අතරම, ඔබ භාවිතා කරන ඕනෑම වත්මන් සැලසුම් සංකේත කාර්ය ප්රවාහයක් සමඟ ස්වභාවිකව ඒකාබද්ධ විය හැක. අදහස සරලයි: අපගේ සියලුම පොදු සජීවිකරණ සඳහා සත්යයේ තනි මූලාශ්රයක් සාදන්න. මෙම හවුල් මෝස්තර පත්රිකාවේ අපගේ ව්යාපෘතිය සැබවින්ම භාවිතා කරන සජීවිකරණ රටා ආවරණය වන පරිදි ප්රවේශමෙන් සැකසූ යතුරු රාමු අඩංගු වේ. වියැකී ගිය සජීවිකරණයක් දැනටමත් අපගේ කේත පදනමේ කොහේ හෝ තිබේදැයි අනුමාන කළ යුතු නැත. වෙනත් සංරචක වලින් අහම්බෙන් සජීවිකරණ උඩින් ලිවීමට තවත් නැත. නමුත් මෙන්න යතුර: මේවා ස්ථිතික පිටපත්-පේස්ට් සජීවිකරණ පමණක් නොවේ. ඒවා CSS අභිරුචි ගුණාංග හරහා ගතික සහ අභිරුචිකරණය කළ හැකි ලෙස නිර්මාණය කර ඇති අතර, ඔබට එක තැනක තරමක් විශාල “ස්පන්දන” සජීවිකරණයක් අවශ්ය නම් වැනි නිශ්චිත භාවිත අවස්ථාවන්ට සජීවිකරණ අනුවර්තනය කිරීමට නම්යශීලී බවක් ඇති අතරම අපට අනුකූලතාව පවත්වා ගැනීමට ඉඩ සලසයි. පළමු යතුරු රාමු ටෝකනය ගොඩනැගීම අප විසින් විසඳා ගත යුතු පළමු පහත් පලතුරෙන් එකක් වන්නේ "Fade-in" සජීවිකරණයයි. මගේ මෑත ව්යාපෘති වලින් එකක, මම වෙන වෙනම වියැකී යන නිර්වචන දුසිමකට වඩා සොයා ගත්තෙමි, ඔව්, ඒවා සියල්ලම පාරාන්ධතාවය 0 සිට 1 දක්වා සරලව සජීවිකරණය කර ඇත. එබැවින්, අපි නව මෝස්තර පත්රිකාවක් නිර්මාණය කරමු, එය kf-tokens.css ලෙස හඳුන්වමු, එය අපගේ ව්යාපෘතියට ආයාත කරන්න, සහ එහි ඇතුළත නිසි අදහස් සහිතව අපගේ යතුරු රාමු තබමු. /* keyframes-tokens.css */
/* * Fade In - fade පිවිසුම් සජීවිකරණය * භාවිතය: සජීවිකරණය: kf-fade-in 0.3s Ease-out; */ @keyframes kf-fade-in { { සිට පාරාන්ධතාව: 0; } { වෙත පාරාන්ධතාව: 1; } }
මෙම තනි @keyframes ප්රකාශය අපගේ කේත පදනම හරහා විසිරී ඇති වියැකී යන සජීවිකරණ සියල්ල ප්රතිස්ථාපනය කරයි. පිරිසිදු, සරල සහ ගෝලීය වශයෙන් අදාළ වේ. දැන් අපි මෙම ටෝකනය නිර්වචනය කර ඇති බැවින්, අපගේ ව්යාපෘතිය පුරාවට ඕනෑම සංරචකයකින් එය භාවිතා කළ හැක: .modal { සජීවිකරණය: kf-fade-in 0.3s Ease-out; }
.මෙවලම් ඉඟිය { සජීවිකරණය: kf-fade-in 0.2s Ease-in-out; }
.දැනුම්දීම { සජීවිකරණය: kf-fade-in 0.5s Ease-out; }
අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 2 [forked] බලන්න. සටහන: අපි අපගේ සියලුම @keyframes නම් වල kf- උපසර්ගයක් භාවිතා කරන්නෙමු. මෙම උපසර්ගය ව්යාපෘතියේ පවතින සජීවිකරණ සමඟ ගැටුම් නම් කිරීම වළක්වන නාම අවකාශයක් ලෙස ක්රියා කරන අතර මෙම යතුරු රාමු අපගේ යතුරු රාමු ටෝකන් ගොනුවෙන් එන බව වහාම පැහැදිලි කරයි. ගතික ස්ලයිඩයක් සෑදීම kf-fade-in keyframes එය සරල නිසාත් දේවල් අවුල් කිරීමට ඉඩක් නැති නිසාත් ඉතා හොඳින් ක්රියා කරයි. කෙසේ වෙතත්, අනෙකුත් සජීවිකරණ වලදී, අපි වඩාත් ගතික විය යුතු අතර, මෙහිදී අපට CSS අභිරුචි ගුණාංගවල දැවැන්ත බලය භාවිතා කළ හැකිය. විසිරුණු ස්ථිතික සජීවිකරණ හා සසඳන විට යතුරු රාමු ටෝකන සැබවින්ම බැබළෙන්නේ මෙහිදීය. අපි පොදු අවස්ථාවක් ගනිමු: "slide-in" සජීවිකරණ. නමුත් ලිස්සා යන්නේ කොහෙන්ද? දකුණේ සිට 100px? වමේ සිට 50%? එය තිරයේ ඉහළ සිට ඇතුල් විය යුතුද? නැත්නම් සමහර විට පතුලේ සිට පාවෙනවද? බොහෝ හැකියාවන් ඇත, නමුත් එක් එක් දිශාවට සහ එක් එක් විචලනය සඳහා වෙනම යතුරු රාමු නිර්මාණය කිරීම වෙනුවට, අපට සියලු අවස්ථා වලට අනුවර්තනය වන එක් නම්යශීලී ටෝකනයක් ගොඩනගා ගත හැකිය: /* * Slide In - දිශානුගත විනිවිදක සජීවිකරණය * දිශාව පාලනය කිරීමට --kf-slide-from භාවිතා කරන්න * පෙරනිමිය: වමේ සිට ලිස්සා යයි (-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; } }
දැන් අපට --kf-slide-from අභිරුචි දේපල වෙනස් කිරීමෙන් ඕනෑම විනිවිදක දිශාවක් සඳහා මෙම තනි @keyframes ටෝකනය භාවිතා කළ හැක: .පැති තීරුව { සජීවිකරණය: kf-slide-in 0.3s Ease-out; /* පෙරනිමි අගය භාවිතා කරයි: වමේ සිට විනිවිදක */ }
.දැනුම්දීම { සජීවිකරණය: kf-slide-in 0.4s Ease-out; --kf-slide-from: 0 -50px; /* ඉහල සිට ලිස්සා යන්න */ }
.modal { සජීවිකරණය: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* පහළ-දකුණ සිට විනිවිදක */ }
මෙම ප්රවේශය ස්ථාවරත්වය පවත්වා ගනිමින් අපට ඇදහිය නොහැකි නම්යශීලී බවක් ලබා දෙයි. එක් යතුරු රාමු ප්රකාශයක්, අසීමිත හැකියාවන්. අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 3 [forked] බලන්න. තවද අපට අපගේ සජීවිකරණ වඩාත් නම්යශීලී කිරීමට අවශ්ය නම්, “ස්ලයිඩ්-අවුට්” ප්රයෝග සඳහාද ඉඩ ලබා දේ, අපට හැකියඅපි ඊළඟ කොටසේ දකින දේට සමාන --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% දක්වා පරිමාණයන් */ }
.modal { සජීවිකරණය: 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 මූලද්රව්ය සඳහා පරිපූර්ණව ක්රියා කරන අතරම විශේෂ අවස්ථා සඳහා අභිරුචිකරණය කිරීමට පහසු වේ. අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 4 [forked] බලන්න. මෑත උදාහරණවල රසවත් දෙයක් ඔබ දැක ඇති: අපි සජීවිකරණ ඒකාබද්ධ කරමින් සිටිමු. @keyframes ටෝකන සමඟ වැඩ කිරීමේ ප්රධාන වාසියක් නම් ඒවා එකිනෙකට බාධාවකින් තොරව ඒකාබද්ධ වීමට සැලසුම් කර තිබීමයි. මෙම සුමට සංයුතිය හිතාමතා මිස අහම්බෙන් නොවේ. සජීවිකරණ සංයුතිය ගැටළුකාරී විය හැකි ස්ථාන ඇතුළුව අපි පසුව වඩාත් විස්තරාත්මකව සාකච්ඡා කරමු, නමුත් බොහෝ සංයෝජන සරල සහ ක්රියාත්මක කිරීමට පහසුය. සටහන: මෙම ලිපිය ලියන අතරතුර සහ සමහර විට එය ලිවීම නිසා, පිවිසුම් සජීවිකරණ පිළිබඳ සම්පූර්ණ අදහස නැවත සිතා බැලීමට මට පෙනී ගියේය. CSS හි සියලුම මෑත කාලීන දියුණුවත් සමඟ, අපට තවමත් ඒවා අවශ්යද? වාසනාවකට මෙන්, Adam Argyle එම ප්රශ්නම ගවේෂණය කර ඔහුගේ බ්ලොගය තුළ ඒවා විශිෂ්ට ලෙස ප්රකාශ කළේය. මෙය මෙහි ලියා ඇති දේට පටහැනි නොවේ, නමුත් එය සලකා බැලිය යුතු ප්රවේශයක් ඉදිරිපත් කරයි, විශේෂයෙන් ඔබේ ව්යාපෘති ප්රවේශ සජීවිකරණ මත දැඩි ලෙස රඳා පවතී නම්. අඛණ්ඩ සජීවිකරණ "Fade", "slide", සහ "zoom" වැනි පිවිසුම් සජීවිකරණ එක් වරක් සිදු වී පසුව නතර වන අතර, අඛණ්ඩ සජීවිකරණ අවධානය ආකර්ෂණය කර ගැනීමට හෝ පවතින ක්රියාකාරකම් දැක්වීමට දින නියමයක් නොමැතිව ලූප් වේ. මම මුහුණ දෙන වඩාත් පොදු අඛණ්ඩ සජීවිකරණ දෙක වන්නේ "ස්පින්" (දර්ශක පැටවීම සඳහා) සහ "ස්පන්දනය" (වැදගත් අංග ඉස්මතු කිරීම සඳහා) ය. යතුරු රාමු ටෝකන නිර්මාණය කිරීමේදී මෙම සජීවිකරණ අද්විතීය අභියෝග ඉදිරිපත් කරයි. සාමාන්යයෙන් එක් ප්රාන්තයකින් තවත් ප්රාන්තයකට යන ප්රවේශ සජීවිකරණ මෙන් නොව, අඛණ්ඩ සජීවිකරණ ඒවායේ හැසිරීම් රටා තුළ ඉතා අභිරුචිකරණය කළ හැකි විය යුතුය. ස්පින් ඩොක්ටර් සෑම ව්යාපෘතියක්ම බහු භ්රමණය සජීවිකරණ භාවිතා කරන බව පෙනේ. සමහරක් දක්ෂිණාවර්තව, අනෙක් අය වාමාවර්තව කැරකෙයි. සමහරක් අංශක 360ක භ්රමණයක් සිදු කරයි, අනෙක් අය වේගවත් බලපෑමක් සඳහා බහු හැරීම් සිදු කරයි. එක් එක් විචලනය සඳහා වෙනම යතුරු රාමු නිර්මාණය කිරීම වෙනුවට, සියලු අවස්ථා හසුරුවන එක් නම්යශීලී භ්රමණයක් ගොඩනඟමු:
/* * Spin - rotation animation * භ්රමණ පරාසය පාලනය කිරීමට --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 { සජීවිකරණය: kf-spin 1s රේඛීය අනන්තය; /* පෙරනිමිය භාවිතා කරයි: 0deg සිට 360deg දක්වා භ්රමණය වේ */ }
.Fast-loader { සජීවීකරණය: kf-spin 1.2s පහසුව-ඉන්-පිටත අනන්ත විකල්ප; --kf-spin-turns: 3; /* චක්රයකට එක් එක් දිශාව සඳහා සම්පූර්ණ භ්රමණ 3 ක්*/ }
.පියවර-ප්රතිලෝම { සජීවිකරණය: kf-spin 1.5s පියවර(8) අනන්තය; --kf-spin-to: -360deg; /* වාමාවර්තව */ }
.subtle-wiggle { සජීවීකරණය: kf-spin 2s පහසුව-ඉන්-පිටත අනන්ත විකල්ප; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* wiggle 36 deg: -18deg සහ +18deg අතර */ }
අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 5 [forked] බලන්න. මෙම ප්රවේශයේ ඇති අලංකාරය නම් එම යතුරු රාමු දඟ පන්දු යවන්නන් පැටවීම, භ්රමණය වන අයිකන, විග්ල් ප්රයෝග සහ සංකීර්ණ බහු-හැරීම් සජීවිකරණ සඳහා ක්රියා කිරීමයි. ස්පන්දන පරස්පරය ස්පන්දන සජීවිකරණ වඩාත් උපක්රමශීලී වන්නේ ඒවාට විවිධ ගුණාංග "ස්පන්දනය" කළ හැකි බැවිනි. සමහරක් පරිමාණය ස්පන්දනය කරයි, අනෙක් අය පාරාන්ධතාව ස්පන්දනය කරයි, සහ දීප්තිය හෝ සන්තෘප්තිය වැනි සමහර ස්පන්දන වර්ණ ගුණාංග. එක් එක් දේපල සඳහා වෙන වෙනම යතුරු රාමු නිර්මාණය කරනවාට වඩා, අපට ඕනෑම 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-ස්පන්දන-පාර පාරාන්ධතාවය-සිට: 0.7; --kf-ස්පන්දන-පාර පාරාන්ධතාවය-ට: 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); } }
මෙය බහුවිධ ගුණාංග සජීවී කළ හැකි නම්යශීලී ස්පන්දනයක් නිර්මාණය කරයි: .ක්රියාවට ඇමතුමක් { සජීවිකරණය: kf-pulse 0.6s අනන්ත විකල්ප; --kf-pulse-opacity-from: 0.5; /* පාරාන්ධතා ස්පන්දනය */ }
.notification-dot { සජීවිකරණය: kf-pulse 0.6s පහසුව-ඉන්-පිටත අනන්ත විකල්ප; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* පරිමාණ ස්පන්දනය */ }
.පෙළ-උද්දීපනය { සජීවිකරණය: kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* පරිමාණය සහ පාරාන්ධතා ස්පන්දනය */ }
අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 6 [forked] බලන්න. මෙම තනි kf-ස්පන්දන යතුරු රාමුවට සියුම් අවධානය ලබා ගැනීමේ සිට නාට්යමය උද්දීපනය දක්වා සියල්ල හැසිරවිය හැකි අතර, සියල්ල අභිරුචිකරණය කිරීමට පහසු වේ. උසස් පහසු කිරීම Keyframes ටෝකන භාවිතා කිරීමෙහි ඇති විශිෂ්ටතම දෙය නම් අපගේ සජීවිකරණ පුස්තකාලය පුළුල් කිරීම සහ බොහෝ සංවර්ධකයින් ඉලාස්ටික් හෝ bounce වැනි මුල සිට ලිවීමට කරදර නොවන බලපෑම් සැපයීම කොතරම් පහසුද යන්නයි. පැනීමේ උස පාලනය කිරීම සඳහා --kf-bounce-from custom properties භාවිතා කරන සරල "bounce" keyframes ටෝකනයක උදාහරණයක් මෙන්න. /* * Bounce - bouncing පිවිසුම් සජීවිකරණය * පැනීමේ උස පාලනය කිරීමට --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-in-out-out දෙකම; * --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; }
.elastic-in { සජීවීකරණය: kf-elastic-in 2s, ease-in-out දෙකම; }
අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 7 [forked] බලන්න. මේ මොහොත දක්වා, අපි දක්ෂ හා කාර්යක්ෂම ආකාරයකින් යතුරු රාමු ඒකාබද්ධ කරන්නේ කෙසේදැයි අපි දැක ඇත්තෙමු. ඇත්ත වශයෙන්ම, ඔබේ ව්යාපෘතියේ අවශ්යතාවලට වඩා හොඳින් ගැලපෙන පරිදි දේවල් වෙනස් කිරීමට ඔබට අවශ්ය විය හැකිය, නමුත් අපි පොදු සජීවිකරණ සහ එදිනෙදා භාවිත අවස්ථා කිහිපයක උදාහරණ ආවරණය කර ඇත්තෙමු. මෙම යතුරු රාමු ටෝකන ක්රියාත්මක වීමත් සමඟ, සම්පූර්ණ ව්යාපෘතිය හරහා ස්ථාවර, නඩත්තු කළ හැකි සජීවිකරණ නිර්මාණය කිරීම සඳහා අපට දැන් ප්රබල ගොඩනැඟිලි කොටස් තිබේ. තවත් අනුපිටපත් යතුරු රාමු නැත, ගෝලීය විෂය පථ ගැටුම් නැත. අපගේ සියලුම සජීවිකරණ අවශ්යතා හැසිරවීමට පිරිසිදු, පහසු ක්රමයක්. නමුත් සැබෑ ප්රශ්නය වන්නේ: අපි මෙම ගොඩනැඟිලි කොටස් එකට එකතු කරන්නේ කෙසේද? ඒ සියල්ල එකට තැබීම මූලික යතුරු රාමු ටෝකන ඒකාබද්ධ කිරීම සරල බව අපි දැක ඇත්තෙමු. අපට විශේෂ කිසිවක් අවශ්ය නැත, නමුත් පළමු සජීවිකරණය නිර්වචනය කිරීම, දෙවැන්න නිර්වචනය කිරීම, අවශ්ය පරිදි විචල්යයන් සකසන්න, එපමණයි. /* Fade in + slide in */ .ටෝස්ට් { සජීවිකරණය: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* විශාලනය කරන්න + මැකී යන්න */ .modal { සජීවිකරණය: 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-ස්පන්දනය 1.2s පහසුව-ඉන්-පිටත අනන්ත විකල්ප; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
මෙම සංයෝජන ඉතා අලංකාර ලෙස ක්රියා කරයි, මන්ද එක් එක් සජීවිකරණය වෙනස් දේපලක් ඉලක්ක කරයි: පාරාන්ධතාවය, පරිවර්තනය (පරිවර්තනය / පරිමාණය) යනාදිය. නමුත් සමහර විට ගැටුම් ඇති වන අතර, ඒවා සමඟ කටයුතු කරන්නේ ඇයි සහ කෙසේද යන්න අප දැනගත යුතුය. සජීවිකරණ දෙකක් එකම දේපල සජීවීකරණය කිරීමට උත්සාහ කරන විට - උදාහරණයක් ලෙස, සජීවිකරණ පරිමාණය හෝ සජීවිකරණ පාරාන්ධතාවය යන දෙකම - ප්රතිඵලය ඔබ අපේක්ෂා කරන දේ නොවනු ඇත. පෙරනිමියෙන්, සජීවිකරණ ලැයිස්තුවේ අවසාන එක වන එම දේපල සඳහා සත්ය වශයෙන්ම යොදනු ලබන්නේ සජීවිකරණ වලින් එකක් පමණි. මෙය CSS එකම දේපලෙහි බහු සජීවිකරණ හසුරුවන ආකාරය සීමා කිරීමකි. උදාහරණයක් ලෙස, kf-pulse සජීවිකරණය පමණක් අදාළ වන බැවින් මෙය අපේක්ෂිත පරිදි ක්රියා නොකරනු ඇත. .bad-combo { සජීවිකරණය: 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-පල්ස් සජීවිකරණය kf-zoom සජීවිකරණය ප්රතිස්ථාපනය කරයි, එබැවින් අපට ආරම්භක විශාලනය නොපෙනෙන අතර අපේක්ෂිත පරිමාණය 1.2 දක්වා ලබා ගත නොහැක. එකතු කිරීමට සජීවිකරණ-සංයුතිය සැකසීමෙන්, අපි සජීවිකරණ දෙකම ඒකාබද්ධ කිරීමට බ්රවුසරයට කියමු. මෙය අපට අවශ්ය ප්රතිඵලය ලබා දෙයි. .සංරචකය-දෙක { සජීවිකරණ-සංයුතිය: එකතු කරන්න; }
අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 8 [forked] බලන්න. මෙම ප්රවේශය අපට එකම දේපල මත බලපෑම් ඒකාබද්ධ කිරීමට අවශ්ය බොහෝ අවස්ථාවන් සඳහා හොඳින් ක්රියා කරයි. අපට ස්ථිතික දේපල අගයන් සමඟ සජීවිකරණ ඒකාබද්ධ කිරීමට අවශ්ය වූ විටද එය ප්රයෝජනවත් වේ. උදාහරණයක් ලෙස, අපට අවශ්ය ස්ථානයේ එය හරියටම ස්ථානගත කිරීමට පරිවර්තන දේපල භාවිතා කරන මූලද්රව්යයක් අප සතුව තිබේ නම්, පසුව අපට එය kf-slide-in keyframes සමඟ සජීවීකරණය කිරීමට අවශ්ය නම්, අපට සජීවිකරණ-සංයුතියකින් තොරව අප්රසන්න දෘශ්ය පැනීමක් ලැබේ. අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 9 [forked] බලන්න. සජීවිකරණ-සංයුතිය එකතු කිරීමට සකසා ඇති අතර, සජීවිකරණය පවතින ඒවා සමඟ සුමට ලෙස ඒකාබද්ධ වේපරිවර්තනය, එම නිසා මූලද්රව්යය ස්ථානයේ පවතින අතර අපේක්ෂිත පරිදි සජීවීකරණය කරයි. සජීවිකරණ ස්ටැගර් බහු සජීවිකරණ හැසිරවීමේ තවත් ක්රමයක් නම් ඒවා "පහළවීම" - එනම් පළමු එක අවසන් වූ පසු දෙවන සජීවිකරණය තරමක් ආරම්භ කිරීමයි. එය සෑම අවස්ථාවක් සඳහාම ක්රියා කරන විසඳුමක් නොවේ, නමුත් අපට ප්රවේශ සජීවිකරණයක් සහ අඛණ්ඩ සජීවිකරණයක් ඇති විට එය ප්රයෝජනවත් වේ. /* වියැකී යාම + පාරාන්ධතා ස්පන්දනය */ .දැනුම්දීම { සජීවිකරණය: kf-fade-in 2s පහසුව, kf-pulse 0.5s 2s ease-in-out infinite alternate; --kf-pulse-opacity-to: 0.5; }
අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 10 [forked] බලන්න. ඇණවුම් කරුණු අපි වැඩ කරන සජීවිකරණ වලින් විශාල කොටසක් පරිවර්තන දේපල භාවිතා කරයි. බොහෝ අවස්ථාවලදී, මෙය සරලව වඩාත් පහසු වේ. පරිවර්තන සජීවිකරණ GPU-ත්වරණය කළ හැකි බැවින් එය කාර්ය සාධන වාසියක් ද ඇත. නමුත් අපි පරිවර්තන භාවිතා කරන්නේ නම්, අපගේ පරිවර්තනයන් සිදු කරන අනුපිළිවෙල වැදගත් බව අප පිළිගත යුතුය. ගොඩක්. මෙතෙක් අපගේ යතුරු රාමු තුළ, අපි තනි පරිවර්තන භාවිතා කර ඇත. පිරිවිතරයන්ට අනුව, මේවා සැමවිටම ස්ථාවර අනුපිළිවෙලකට යොදනු ලැබේ: පළමුව, මූලද්රව්යය පරිවර්තනය කරයි, පසුව භ්රමණය වේ, පසුව පරිමාණය කරයි. මෙය අර්ථවත් වන අතර අපගෙන් බොහෝ දෙනෙක් අපේක්ෂා කරන්නේ එයයි. කෙසේ වෙතත්, අපි පරිවර්තන ගුණාංගය භාවිතා කරන්නේ නම්, ශ්රිතයන් ලියා ඇති අනුපිළිවෙල වන්නේ ඒවා යෙදෙන අනුපිළිවෙලයි. මෙහිදී, අපි යමක් පික්සල් 100කින් X අක්ෂය මත ගෙන ගොස් අංශක 45කින් කරකවන්නේ නම් එය මුලින්ම අංශක 45කින් කරකවා පික්සල 100කින් චලනය කරනවාට සමාන නොවේ. /* රෝස චතුරශ්රය: පළමුව පරිවර්තනය කරන්න, පසුව කරකවන්න */ .උදාහරණ-එක { පරිවර්තනය: translateX(100px) rotate(45deg); }
/* හරිත චතුරශ්රය: පළමුව කරකවන්න, පසුව පරිවර්තනය කරන්න */ .උදාහරණ-දෙක { පරිවර්තනය: rotate (45deg) translateX(100px); }
අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 11 [forked] බලන්න. නමුත් පරිවර්තන අනුපිළිවෙලට අනුව, සියලුම පුද්ගල පරිණාමනය - අපි යතුරු රාමු ටෝකන සඳහා භාවිතා කර ඇති සියල්ල - පරිවර්තන කාර්යයන්ට පෙර සිදු වේ. එයින් අදහස් වන්නේ ඔබ පරිවර්තන දේපලෙහි සකසන ඕනෑම දෙයක් සජීවිකරණ වලින් පසුව සිදුවනු ඇති බවයි. නමුත් ඔබ සකසන්නේ නම්, උදාහරණයක් ලෙස, kf-spin යතුරු රාමු සමඟ එක්ව පරිවර්තනය කරන්න, සජීවිකරණයට පෙර පරිවර්තනය සිදුවනු ඇත. තාම අවුල්ද?! මෙය ස්ථිතික අගයන් එකම සජීවිකරණය සඳහා විවිධ ප්රතිඵල ඇති කළ හැකි තත්ත්වයන් ඇති කරයි, පහත අවස්ථාවෙහිදී මෙන්:
/* දඟ පන්දු යවන්නන් දෙදෙනාටම පොදු සජීවිකරණය */ .දඟ පන්දු යවන්නා { සජීවිකරණය: kf-spin 1s රේඛීය අනන්තය; }
/* රෝස දඟ පන්දු යවන්නා: භ්රමණය වීමට පෙර පරිවර්තනය කරන්න (තනි පරිවර්තනය) */ .spinner-රෝස { පරිවර්තනය: 100% 50%; }
/* කොළ දඟ පන්දු යවන්නා: කරකවන්න පසුව පරිවර්තනය කරන්න (ක්රියාකාරී අනුපිළිවෙල) */ .spinner-green { පරිවර්තනය: පරිවර්තනය (100%, 50%); }
අමිත් ෂීන් විසින් Pen Keyframes Tokens - Demo 12 [forked] බලන්න. පළමු දඟ පන්දු යවන්නාට (රෝස) kf-spin භ්රමණය වීමට පෙර සිදුවන පරිවර්තනයක් ලැබෙන බව ඔබට පෙනෙනු ඇත, එබැවින් එය මුලින්ම එහි ස්ථානයට ගොස් පසුව කැරකෙයි. දෙවන දඟ පන්දු යවන්නාට (කොළට) පරිවර්තන () ශ්රිතයක් ලැබේ, එය පුද්ගල පරිවර්තනයෙන් පසුව සිදු වේ, එබැවින් මූලද්රව්යය පළමුව භ්රමණය වේ, පසුව එහි වත්මන් කෝණයට සාපේක්ෂව චලනය වන අතර අපට එම පුළුල් කක්ෂ ආචරණය ලැබේ. නැත, මෙය දෝෂයක් නොවේ. එය 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); } } }
මේ ආකාරයට, අඩු චලිතයට කැමති පරිශීලකයින්ට මූලද්රව්යය එහි අවසාන තත්ත්වයේ ක්ෂණිකව දිස්වන අතර අනෙක් සියල්ලන්ටම සජීවිකරණ සංක්රාන්තිය ලැබේ. මෘදු ප්රවේශය අපට යම් චලනයක් තබා ගැනීමට අවශ්ය වන අවස්ථා තිබේ, නමුත් මුල් සජීවිකරණයට වඩා මෘදු සහ සන්සුන්. උදාහරණයක් ලෙස, අපට මෘදු වියැකී යාමක් සමඟ bounce පිවිසුමක් ප්රතිස්ථාපනය කළ හැකිය.
@keyframes kf-bounce { /* අඩු චලනය සඳහා මෘදු වියැකී යාම */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* මුල් bounce යතුරු රාමු */ } }
දැන්, අඩු චලිතය සක්රීය කර ඇති පරිශීලකයින්ට තවමත් පෙනුම පිළිබඳ හැඟීමක් ලැබේ, නමුත් පිම්මක හෝ ප්රත්යාස්ථ සජීවිකරණයක තීව්ර චලනයකින් තොරව. ගොඩනැඟිලි කොටස් ක්රියාත්මක වන විට, ඊළඟ ප්රශ්නය වන්නේ ඒවා සැබෑ කාර්ය ප්රවාහයේ කොටසක් බවට පත් කරන්නේ කෙසේද යන්නයි. නම්යශීලී යතුරු රාමු ලිවීම එක දෙයකි, නමුත් විශාල ව්යාපෘතියක් හරහා ඒවා විශ්වාසදායක කිරීමට මට දුෂ්කර මාර්ගයක් ඉගෙන ගැනීමට ඇති උපාය මාර්ග කිහිපයක් අවශ්ය වේ. ක්රියාත්මක කිරීමේ උපාය මාර්ග සහ හොඳම භාවිතයන් අපට යතුරු රාමු ටෝකනවල ශක්තිමත් පුස්තකාලයක් ලැබුණු පසු, සැබෑ අභියෝගය වන්නේ ඒවා එදිනෙදා වැඩවලට ගෙන එන්නේ කෙසේද යන්නයි.
පෙළඹවීම නම් සියලුම යතුරු රාමු එකවර දමා ගැටලුව විසඳා ඇති බව ප්රකාශ කිරීමයි, නමුත් ප්රායෝගිකව ක්රමානුකූලව සම්මත කිරීමෙන් හොඳම ප්රතිඵල ලැබෙන බව මම සොයාගෙන ඇත. ෆේඩ් හෝ ස්ලයිඩය වැනි වඩාත් පොදු සජීවිකරණ සමඟ ආරම්භ කරන්න. මේවා විශාල නැවත ලිවීම් අවශ්ය නොවී ක්ෂණික වටිනාකමක් පෙන්වන පහසු ජයග්රහණ වේ. නම් කිරීම අවධානයට ලක්විය යුතු තවත් කරුණකි. ස්ථාවර උපසර්ගයක් හෝ නාම අවකාශයක් මඟින් කුමන සජීවිකරණ ටෝකන සහ දේශීය එක-ඕෆ් මොනවාද යන්න පැහැදිලි කරයි. එය අහම්බෙන් සිදුවන ගැටුම් වළක්වන අතර නව කණ්ඩායම් සාමාජිකයින්ට බැලූ බැල්මට බෙදාගත් පද්ධතිය හඳුනා ගැනීමට උපකාරී වේ. ලේඛනගත කිරීම කේතය මෙන්ම වැදගත් වේ. එක් එක් යතුරු රාමු ටෝකනයට ඉහළින් කෙටි අදහස් දැක්වීමක් පවා පැය ගණනකට පසුව අනුමාන කිරීම ඉතිරි කර ගත හැක. සංවර්ධකයෙකුට ටෝකන ගොනුව විවෘත කිරීමට, ඔවුන්ට අවශ්ය බලපෑම සඳහා පරිලෝකනය කිරීමට සහ භාවිත රටාව කෙලින්ම ඒවායේ සංරචකයට පිටපත් කිරීමට හැකි විය යුතුය. මෙම ප්රවේශය උත්සාහය වටින්නේ නම්යශීලී බව ය. සංවේදී අභිරුචි ගුණාංග හෙළිදරව් කිරීමෙන්, අපි පද්ධතිය බිඳ දැමීමකින් තොරව සජීවිකරණය අනුවර්තනය කිරීමට කණ්ඩායම්වලට ඉඩ ලබා දෙමු. ඒ සමඟම, සංකීර්ණ නොකිරීමට උත්සාහ කරන්න. වැදගත් වන බොත්තම් ලබා දී ඉතිරිය මත තබා ගන්න. අවසාන වශයෙන්, ප්රවේශ්යතාව මතක තබා ගන්න. සෑම සජීවිකරණයකටම අඩු චලන විකල්පයක් අවශ්ය නොවේ, නමුත් බොහෝ දෙනෙකුට අවශ්ය වේ. මෙම ගැලපීම් කල්තියා පිළිස්සීම යන්නෙන් අදහස් වන්නේ අප කිසිවිටෙක ඒවා පසුකාලීනව ප්රතිනිර්මාණය කිරීමට අවශ්ය නොවන අතර, එය අපගේ පරිශීලකයින් කිසිවිටෙක සඳහන් නොකළත් ඔවුන් දකින සැලකිල්ලක් පෙන්නුම් කරයි.
මගේ අත්දැකීමට අනුව, යතුරු රාමු ටෝකන අපගේ සැලසුම් ටෝකන කාර්ය ප්රවාහයේ කොටසක් ලෙස සැලකීම ඒවා ඇලවීමට හේතු වේ. ඒවා ක්රියාත්මක වූ පසු, ඒවා විශේෂ ප්රයෝග ලෙස දැනීම නවත්වන අතර නිෂ්පාදන චලනය වන ආකාරය සහ ප්රතිචාර දක්වන ආකාරය පිළිබඳ ස්වාභාවික දිගුවක් වන නිර්මාණ භාෂාවේ කොටසක් බවට පත්වේ. එතීමෙන් සජීවිකරණ අතුරුමුහුණත් ගොඩනැගීමේ වඩාත්ම ප්රීතිමත් කොටස් වලින් එකක් විය හැකි නමුත් ව්යුහයකින් තොරව ඒවා කලකිරීමේ විශාලතම මූලාශ්රවලින් එකක් බවට පත්විය හැකිය. යතුරු රාමු සංකේත ලෙස සැලකීමෙන්, ඔබ සාමාන්යයෙන් අවුල් සහගත සහ කළමනාකරණය කිරීමට අපහසු යමක් ගෙන එය පැහැදිලි, පුරෝකථනය කළ හැකි පද්ධතියක් බවට පත් කරයි. සැබෑ අගය වන්නේ කේත පේළි කිහිපයක් සුරැකීම පමණක් නොවේ. ඔබ වියැකී යාමක්, ස්ලයිඩයක්, විශාලනයක් හෝ භ්රමණයක් භාවිතා කරන විට, එය ව්යාපෘතිය පුරා හැසිරෙන්නේ කෙසේදැයි ඔබ හරියටම දන්නා බව විශ්වාසයයි. එය නිමක් නැති විචල්යයන්ගේ අවුල් නොමැතිව අභිරුචි ගුණාංග වලින් ලැබෙන නම්යශීලීභාවය තුළ ය. සහ එය ලෙස එකතු කරනවාට වඩා අත්තිවාරමට ගොඩනගා ඇති ප්රවේශ්යතාවයේ ඇතපසු සිතුවිල්ලක්. මෙම අදහස් විවිධ කණ්ඩායම්වල සහ විවිධ කේත පදනමේ ක්රියාත්මක වන බව මම දැක ඇත්තෙමි, සහ රටාව සෑම විටම එකම වේ. ටෝකන ක්රියාත්මක වූ පසු, යතුරු රාමු විසිරුණු උපක්රම එකතුවක් වීම නවතා නිර්මාණ භාෂාවේ කොටසක් බවට පත් වේ. ඔවුන් නිෂ්පාදනයට වඩා චේතනාන්විත, වඩා ස්ථාවර සහ වඩා ජීවමාන හැඟීමක් ඇති කරයි. ඔබ මෙම ලිපියෙන් එක දෙයක් ගන්නේ නම්, එය මෙසේ වීමට ඉඩ දෙන්න: සජීවිකරණ සඳහා අපි දැනටමත් වර්ණ, මුද්රණ ශිල්පය සහ පරතරය සඳහා ලබා දී ඇති සැලකිල්ල සහ ව්යුහයම ලැබිය යුතුය. යතුරු රාමු ටෝකන් වල කුඩා ආයෝජනයක් ඔබගේ අතුරු මුහුණත චලනය වන සෑම අවස්ථාවකම ගෙවනු ලැබේ.
