આને ચિત્રિત કરો: તમે એક નવા પ્રોજેક્ટમાં જોડાઓ છો, કોડબેઝમાં ડાઇવ કરો છો, અને પ્રથમ થોડા કલાકોમાં, તમે નિરાશાજનક રીતે પરિચિત કંઈક શોધો છો. સમગ્ર સ્ટાઈલશીટ્સમાં પથરાયેલા, તમને સમાન મૂળભૂત એનિમેશન માટે ઘણી @keyframes વ્યાખ્યાઓ મળે છે. ત્રણ અલગ-અલગ ફેડ-ઇન ઇફેક્ટ્સ, બે કે ત્રણ સ્લાઇડ ભિન્નતા, મુઠ્ઠીભર ઝૂમ એનિમેશન અને ઓછામાં ઓછા બે અલગ-અલગ સ્પિન એનિમેશન કારણ કે, સારું, શા માટે નહીં? @keyframes પલ્સ { માંથી { સ્કેલ: 1; } થી { સ્કેલ: 1.1; } }
@keyframes મોટા પલ્સ { 0%, 20%, 100% { સ્કેલ: 1; } 10%, 40% { સ્કેલ: 1.2; } }
જો આ દૃશ્ય પરિચિત લાગે, તો તમે એકલા નથી. વિવિધ પ્રોજેક્ટ્સ પરના મારા અનુભવમાં, હું જે સૌથી વધુ સાતત્યપૂર્ણ ઝડપી જીત આપી શકું છું તેમાંથી એક કીફ્રેમને એકીકૃત અને પ્રમાણિત કરવાનું છે. તે એટલી વિશ્વસનીય પેટર્ન બની ગઈ છે કે હવે હું કોઈપણ નવા કોડબેઝ પરના મારા પ્રથમ કાર્યોમાંના એક તરીકે આ સફાઈની રાહ જોઉં છું. અંધાધૂંધી પાછળનો તર્ક જ્યારે તમે તેના વિશે વિચારો છો ત્યારે આ નિરર્થકતા સંપૂર્ણ અર્થમાં છે. અમે બધા અમારા રોજિંદા કામમાં સમાન મૂળભૂત એનિમેશનનો ઉપયોગ કરીએ છીએ: ફેડ્સ, સ્લાઇડ્સ, ઝૂમ, સ્પિન અને અન્ય સામાન્ય અસરો. આ એનિમેશન એકદમ સરળ છે, અને કામ પૂર્ણ કરવા માટે ઝડપી @keyframes વ્યાખ્યાને વ્હીપ અપ કરવું સરળ છે. કેન્દ્રીયકૃત એનિમેશન સિસ્ટમ વિના, વિકાસકર્તાઓ સ્વાભાવિક રીતે આ કીફ્રેમ્સને શરૂઆતથી લખે છે, તે જાણતા નથી કે કોડબેઝમાં અન્યત્ર સમાન એનિમેશન પહેલેથી અસ્તિત્વમાં છે. ઘટક-આધારિત આર્કિટેક્ચર્સમાં કામ કરતી વખતે આ ખાસ કરીને સામાન્ય છે (જે આપણામાંથી મોટાભાગના લોકો આ દિવસોમાં કરે છે), કારણ કે ટીમો ઘણીવાર એપ્લિકેશનના વિવિધ ભાગોમાં સમાંતર રીતે કામ કરે છે. પરિણામ? એનિમેશન અરાજકતા. ધ સ્મોલ પ્રોબ્લેમ કીફ્રેમ ડુપ્લિકેશન સાથેના સૌથી સ્પષ્ટ મુદ્દાઓ વિકાસ સમયનો બગાડ અને બિનજરૂરી કોડ બ્લોટ છે. બહુવિધ કીફ્રેમ વ્યાખ્યાઓનો અર્થ છે જ્યારે જરૂરિયાતો બદલાય ત્યારે અપડેટ કરવા માટે બહુવિધ સ્થાનો. તમારા ફેડ એનિમેશનના સમયને સમાયોજિત કરવાની જરૂર છે? તમારે તમારા કોડબેઝમાં દરેક દાખલાનો શિકાર કરવાની જરૂર પડશે. સરળ કાર્યોને પ્રમાણિત કરવા માંગો છો? તમામ ભિન્નતાઓ શોધવા માટે શુભેચ્છા. જાળવણી બિંદુઓનો આ ગુણાકાર પણ સરળ એનિમેશન અપડેટને સમય માંગી લે તેવું કાર્ય બનાવે છે. મોટી સમસ્યા આ કીફ્રેમ્સ ડુપ્લિકેશન સપાટીની નીચે છુપાયેલી ઘણી વધુ કપટી સમસ્યા બનાવે છે: વૈશ્વિક સ્કોપ ટ્રેપ. ઘટક-આધારિત આર્કિટેક્ચર્સ સાથે કામ કરતી વખતે પણ, CSS કીફ્રેમ હંમેશા વૈશ્વિક અવકાશમાં વ્યાખ્યાયિત કરવામાં આવે છે. આનો અર્થ એ છે કે તમામ કીફ્રેમ તમામ ઘટકો પર લાગુ થાય છે. હંમેશા. હા, તમારું એનિમેશન તમારા ઘટકમાં તમે વ્યાખ્યાયિત કરેલ કીફ્રેમ્સનો ઉપયોગ કરે તે જરૂરી નથી. તે છેલ્લી કીફ્રેમ્સનો ઉપયોગ કરે છે જે વૈશ્વિક સ્કોપમાં લોડ કરવામાં આવેલા ચોક્કસ સમાન નામ સાથે મેળ ખાય છે. જ્યાં સુધી તમારી બધી કીફ્રેમ સમાન હોય, ત્યાં સુધી આ નાની સમસ્યા જેવી લાગે છે. પરંતુ જે ક્ષણે તમે ચોક્કસ ઉપયોગના કેસ માટે એનિમેશનને કસ્ટમાઇઝ કરવા માંગો છો, તમે મુશ્કેલીમાં છો, અથવા ખરાબ, તમે જ તેનું કારણ બનશો. કાં તો તમારું એનિમેશન કામ કરશે નહીં કારણ કે તમારા પછી અન્ય એક ઘટક લોડ થાય છે, તમારી કીફ્રેમ પર ફરીથી લખે છે, અથવા તમારું ઘટક છેલ્લું લોડ થાય છે અને આકસ્મિક રીતે તે કીફ્રેમના નામનો ઉપયોગ કરીને દરેક અન્ય ઘટક માટે એનિમેશન વર્તણૂકમાં ફેરફાર કરે છે, અને તમને કદાચ તેનો ખ્યાલ પણ ન આવે. અહીં એક સરળ ઉદાહરણ છે જે સમસ્યા દર્શાવે છે: .component-one { /* ઘટક શૈલીઓ */ એનિમેશન: પલ્સ 1s ઇઝ-ઇન-આઉટ અનંત વૈકલ્પિક; }
/* આ @keyframes વ્યાખ્યા કામ કરશે નહીં */ @keyframes પલ્સ { માંથી { સ્કેલ: 1; } થી { સ્કેલ: 1.1; } }
/* કોડમાં પછીથી... */
.component-2 { /* ઘટક શૈલીઓ */ એનિમેશન: પલ્સ 1s ઇઝ-ઇન-આઉટ અનંત; }
/* આ કીફ્રેમ બંને ઘટકો પર લાગુ થશે */ @keyframes પલ્સ { 0%, 20%, 100% { સ્કેલ: 1; } 10%, 40% { સ્કેલ: 1.2; } }
બંને ઘટકો સમાન એનિમેશન નામનો ઉપયોગ કરે છે, પરંતુ બીજી @keyframes વ્યાખ્યા પ્રથમને ઓવરરાઈટ કરે છે. હવે કમ્પોનન્ટ-એક અને કમ્પોનન્ટ-ટુ બંને બીજી કીફ્રેમ્સનો ઉપયોગ કરશે, પછી ભલેને કયો ઘટક કયો કીફ્રેમ વ્યાખ્યાયિત કરે. પેન કીફ્રેમ ટોકન્સ જુઓ - ડેમો 1 [ફોર્ક્ડ] અમિત શીન દ્વારા. સૌથી ખરાબ ભાગ? આ ઘણીવાર સ્થાનિક વિકાસમાં સંપૂર્ણ રીતે કામ કરે છે પરંતુ જ્યારે બિલ્ડ પ્રક્રિયાઓ તમારી સ્ટાઇલશીટ્સના લોડિંગ ક્રમમાં ફેરફાર કરે છે ત્યારે ઉત્પાદનમાં રહસ્યમય રીતે તૂટી જાય છે. તમે એનિમેશન સાથે અંત કરો છો જે અલગ રીતે વર્તે છે તેના આધારે કયા ઘટકો લોડ થાય છે અને કયા ક્રમમાં છે. ઉકેલ: એકીકૃત કીફ્રેમ્સ આ અંધાધૂંધીનો જવાબ આશ્ચર્યજનક રીતે સરળ છે: પૂર્વવ્યાખ્યાયિત ગતિશીલ કીફ્રેમ શેર કરેલી સ્ટાઇલશીટમાં સંગ્રહિત છે. દરેક ઘટકને તેના પોતાના એનિમેશનને વ્યાખ્યાયિત કરવા દેવાને બદલે, અમે કેન્દ્રિયકૃત કીફ્રેમ બનાવીએ છીએ જે સારી રીતે દસ્તાવેજીકૃત, સરળ છે.તમારા પ્રોજેક્ટની ચોક્કસ જરૂરિયાતોને અનુરૂપ ઉપયોગ, જાળવણી અને અનુરૂપ. તેને કીફ્રેમ ટોકન્સ તરીકે વિચારો. જેમ આપણે રંગો અને અંતર માટે ટોકન્સનો ઉપયોગ કરીએ છીએ, અને આપણામાંથી ઘણા પહેલાથી જ એનિમેશન પ્રોપર્ટીઝ માટે ટોકન્સનો ઉપયોગ કરે છે, જેમ કે સમયગાળો અને સરળ કાર્યો માટે, શા માટે કીફ્રેમ માટે પણ ટોકન્સનો ઉપયોગ કરતા નથી? આ અભિગમ તમે ઉપયોગ કરી રહ્યાં છો તે કોઈપણ વર્તમાન ડિઝાઇન ટોકન વર્કફ્લો સાથે કુદરતી રીતે એકીકૃત થઈ શકે છે, જ્યારે નાની સમસ્યા (કોડ ડુપ્લિકેશન) અને મોટી સમસ્યા (વૈશ્વિક અવકાશ તકરાર) બંનેને એક જ વારમાં ઉકેલી શકાય છે. વિચાર સીધો છે: અમારા તમામ સામાન્ય એનિમેશન માટે સત્યનો એક જ સ્ત્રોત બનાવો. આ શેર કરેલી સ્ટાઈલશીટમાં કાળજીપૂર્વક તૈયાર કરાયેલી કીફ્રેમ્સ છે જે અમારો પ્રોજેક્ટ વાસ્તવમાં ઉપયોગ કરે છે તે એનિમેશન પેટર્નને આવરી લે છે. અમારા કોડબેઝમાં ક્યાંક ફેડ એનિમેશન પહેલેથી જ અસ્તિત્વમાં છે કે કેમ તે અંગે વધુ અનુમાન લગાવવાની જરૂર નથી. અન્ય ઘટકોમાંથી એનિમેશનને વધુ આકસ્મિક રીતે ઓવરરાઇટ કરવાની જરૂર નથી. પરંતુ અહીં મુખ્ય છે: આ માત્ર સ્થિર કોપી-પેસ્ટ એનિમેશન નથી. તેઓ CSS કસ્ટમ પ્રોપર્ટીઝ દ્વારા ગતિશીલ અને કસ્ટમાઇઝ કરવા માટે ડિઝાઇન કરવામાં આવ્યા છે, જે અમને ચોક્કસ ઉપયોગના કેસોમાં એનિમેશનને અનુકૂલિત કરવાની લવચીકતા હોવા છતાં સુસંગતતા જાળવી રાખવાની મંજૂરી આપે છે, જેમ કે જો તમને એક જગ્યાએ સહેજ મોટા "પલ્સ" એનિમેશનની જરૂર હોય. પ્રથમ કીફ્રેમ ટોકન બનાવવું પ્રથમ ઓછા લટકતા ફળોમાંથી એક જેનો આપણે સામનો કરવો જોઈએ તે છે “ફેડ-ઈન” એનિમેશન. મારા તાજેતરના પ્રોજેક્ટ્સમાંના એકમાં, મને એક ડઝનથી વધુ અલગ ફેડ-ઇન વ્યાખ્યાઓ મળી, અને હા, તે બધાએ ફક્ત 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 ease-in-out; }
.સૂચના { એનિમેશન: kf-fade-in 0.5s ease-out; }
અમિત શીન દ્વારા પેન કીફ્રેમ ટોકન્સ - ડેમો 2 [ફોર્ક્ડ] જુઓ. નોંધ: અમે અમારા બધા @keyframes નામોમાં kf- ઉપસર્ગનો ઉપયોગ કરી રહ્યા છીએ. આ ઉપસર્ગ નેમસ્પેસ તરીકે સેવા આપે છે જે પ્રોજેક્ટમાં અસ્તિત્વમાં છે તે એનિમેશન સાથે નામકરણના વિરોધાભાસને અટકાવે છે અને તે તરત જ સ્પષ્ટ કરે છે કે આ કીફ્રેમ્સ અમારી કીફ્રેમ ટોકન્સ ફાઇલમાંથી આવે છે. ડાયનેમિક સ્લાઇડ બનાવી રહી છે કેએફ-ફેડ-ઇન કીફ્રેમ્સ સરસ કામ કરે છે કારણ કે તે સરળ છે અને વસ્તુઓને ગડબડ કરવા માટે થોડી જગ્યા છે. અન્ય એનિમેશનમાં, જો કે, આપણે વધુ ગતિશીલ બનવાની જરૂર છે, અને અહીં આપણે CSS કસ્ટમ પ્રોપર્ટીઝની પ્રચંડ શક્તિનો લાભ લઈ શકીએ છીએ. આ તે છે જ્યાં કીફ્રેમ ટોકન્સ સ્કેટર્ડ સ્ટેટિક એનિમેશનની સરખામણીમાં ખરેખર ચમકે છે. ચાલો એક સામાન્ય દૃશ્ય લઈએ: "સ્લાઇડ-ઇન" એનિમેશન. પણ ક્યાંથી અંદર સ્લાઇડ? જમણી બાજુથી 100px? ડાબેથી 50%? શું તે સ્ક્રીનની ટોચ પરથી દાખલ થવું જોઈએ? અથવા કદાચ નીચેથી ફ્લોટ કરો? ઘણી બધી શક્યતાઓ છે, પરંતુ દરેક દિશા અને દરેક ભિન્નતા માટે અલગ કીફ્રેમ બનાવવાને બદલે, અમે એક લવચીક ટોકન બનાવી શકીએ છીએ જે તમામ પરિસ્થિતિઓને અનુરૂપ છે: /* * સ્લાઇડ ઇન - ડાયરેક્શનલ સ્લાઇડ એનિમેશન * દિશાને નિયંત્રિત કરવા માટે --kf-slide-from નો ઉપયોગ કરો * ડિફૉલ્ટ: ડાબેથી અંદર સ્લાઇડ્સ (-100%) *ઉપયોગ: * એનિમેશન: kf-સ્લાઇડ-ઇન 0.3s ઇઝ-આઉટ; * --kf-સ્લાઇડ-ફ્રોમ: -100px 0; // ડાબેથી સ્લાઇડ કરો * --kf-સ્લાઇડ-ફ્રોમ: 100px 0; // જમણી બાજુથી સ્લાઇડ કરો * --kf-સ્લાઇડ-ફ્રોમ: 0 -50px; // ઉપરથી સ્લાઇડ કરો */
@keyframes kf-સ્લાઇડ-ઇન { માંથી { અનુવાદ કરો: var(--kf-slide-from, -100% 0); } થી { અનુવાદ: 0 0; } }
હવે આપણે કસ્ટમ પ્રોપર્ટીમાંથી --kf-slide-ને બદલીને કોઈપણ સ્લાઈડ દિશા માટે આ સિંગલ @keyframes ટોકનનો ઉપયોગ કરી શકીએ છીએ: .સાઇડબાર { એનિમેશન: kf-સ્લાઇડ-ઇન 0.3s ઇઝ-આઉટ; /* ડિફૉલ્ટ મૂલ્યનો ઉપયોગ કરે છે: ડાબેથી સ્લાઇડ્સ */ }
.સૂચના { એનિમેશન: kf-સ્લાઇડ-ઇન 0.4s ઇઝ-આઉટ; --kf-સ્લાઇડ-ફ્રોમ: 0 -50px; /* ઉપરથી સ્લાઇડ */ }
મોડલ { એનિમેશન kf-fade-in 0.5s, kf-સ્લાઇડ-ઇન 0.5s ક્યુબિક-બેઝિયર(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* નીચે-જમણેથી સ્લાઇડ */ }
સાતત્ય જાળવી રાખીને આ અભિગમ આપણને અકલ્પનીય સુગમતા આપે છે. એક કીફ્રેમ ઘોષણા, અનંત શક્યતાઓ. અમિત શીન દ્વારા પેન કીફ્રેમ ટોકન્સ - ડેમો 3 [ફોર્ક્ડ] જુઓ. અને જો આપણે આપણા એનિમેશનને વધુ લવચીક બનાવવા માંગીએ છીએ, તો "સ્લાઇડ-આઉટ" અસરોને પણ મંજૂરી આપીને, અમે કરી શકીએ છીએફક્ત કસ્ટમ પ્રોપર્ટીમાં --kf-slide- ઉમેરો, જે આપણે આગળના વિભાગમાં જોઈશું તેના જેવું જ. બાયડાયરેક્શનલ ઝૂમ કીફ્રેમ્સ અન્ય સામાન્ય એનિમેશન જે સમગ્ર પ્રોજેક્ટમાં ડુપ્લિકેટ થાય છે તે છે "ઝૂમ" અસરો. ભલે તે ટોસ્ટ સંદેશાઓ માટે સૂક્ષ્મ સ્કેલ-અપ હોય, મોડલ્સ માટે નાટકીય ઝૂમ-ઇન હોય અથવા હેડિંગ માટે હળવા સ્કેલ-ડાઉન અસર હોય, ઝૂમ એનિમેશન દરેક જગ્યાએ છે. દરેક સ્કેલ મૂલ્ય માટે અલગ કીફ્રેમ બનાવવાને બદલે, ચાલો kf-ઝૂમ કીફ્રેમનો એક લવચીક સેટ બનાવીએ:
/* * ઝૂમ - સ્કેલ એનિમેશન સ્કેલ મૂલ્યોને નિયંત્રિત કરવા માટે --kf-zoom-from અને --kf-zoom-to નો ઉપયોગ કરો * ડિફૉલ્ટ: 80% થી 100% સુધી ઝૂમ કરે છે (0.8 થી 1) *ઉપયોગ: * એનિમેશન: kf-ઝૂમ 0.2s સરળ-આઉટ; * --kf-ઝૂમ-ફ્રોમ: 0.5; --kf-ઝૂમ-ટુ: 1; // 50% થી 100% સુધી ઝૂમ કરો * --kf-ઝૂમ-ફ્રોમ: 1; --kf-ઝૂમ-ટુ: 0; // 100% થી 0% સુધી ઝૂમ કરો * --kf-ઝૂમ-ફ્રોમ: 1; --kf-ઝૂમ-ટુ: 1.1; // 100% થી 110% સુધી ઝૂમ કરો */
@keyframes kf-ઝૂમ { માંથી { સ્કેલ: var(-kf-zoom-from, 0.8); } થી { સ્કેલ: var(-kf-ઝૂમ-ટુ, 1); } }
એક વ્યાખ્યા સાથે, અમે અમને જોઈતી કોઈપણ ઝૂમ વિવિધતા પ્રાપ્ત કરી શકીએ છીએ: .ટોસ્ટ { એનિમેશન kf-સ્લાઇડ-ઇન 0.2s, kf-ઝૂમ 0.4s સરળ-આઉટ; --kf-slide-from: 0 100%; /* ઉપરથી સ્લાઇડ */ /* ડિફૉલ્ટ ઝૂમનો ઉપયોગ કરે છે: 80% થી 100% સુધીના સ્કેલ */ }
મોડલ { એનિમેશન: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-ઝૂમ-ફ્રોમ: 0; /* 0% થી 100% સુધી નાટકીય ઝૂમ */ }
.મથાળું { એનિમેશન kf-fade-in 2s, kf-ઝૂમ 2s સરળતા; --kf-ઝૂમ-ફ્રોમ: 1.2; --kf-ઝૂમ-ટુ: 0.8; /* હળવા સ્કેલ ડાઉન */ }
0.8 (80%) નું ડિફોલ્ટ મોટાભાગના UI ઘટકો માટે સંપૂર્ણ રીતે કામ કરે છે, જેમ કે ટોસ્ટ સંદેશાઓ અને કાર્ડ્સ, જ્યારે હજુ પણ વિશિષ્ટ કેસ માટે કસ્ટમાઇઝ કરવાનું સરળ છે. અમિત શીન દ્વારા પેન કીફ્રેમ ટોકન્સ - ડેમો 4 [ફોર્ક્ડ] જુઓ. તમે તાજેતરના ઉદાહરણોમાં કંઈક રસપ્રદ નોંધ્યું હશે: અમે એનિમેશનને જોડી રહ્યાં છીએ. @keyframes ટોકન્સ સાથે કામ કરવાનો એક મુખ્ય ફાયદો એ છે કે તેઓ એકબીજા સાથે એકીકૃત રીતે એકીકૃત થવા માટે ડિઝાઇન કરવામાં આવ્યા છે. આ સરળ રચના ઇરાદાપૂર્વકની છે, આકસ્મિક નથી. અમે એનિમેશન કમ્પોઝિશનની વધુ વિગતમાં પછીથી ચર્ચા કરીશું, જેમાં તે ક્યાં સમસ્યારૂપ બની શકે છે, પરંતુ મોટાભાગના સંયોજનો સીધા અને અમલમાં સરળ હોય છે. નોંધ: આ લેખ લખતી વખતે, અને કદાચ તે લખવાને કારણે, મેં મારી જાતને પ્રવેશ એનિમેશનના સમગ્ર વિચાર પર પુનર્વિચાર કરતા જોયો. CSS માં તાજેતરના તમામ એડવાન્સિસ સાથે, શું અમને હજી પણ તેમની જરૂર છે? સદભાગ્યે, એડમ અર્ગીલે સમાન પ્રશ્નોની શોધ કરી અને તેને તેના બ્લોગમાં તેજસ્વી રીતે વ્યક્ત કર્યો. આ અહીં જે લખ્યું છે તેનો વિરોધાભાસ કરતું નથી, પરંતુ તે ધ્યાનમાં લેવા યોગ્ય અભિગમ રજૂ કરે છે, ખાસ કરીને જો તમારા પ્રોજેક્ટ્સ પ્રવેશ એનિમેશન પર ખૂબ આધાર રાખે છે. સતત એનિમેશન જ્યારે પ્રવેશ એનિમેશન, જેમ કે "ફેડ", "સ્લાઇડ", અને "ઝૂમ" એકવાર થાય છે અને પછી બંધ થાય છે, સતત એનિમેશન ધ્યાન દોરવા અથવા ચાલુ પ્રવૃત્તિ સૂચવવા માટે અનિશ્ચિત સમય માટે લૂપ કરે છે. હું જે બે સૌથી સામાન્ય સતત એનિમેશનનો સામનો કરું છું તે છે “સ્પિન” (લોડિંગ સૂચકાંકો માટે) અને “પલ્સ” (મહત્વના ઘટકોને પ્રકાશિત કરવા માટે). જ્યારે કીફ્રેમ ટોકન્સ બનાવવાની વાત આવે છે ત્યારે આ એનિમેશન અનન્ય પડકારો રજૂ કરે છે. પ્રવેશ એનિમેશનથી વિપરીત જે સામાન્ય રીતે એક રાજ્યથી બીજા રાજ્યમાં જાય છે, સતત એનિમેશનને તેમની વર્તણૂક પેટર્નમાં અત્યંત વૈવિધ્યપૂર્ણ બનાવવાની જરૂર છે. સ્પિન ડોક્ટર દરેક પ્રોજેક્ટ બહુવિધ સ્પિન એનિમેશનનો ઉપયોગ કરે છે. કેટલાક ઘડિયાળની દિશામાં ફરે છે, અન્ય ઘડિયાળની વિરુદ્ધ દિશામાં. કેટલાક એક 360-ડિગ્રી પરિભ્રમણ કરે છે, અન્ય ઝડપી અસર માટે બહુવિધ વળાંકો કરે છે. દરેક ભિન્નતા માટે અલગ કીફ્રેમ બનાવવાને બદલે, ચાલો એક લવચીક સ્પિન બનાવીએ જે તમામ દૃશ્યોને હેન્ડલ કરે છે:
/* * સ્પિન - રોટેશન એનિમેશન * પરિભ્રમણ શ્રેણીને નિયંત્રિત કરવા માટે --kf-spin-from અને --kf-spin-to નો ઉપયોગ કરો * પરિભ્રમણની માત્રાને નિયંત્રિત કરવા માટે --kf-સ્પિન-ટર્નનો ઉપયોગ કરો * ડિફૉલ્ટ: 0deg થી 360deg સુધી ફરે છે (1 સંપૂર્ણ પરિભ્રમણ) *ઉપયોગ: * એનિમેશન: kf-સ્પિન 1s રેખીય અનંત; * --kf-સ્પિન-ટર્ન્સ: 2; // 2 સંપૂર્ણ પરિભ્રમણ * --kf-સ્પિન-ફ્રોમ: 0deg; --kf-સ્પિન-ટુ: 180deg; // અર્ધ પરિભ્રમણ * --kf-સ્પિન-ફ્રોમ: 0deg; --kf-સ્પિન-ટુ: -360deg; // કાઉન્ટરક્લોકવાઇઝ */
@keyframes kf-સ્પિન { માંથી { ફેરવો: var(--kf-સ્પિન-ફ્રોમ, 0deg); } થી { ફેરવો: calc(var(--kf-સ્પિન-ફ્રોમ, 0deg) + var(--kf-સ્પિન-ટુ, 360deg) * var(--kf-સ્પિન-ટર્ન, 1)); } }
હવે અમે અમને ગમે તે કોઈપણ સ્પિન વિવિધતા બનાવી શકીએ છીએ:
.લોડિંગ-સ્પિનર { એનિમેશન: kf-સ્પિન 1s રેખીય અનંત; /* ડિફૉલ્ટનો ઉપયોગ કરે છે: 0deg થી 360deg સુધી ફરે છે */ }
.ફાસ્ટ-લોડર { એનિમેશન: kf-સ્પિન 1.2s ઇઝ-ઇન-આઉટ અનંત વૈકલ્પિક; --kf-સ્પિન-ટર્ન્સ: 3; /* ચક્ર દીઠ દરેક દિશા માટે 3 સંપૂર્ણ પરિભ્રમણ*/ }
સ્ટેપ્ડ-રિવર્સ { એનિમેશન: kf-સ્પિન 1.5s સ્ટેપ્સ(8) અનંત; --kf-સ્પિન-ટુ: -360deg; /* ઘડિયાળની વિરુદ્ધ દિશામાં */ }
.સૂક્ષ્મ-વિગલ { એનિમેશન: kf-સ્પિન 2s ઇઝ-ઇન-આઉટ અનંત વૈકલ્પિક; --kf-સ્પિન-ફ્રોમ: -16deg; --kf-સ્પિન-ટુ: 32deg; /* 36 ડિગ્રી હલાવો: -18 ડિગ્રી અને +18 ડિગ્રી વચ્ચે */ }
અમિત શીન દ્વારા પેન કીફ્રેમ ટોકન્સ - ડેમો 5 [ફોર્ક્ડ] જુઓ. આ અભિગમની સુંદરતા એ છે કે સમાન કીફ્રેમ સ્પિનર્સ લોડ કરવા, ચિહ્નો ફેરવવા, વિગલ ઇફેક્ટ્સ અને જટિલ મલ્ટી-ટર્ન એનિમેશન માટે પણ કામ કરે છે. ધ પલ્સ પેરાડોક્સ પલ્સ એનિમેશન વધુ મુશ્કેલ છે કારણ કે તેઓ વિવિધ ગુણધર્મોને "પલ્સ" કરી શકે છે. કેટલાક સ્કેલને પલ્સ કરે છે, અન્ય અસ્પષ્ટતાને પલ્સ કરે છે, અને કેટલાક પલ્સ રંગ ગુણધર્મો જેમ કે તેજ અથવા સંતૃપ્તિ. દરેક પ્રોપર્ટી માટે અલગ કીફ્રેમ બનાવવાને બદલે, અમે કોઈપણ CSS પ્રોપર્ટી સાથે કામ કરતી કીફ્રેમ બનાવી શકીએ છીએ. સ્કેલ અને અસ્પષ્ટ વિકલ્પો સાથે પલ્સ કીફ્રેમનું અહીં ઉદાહરણ છે:
/* * પલ્સ - પલ્સિંગ એનિમેશન સ્કેલ શ્રેણીને નિયંત્રિત કરવા માટે --kf-pulse-scale-from અને --kf-pulse-scale-to નો ઉપયોગ કરો * અસ્પષ્ટતા શ્રેણીને નિયંત્રિત કરવા માટે --kf-pulse-opacity-from અને --kf-pulse-opacity-to નો ઉપયોગ કરો * ડિફૉલ્ટ: કોઈ પલ્સ નથી (બધા મૂલ્યો 1) *ઉપયોગ: * એનિમેશન: kf-pulse 2s ease-in-out infinite alternate; * --kf-પલ્સ-સ્કેલ-ફ્રોમ: 0.95; --kf-પલ્સ-સ્કેલ-ટુ: 1.05; // સ્કેલ પલ્સ * --kf-પલ્સ-ઓપેસીટી-માંથી: 0.7; --kf-પલ્સ-અપારદર્શકતા-થી: 1; // અસ્પષ્ટ પલ્સ */
@keyframes કેએફ-પલ્સ { માંથી { સ્કેલ: var(--kf-પલ્સ-સ્કેલ-ફ્રોમ, 1); અસ્પષ્ટ: var(--kf-પલ્સ-ઓપેસીટી-from, 1); } થી { સ્કેલ: var(--kf-પલ્સ-સ્કેલ-ટુ, 1); અસ્પષ્ટ: var(--kf-પલ્સ-ઓપેસીટી-ટુ, 1); } }
આ એક લવચીક પલ્સ બનાવે છે જે બહુવિધ ગુણધર્મોને એનિમેટ કરી શકે છે: .કૉલ-ટુ-એક્શન { એનિમેશન: kf-pulse 0.6s અનંત વૈકલ્પિક; --kf-પલ્સ-ઓપેસીટી-માંથી: 0.5; /* અસ્પષ્ટ પલ્સ */ }
.notification-dot { એનિમેશન: kf-pulse 0.6s ease-in-out infinite alternate; --kf-પલ્સ-સ્કેલ-ફ્રોમ: 0.9; --kf-પલ્સ-સ્કેલ-ટુ: 1.1; /* સ્કેલ પલ્સ */ }
ટેક્સ્ટ-હાઇલાઇટ { એનિમેશન: kf-pulse 1.5s ease-out infinite; --kf-પલ્સ-સ્કેલ-ફ્રોમ: 0.8; --kf-પલ્સ-અપારદર્શક-માંથી: 0.2; /* સ્કેલ અને અસ્પષ્ટ પલ્સ */ }
અમિત શીન દ્વારા પેન કીફ્રેમ ટોકન્સ - ડેમો 6 [ફોર્ક્ડ] જુઓ. આ સિંગલ kf-પલ્સ કીફ્રેમ સૂક્ષ્મ ધ્યાન ખેંચવાથી લઈને નાટકીય હાઈલાઈટ્સ સુધીની દરેક વસ્તુને હેન્ડલ કરી શકે છે, જ્યારે કસ્ટમાઈઝ કરવામાં સરળ છે. અદ્યતન સરળતા કીફ્રેમ્સ ટોકન્સનો ઉપયોગ કરવા વિશેની એક મહાન બાબત એ છે કે અમારી એનિમેશન લાઇબ્રેરીને વિસ્તૃત કરવી અને ઇલાસ્ટિક અથવા બાઉન્સ જેવા મોટાભાગના વિકાસકર્તાઓ શરૂઆતથી લખવાની તસ્દી લેતા નથી તેવી અસરો પ્રદાન કરવી કેટલું સરળ છે. અહીં એક સરળ "બાઉન્સ" કીફ્રેમ ટોકનનું ઉદાહરણ છે જે કૂદકાની ઊંચાઈને નિયંત્રિત કરવા માટે કસ્ટમ પ્રોપર્ટીમાંથી --kf-bounce-નો ઉપયોગ કરે છે. /* * બાઉન્સ - બાઉન્સિંગ એન્ટ્રન્સ એનિમેશન * કૂદકાની ઊંચાઈને નિયંત્રિત કરવા માટે --kf-bounce-from નો ઉપયોગ કરો * ડિફૉલ્ટ: 100vh (ઑફ સ્ક્રીન) થી કૂદકો *ઉપયોગ: * એનિમેશન: kf-bounce 3s ease-in; * --kf-બાઉન્સ-ફ્રોમ: 200px; // 200px ઊંચાઈથી કૂદકો */
@keyframes kf-બાઉન્સ { 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-ઇલાસ્ટિક-ફ્રોમ-X અને --kf-ઇલાસ્ટિક-ફ્રોમ-વાયનો ઉપયોગ કરો * મૂળભૂત: ટોચના કેન્દ્રમાંથી પ્રવેશ કરે છે (0, -100vh) *ઉપયોગ: * એનિમેશન: kf-ઇલાસ્ટીક-ઇન 2s ઇઝ-ઇન-આઉટ બંને; * --kf-સ્થિતિસ્થાપક-from-X: -50px; * --kf-ઇલાસ્ટીક-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-ઇલાસ્ટીક-from-Y, 0px) * -0.3227); }
28% { અનુવાદ કરો: calc(var(--kf-ઇલાસ્ટીક-from-X, -50vw) * 0.1312)calc(var(-kf-ઇલાસ્ટીક-from-Y, 0px) * 0.1312); }
44% { અનુવાદ કરો: calc(var(-kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-ઇલાસ્ટીક-from-Y, 0px) * -0.0463); }
59% { અનુવાદ કરો: calc(var(-kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-ઇલાસ્ટીક-from-Y, 0px) * 0.0164); }
73% { અનુવાદ કરો: calc(var(-kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-ઇલાસ્ટીક-from-Y, 0px) * -0.0058); }
88% { અનુવાદ કરો: calc(var(-kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-ઇલાસ્ટીક-from-Y, 0px) * 0.0020); }
100% { અનુવાદ: 0 0; } }
આ અભિગમ અમારા સમગ્ર પ્રોજેક્ટમાં અદ્યતન કીફ્રેમનો પુનઃઉપયોગ અને કસ્ટમાઇઝ કરવાનું સરળ બનાવે છે, માત્ર એક કસ્ટમ પ્રોપર્ટી બદલીને.
.બાઉન્સ-અને-ઝૂમ { એનિમેશન kf-બાઉન્સ 3s સરળતા, kf-zoom 3s રેખીય; --kf-ઝૂમ-ફ્રોમ: 0; }
.બાઉન્સ-અને-સ્લાઇડ { એનિમેશન-રચના: ઉમેરો; /* બંને એનિમેશન અનુવાદનો ઉપયોગ કરે છે */ એનિમેશન kf-બાઉન્સ 3s સરળતા, kf-સ્લાઇડ-ઇન 3s ઇઝ-આઉટ; --kf-slide-from: -200px; }
સ્થિતિસ્થાપક-માં { એનિમેશન: kf-ઇલાસ્ટિક-ઇન 2s ઇઝ-ઇન-આઉટ બંને; }
અમિત શીન દ્વારા પેન કીફ્રેમ ટોકન્સ - ડેમો 7 [ફોર્ક્ડ] જુઓ. આ બિંદુ સુધી, અમે જોયું છે કે કેવી રીતે આપણે કીફ્રેમ્સને સ્માર્ટ અને કાર્યક્ષમ રીતે એકીકૃત કરી શકીએ છીએ. અલબત્ત, તમે તમારા પ્રોજેક્ટની જરૂરિયાતોને વધુ સારી રીતે ફિટ કરવા માટે વસ્તુઓમાં ફેરફાર કરવા માગી શકો છો, પરંતુ અમે કેટલાક સામાન્ય એનિમેશન અને રોજિંદા ઉપયોગના કેસોના ઉદાહરણો આવરી લીધા છે. અને આ કીફ્રેમ ટોકન્સ સાથે, અમારી પાસે હવે સમગ્ર પ્રોજેક્ટમાં સુસંગત, જાળવી શકાય તેવા એનિમેશન બનાવવા માટે શક્તિશાળી બિલ્ડીંગ બ્લોક્સ છે. વધુ ડુપ્લિકેટેડ કીફ્રેમ્સ નહીં, વધુ વૈશ્વિક સ્કોપ વિરોધાભાસ નહીં. અમારી બધી એનિમેશન જરૂરિયાતોને હેન્ડલ કરવાની માત્ર એક સ્વચ્છ, અનુકૂળ રીત. પરંતુ વાસ્તવિક પ્રશ્ન એ છે કે: આપણે આ બિલ્ડીંગ બ્લોક્સને એકસાથે કેવી રીતે કંપોઝ કરીએ? તે બધું એકસાથે મૂકવું અમે જોયું છે કે મૂળભૂત કીફ્રેમ ટોકન્સનું સંયોજન સરળ છે. અમારે પ્રથમ એનિમેશનને વ્યાખ્યાયિત કરવા માટે, બીજાને વ્યાખ્યાયિત કરવા માટે, જરૂરિયાત મુજબ વેરીએબલ્સને સેટ કરવા માટે, પરંતુ તે જ વસ્તુની જરૂર નથી. /* ફેડ ઇન + સ્લાઇડ ઇન */ .ટોસ્ટ { એનિમેશન kf-fade-in 0.4s, kf-સ્લાઇડ-ઇન 0.4s ક્યુબિક-બેઝિયર(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* ઝૂમ ઇન + ફેડ ઇન */ મોડલ { એનિમેશન kf-fade-in 0.3s, kf-ઝૂમ 0.3s ક્યુબિક-બેઝિયર(0.34, 1.56, 0.64, 1); --kf-ઝૂમ-ફ્રોમ: 0.7; --kf-ઝૂમ-ટુ: 1; }
/* સ્લાઇડ ઇન + પલ્સ */ .સૂચના { એનિમેશન kf-સ્લાઇડ-ઇન 0.5s, kf-પલ્સ 1.2s સરળ-ઇન-આઉટ અનંત વૈકલ્પિક; --kf-slide-from: -100px 0; --kf-પલ્સ-સ્કેલ-ફ્રોમ: 0.95; --kf-પલ્સ-સ્કેલ-ટુ: 1.05; }
આ સંયોજનો સુંદર રીતે કાર્ય કરે છે કારણ કે દરેક એનિમેશન એક અલગ મિલકતને લક્ષ્ય બનાવે છે: અસ્પષ્ટતા, રૂપાંતર (અનુવાદ/સ્કેલ), વગેરે. પરંતુ કેટલીકવાર તકરાર થાય છે, અને આપણે શા માટે અને કેવી રીતે તેનો સામનો કરવો તે જાણવાની જરૂર છે. જ્યારે બે એનિમેશન એક જ ગુણધર્મને એનિમેટ કરવાનો પ્રયાસ કરે છે - ઉદાહરણ તરીકે, બંને એનિમેટીંગ સ્કેલ અથવા બંને એનિમેટીંગ અસ્પષ્ટતા - પરિણામ તમારી અપેક્ષા મુજબ નહીં આવે. મૂળભૂત રીતે, માત્ર એક એનિમેશન ખરેખર તે મિલકત પર લાગુ થાય છે, જે એનિમેશન સૂચિમાં છેલ્લું છે. CSS એક જ પ્રોપર્ટી પર બહુવિધ એનિમેશનને કેવી રીતે હેન્ડલ કરે છે તેની આ મર્યાદા છે. ઉદાહરણ તરીકે, આ હેતુ મુજબ કામ કરશે નહીં કારણ કે માત્ર kf-pulse એનિમેશન લાગુ થશે. .ખરાબ-કોમ્બો { એનિમેશન kf-ઝૂમ 0.5 સે ફોરવર્ડ, kf- પલ્સ 1.2s અનંત વૈકલ્પિક; --kf-ઝૂમ-ફ્રોમ: 0.5; --kf-ઝૂમ-ટુ: 1.2; --kf-પલ્સ-સ્કેલ-ફ્રોમ: 0.8; --kf-પલ્સ-સ્કેલ-ટુ: 1.1; }
એનિમેશન એડિશન એક જ ગુણધર્મને અસર કરતા બહુવિધ એનિમેશનને હેન્ડલ કરવાની સૌથી સરળ અને સીધી રીત એ છે કે એનિમેશન-કમ્પોઝિશન પ્રોપર્ટીનો ઉપયોગ કરવો. ઉપરના છેલ્લા ઉદાહરણમાં, kf-pulse એનિમેશન kf-zoom એનિમેશનને બદલે છે, તેથી આપણે પ્રારંભિક ઝૂમ જોઈશું નહીં અને 1.2 સુધીનો અપેક્ષિત સ્કેલ મળશે નહીં. એનિમેશન-કમ્પોઝિશન ઉમેરવા માટે સેટ કરીને, અમે બ્રાઉઝરને બંને એનિમેશનને જોડવાનું કહીએ છીએ. આ આપણને જોઈતું પરિણામ આપે છે. .component-2 { એનિમેશન-રચના: ઉમેરો; }
અમિત શીન દ્વારા પેન કીફ્રેમ ટોકન્સ - ડેમો 8 [ફોર્ક્ડ] જુઓ. આ અભિગમ મોટાભાગના કિસ્સાઓ માટે સારી રીતે કામ કરે છે જ્યાં અમે સમાન મિલકત પર અસરોને જોડવા માંગીએ છીએ. જ્યારે આપણે એનિમેશનને સ્થિર મિલકત મૂલ્યો સાથે જોડવાની જરૂર હોય ત્યારે તે પણ ઉપયોગી છે. ઉદાહરણ તરીકે, જો આપણી પાસે એવું કોઈ તત્વ હોય કે જે અનુવાદ ગુણધર્મનો ઉપયોગ કરે છે તેને આપણે જ્યાં જોઈએ છે તે બરાબર સ્થાન આપવા માટે, અને પછી આપણે તેને kf-slide-in કીફ્રેમ્સ સાથે એનિમેટ કરવા માંગીએ છીએ, તો આપણને એનિમેશન-કમ્પોઝિશન વિના ખરાબ દૃશ્યમાન જમ્પ મળે છે. અમિત શીન દ્વારા પેન કીફ્રેમ ટોકન્સ - ડેમો 9 [ફોર્ક્ડ] જુઓ. એનિમેશન-કમ્પોઝિશન ઉમેરવા માટે સેટ સાથે, એનિમેશન વર્તમાન સાથે સરળતાથી જોડાયેલું છેરૂપાંતર કરો, જેથી તત્વ સ્થાને રહે અને અપેક્ષા મુજબ એનિમેટ થાય. એનિમેશન સ્ટેગર બહુવિધ એનિમેશનને હેન્ડલ કરવાની બીજી રીત એ છે કે તેમને “અટકે” — એટલે કે, પ્રથમ એનિમેશન સમાપ્ત થયા પછી થોડુંક બીજું એનિમેશન શરૂ કરો. તે કોઈ ઉકેલ નથી જે દરેક કેસ માટે કામ કરે છે, પરંતુ તે ઉપયોગી છે જ્યારે અમારી પાસે પ્રવેશ એનિમેશન હોય અને ત્યારબાદ સતત એનિમેશન હોય. /* ફેડ ઇન + ઓપેસીટી પલ્સ */ .સૂચના { એનિમેશન kf-fade-in 2s સરળતા, kf-પલ્સ 0.5s 2s સરળ-ઇન-આઉટ અનંત વૈકલ્પિક; --kf-પલ્સ-ઓપેસીટી-થી: 0.5; }
પેન કીફ્રેમ ટોકન્સ જુઓ - ડેમો 10 [ફોર્ક્ડ] અમિત શીન દ્વારા. ઓર્ડર બાબતો અમે જે એનિમેશન સાથે કામ કરીએ છીએ તેનો મોટો ભાગ ટ્રાન્સફોર્મ પ્રોપર્ટીનો ઉપયોગ કરે છે. મોટાભાગના કિસ્સાઓમાં, આ ફક્ત વધુ અનુકૂળ છે. તેનો પર્ફોર્મન્સ ફાયદો પણ છે કારણ કે ટ્રાન્સફોર્મ એનિમેશન GPU-એક્સિલરેટેડ હોઈ શકે છે. પરંતુ જો આપણે રૂપાંતરણોનો ઉપયોગ કરીએ છીએ, તો આપણે સ્વીકારવાની જરૂર છે કે આપણે જે ક્રમમાં આપણું પરિવર્તન કરીએ છીએ તે મહત્વનું છે. ઘણું. અમારી કીફ્રેમ્સમાં અત્યાર સુધી, અમે વ્યક્તિગત રૂપાંતરણોનો ઉપયોગ કર્યો છે. સ્પેક્સ અનુસાર, આ હંમેશા નિશ્ચિત ક્રમમાં લાગુ કરવામાં આવે છે: પ્રથમ, તત્વ અનુવાદ થાય છે, પછી ફેરવો, પછી સ્કેલ. આ અર્થપૂર્ણ છે અને આપણામાંના મોટા ભાગનાની અપેક્ષા છે. જો કે, જો આપણે ટ્રાન્સફોર્મ પ્રોપર્ટીનો ઉપયોગ કરીએ, તો ફંક્શન્સ જે ક્રમમાં લખવામાં આવે છે તે ક્રમમાં તે લાગુ કરવામાં આવે છે. આ કિસ્સામાં, જો આપણે X-અક્ષ પર 100 પિક્સેલની કોઈ વસ્તુને ખસેડીએ અને પછી તેને 45 ડિગ્રીએ ફેરવીએ, તો તે પહેલા તેને 45 ડિગ્રી દ્વારા ફેરવવા અને પછી તેને 100 પિક્સેલ ખસેડવા જેવું નથી. /* ગુલાબી ચોરસ: પ્રથમ અનુવાદ કરો, પછી ફેરવો */ .example-one { ટ્રાન્સફોર્મ: translateX(100px) rotate(45deg); }
/* લીલો ચોરસ: પહેલા ફેરવો, પછી અનુવાદ કરો */ ઉદાહરણ-બે { ટ્રાન્સફોર્મ: ફેરવો(45deg) translateX(100px); }
પેન કીફ્રેમ ટોકન્સ જુઓ - ડેમો 11 [ફોર્ક્ડ] અમિત શીન દ્વારા. પરંતુ ટ્રાન્સફોર્મ ક્રમ અનુસાર, તમામ વ્યક્તિગત રૂપાંતરણો - અમે કીફ્રેમ ટોકન્સ માટે ઉપયોગમાં લીધેલ દરેક વસ્તુ - ટ્રાન્સફોર્મ ફંક્શન્સ પહેલાં થાય છે. તેનો અર્થ એ કે તમે જે કંઈપણ ટ્રાન્સફોર્મ પ્રોપર્ટીમાં સેટ કરો છો તે એનિમેશન પછી થશે. પરંતુ જો તમે સેટ કરો, ઉદાહરણ તરીકે, kf-સ્પિન કીફ્રેમ્સ સાથે એકસાથે અનુવાદ કરો, તો અનુવાદ એનિમેશન પહેલાં થશે. હજુ સુધી મૂંઝવણમાં?! આ એવી પરિસ્થિતિઓ તરફ દોરી જાય છે જ્યાં સ્થિર મૂલ્યો સમાન એનિમેશન માટે વિવિધ પરિણામોનું કારણ બની શકે છે, જેમ કે નીચેના કિસ્સામાં:
/* બંને સ્પિનરો માટે સામાન્ય એનિમેશન */ .સ્પિનર { એનિમેશન: kf-સ્પિન 1s રેખીય અનંત; }
/* પિંક સ્પિનર: ફેરવતા પહેલા અનુવાદ કરો (વ્યક્તિગત રૂપાંતર) */ .સ્પિનર-ગુલાબી { અનુવાદ: 100% 50%; }
/* ગ્રીન સ્પિનર: ફેરવો પછી અનુવાદ કરો (ફંક્શન ઓર્ડર) */ .સ્પિનર-લીલો { રૂપાંતર: અનુવાદ (100%, 50%); }
પેન કીફ્રેમ ટોકન્સ જુઓ - ડેમો 12 [ફોર્ક્ડ] અમિત શીન દ્વારા. તમે જોઈ શકો છો કે પ્રથમ સ્પિનરને (ગુલાબી) એક અનુવાદ મળે છે જે kf-સ્પિનને ફેરવતા પહેલા થાય છે, તેથી તે પહેલા તેની જગ્યાએ ખસે છે અને પછી સ્પિન કરે છે. બીજા સ્પિનર (લીલા) ને એક ટ્રાન્સલેટ() ફંક્શન મળે છે જે વ્યક્તિગત રૂપાંતર પછી થાય છે, તેથી તત્વ પ્રથમ સ્પિન થાય છે, પછી તેના વર્તમાન કોણની તુલનામાં આગળ વધે છે, અને આપણને તે વ્યાપક ભ્રમણકક્ષા અસર મળે છે. ના, આ બગ નથી. બહુવિધ એનિમેશન અથવા બહુવિધ રૂપાંતરણો સાથે કામ કરતી વખતે આપણે CSS વિશે જાણવાની અને ધ્યાનમાં રાખવાની તે વસ્તુઓમાંથી એક છે. જો જરૂરી હોય તો, તમે kf-spin-alt કીફ્રેમનો વધારાનો સેટ પણ બનાવી શકો છો જે rotate() ફંક્શનનો ઉપયોગ કરીને તત્વોને ફેરવે છે. ઘટાડો ગતિ અને જ્યારે આપણે વૈકલ્પિક કીફ્રેમ્સ વિશે વાત કરી રહ્યા છીએ, ત્યારે અમે "નો એનિમેશન" વિકલ્પને અવગણી શકતા નથી. કીફ્રેમ ટોકન્સનો ઉપયોગ કરવાનો સૌથી મોટો ફાયદો એ છે કે ઍક્સેસિબિલિટીને બેક કરી શકાય છે, અને તે ખરેખર કરવું એકદમ સરળ છે. ઍક્સેસિબિલિટીને ધ્યાનમાં રાખીને અમારી કીફ્રેમ ડિઝાઇન કરીને, અમે સુનિશ્ચિત કરી શકીએ છીએ કે જે વપરાશકર્તાઓ ઓછી ગતિ પસંદ કરે છે તેઓ વધારાના કામ અથવા કોડ ડુપ્લિકેશન વિના, સરળ, ઓછો વિચલિત અનુભવ મેળવે છે. "ઘટાડો ગતિ" નો ચોક્કસ અર્થ એક એનિમેશનથી બીજામાં અને પ્રોજેક્ટથી પ્રોજેક્ટમાં થોડો બદલાઈ શકે છે, પરંતુ અહીં ધ્યાનમાં રાખવા માટેના કેટલાક મહત્વપૂર્ણ મુદ્દાઓ છે: કીફ્રેમ્સ મ્યૂટ કરી રહ્યા છીએ જ્યારે કેટલાક એનિમેશનને નરમ કરી શકાય છે અથવા ધીમું કરી શકાય છે, ત્યારે અન્ય એવા છે જે જ્યારે ઓછી ગતિની વિનંતી કરવામાં આવે ત્યારે સંપૂર્ણપણે અદૃશ્ય થઈ જાય છે. પલ્સ એનિમેશન એક સારું ઉદાહરણ છે. આ એનિમેશન્સ ઘટાડેલા મોશન મોડમાં ચાલતા નથી તેની ખાતરી કરવા માટે, અમે તેમને યોગ્ય મીડિયા ક્વેરી સાથે લપેટી શકીએ છીએ.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { માંથી { સ્કેલ: var(--kf-પલ્સ-સ્કેલ-ફ્રોમ, 1); અસ્પષ્ટ: var(--kf-પલ્સ-ઓપેસીટી-from, 1); } થી { સ્કેલ: var(--kf-પલ્સ-સ્કેલ-ટુ, 1); અસ્પષ્ટતાvar(--kf-પલ્સ-ઓપેસીટી-ટુ, 1); } } }
આ સુનિશ્ચિત કરે છે કે જે વપરાશકર્તાઓએ પ્રિફર્સ-રિડ્યુસ્ડ-મોશન ઘટાડવા માટે સેટ કર્યું છે તેઓ એનિમેશન જોઈ શકશે નહીં અને તેમની પસંદગી સાથે મેળ ખાતો અનુભવ મેળવશે. ઇન્સ્ટન્ટ ઇન કેટલાક કીફ્રેમ્સ છે જેને આપણે ખાલી દૂર કરી શકતા નથી, જેમ કે પ્રવેશ એનિમેશન. મૂલ્ય બદલવું જોઈએ, એનિમેટ થવું જોઈએ; અન્યથા, તત્વમાં યોગ્ય મૂલ્યો હશે નહીં. પરંતુ ઓછી ગતિમાં, પ્રારંભિક મૂલ્યમાંથી આ સંક્રમણ તાત્કાલિક હોવું જોઈએ. આ હાંસલ કરવા માટે, અમે કીફ્રેમના વધારાના સેટને વ્યાખ્યાયિત કરીશું જ્યાં મૂલ્ય તરત જ અંતિમ સ્થિતિમાં જાય છે. આ અમારી ડિફોલ્ટ કીફ્રેમ બની જાય છે. પછી, અમે પહેલાના ઉદાહરણની જેમ prefers-reduced-motion સેટને નો-પ્રેફરન્સ માટે મીડિયા ક્વેરી અંદર નિયમિત કીફ્રેમ ઉમેરીશું. /* ઓછી ગતિ માટે તરત જ પૉપ ઇન કરો */ @keyframes kf-ઝૂમ { થી, { સુધી સ્કેલ: var(-kf-ઝૂમ-ટુ, 1); } }
@media (prefers-reduced-motion: no-preference) { /* મૂળ ઝૂમ કીફ્રેમ્સ */ @keyframes kf-ઝૂમ { માંથી { સ્કેલ: var(-kf-zoom-from, 0.8); } થી { સ્કેલ: var(-kf-ઝૂમ-ટુ, 1); } } }
આ રીતે, જે વપરાશકર્તાઓ ઓછી ગતિ પસંદ કરે છે તેઓ તત્વને તેની અંતિમ સ્થિતિમાં તરત જ દેખાશે, જ્યારે બાકીના દરેકને એનિમેટેડ સંક્રમણ મળે છે. નરમ અભિગમ એવા કિસ્સાઓ છે કે જ્યાં અમે થોડી હિલચાલ રાખવા માંગીએ છીએ, પરંતુ મૂળ એનિમેશન કરતાં વધુ નરમ અને શાંત. ઉદાહરણ તરીકે, અમે બાઉન્સ પ્રવેશદ્વારને હળવા ફેડ-ઇન સાથે બદલી શકીએ છીએ.
@keyframes kf-બાઉન્સ { /* ઓછી ગતિ માટે સોફ્ટ ફેડ-ઇન */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-બાઉન્સ { /* મૂળ બાઉન્સ કીફ્રેમ્સ */ } }
હવે, ઓછી ગતિ સક્ષમ ધરાવતા વપરાશકર્તાઓ હજુ પણ દેખાવની સમજ મેળવે છે, પરંતુ બાઉન્સ અથવા સ્થિતિસ્થાપક એનિમેશનની તીવ્ર હિલચાલ વિના. બિલ્ડીંગ બ્લોક્સ સાથે, આગળનો પ્રશ્ન એ છે કે તેમને વાસ્તવિક વર્કફ્લોનો ભાગ કેવી રીતે બનાવવો. લવચીક કીફ્રેમ્સ લખવી એ એક વસ્તુ છે, પરંતુ મોટા પ્રોજેક્ટમાં તેમને વિશ્વસનીય બનાવવા માટે થોડી વ્યૂહરચનાઓ જરૂરી છે જે મારે સખત રીતે શીખવી હતી. અમલીકરણ વ્યૂહરચના અને શ્રેષ્ઠ વ્યવહાર એકવાર અમારી પાસે કીફ્રેમ ટોકન્સની નક્કર લાઇબ્રેરી હોય, તો વાસ્તવિક પડકાર એ છે કે તેને રોજિંદા કામમાં કેવી રીતે લાવવું.
પ્રલોભન એ છે કે તમામ કીફ્રેમને એકસાથે ડ્રોપ કરો અને સમસ્યાનું નિરાકરણ જાહેર કરો, પરંતુ વ્યવહારમાં મેં જોયું છે કે શ્રેષ્ઠ પરિણામો ધીમે ધીમે અપનાવવાથી આવે છે. સૌથી સામાન્ય એનિમેશનથી પ્રારંભ કરો, જેમ કે ફેડ અથવા સ્લાઇડ. આ સરળ જીત છે જે મોટા પુનઃલેખનની જરૂર વગર તાત્કાલિક મૂલ્ય દર્શાવે છે. નામકરણ એ બીજો મુદ્દો છે જે ધ્યાન આપવાને પાત્ર છે. સુસંગત ઉપસર્ગ અથવા નેમસ્પેસ તે સ્પષ્ટ કરે છે કે કયા એનિમેશન ટોકન્સ છે અને કયા સ્થાનિક વન-ઓફ છે. તે આકસ્મિક અથડામણને પણ અટકાવે છે અને ટીમના નવા સભ્યોને શેર કરેલી સિસ્ટમને એક નજરમાં ઓળખવામાં મદદ કરે છે. દસ્તાવેજીકરણ એ કોડ જેટલું જ મહત્વપૂર્ણ છે. દરેક કીફ્રેમ ટોકન ઉપરની ટૂંકી ટિપ્પણી પણ પછીથી અનુમાન લગાવવાના કલાકો બચાવી શકે છે. ડેવલપર ટોકન્સ ફાઈલ ખોલી શકે છે, તેમને જોઈતી અસર માટે સ્કેન કરી શકે છે અને વપરાશ પેટર્નને સીધા તેમના ઘટકમાં કૉપિ કરી શકે છે. લવચીકતા એ છે જે આ અભિગમને પ્રયત્નને યોગ્ય બનાવે છે. સમજદાર કસ્ટમ પ્રોપર્ટીઝને એક્સપોઝ કરીને, અમે ટીમોને સિસ્ટમને તોડ્યા વિના એનિમેશનને અનુકૂલિત કરવા માટે જગ્યા આપીએ છીએ. તે જ સમયે, વધુ જટિલ ન કરવાનો પ્રયાસ કરો. મહત્વના નોબ્સ પ્રદાન કરો અને બાકીના અભિપ્રાય રાખો. છેલ્લે, સુલભતા યાદ રાખો. દરેક એનિમેશનને ઓછી ગતિના વિકલ્પની જરૂર હોતી નથી, પરંતુ ઘણા કરે છે. આ ગોઠવણોમાં વહેલા પકવવાનો અર્થ એ છે કે અમારે તેને પછીથી ક્યારેય રિટ્રોફિટ કરવાની જરૂર નથી, અને તે કાળજીનું સ્તર દર્શાવે છે કે અમારા વપરાશકર્તાઓએ ક્યારેય તેનો ઉલ્લેખ ન કર્યો હોય તો પણ તે નોંધશે.
મારા અનુભવમાં, કીફ્રેમ ટોકન્સને અમારા ડિઝાઇન ટોકન્સ વર્કફ્લોના ભાગ રૂપે ટ્રીટ કરવું એ તેમને વળગી રહે છે. એકવાર તેઓ સ્થાને આવી ગયા પછી, તેઓ વિશેષ અસરો જેવી અનુભૂતિ કરવાનું બંધ કરે છે અને ડિઝાઇન ભાષાનો ભાગ બની જાય છે, જે ઉત્પાદન કેવી રીતે આગળ વધે છે અને પ્રતિસાદ આપે છે તેનું કુદરતી વિસ્તરણ. રેપિંગ અપ એનિમેશન એ બિલ્ડીંગ ઈન્ટરફેસના સૌથી આનંદદાયક ભાગોમાંનું એક હોઈ શકે છે, પરંતુ બંધારણ વિના, તેઓ હતાશાના સૌથી મોટા સ્ત્રોતોમાંનું એક પણ બની શકે છે. કીફ્રેમ્સને ટોકન્સ તરીકે ગણીને, તમે એવું કંઈક લો છો જે સામાન્ય રીતે અવ્યવસ્થિત હોય છે અને તેનું સંચાલન કરવું મુશ્કેલ હોય છે અને તેને સ્પષ્ટ, અનુમાનિત સિસ્ટમમાં ફેરવે છે. વાસ્તવિક મૂલ્ય માત્ર કોડની કેટલીક લાઇન સાચવવામાં નથી. તે આત્મવિશ્વાસમાં છે કે જ્યારે તમે ફેડ, સ્લાઇડ, ઝૂમ અથવા સ્પિનનો ઉપયોગ કરો છો, ત્યારે તમે બરાબર જાણો છો કે તે સમગ્ર પ્રોજેક્ટમાં કેવી રીતે વર્તે છે. તે અનંત ભિન્નતાઓની અંધાધૂંધી વિના કસ્ટમ પ્રોપર્ટીઝમાંથી આવતી લવચીકતામાં છે. અને તે તરીકે ઉમેરવાને બદલે ફાઉન્ડેશનમાં બાંધવામાં આવેલી સુલભતામાં છેએક પછીનો વિચાર. મેં આ વિચારોને અલગ-અલગ ટીમો અને અલગ-અલગ કોડબેઝમાં કામ કરતા જોયા છે, અને પેટર્ન હંમેશા સમાન હોય છે. એકવાર ટોકન્સ સ્થાપિત થઈ જાય, કીફ્રેમ્સ યુક્તિઓના છૂટાછવાયા સંગ્રહ બનવાનું બંધ કરે છે અને ડિઝાઇન ભાષાનો ભાગ બની જાય છે. તેઓ ઉત્પાદનને વધુ ઇરાદાપૂર્વક, વધુ સુસંગત અને વધુ જીવંત લાગે છે. જો તમે આ લેખમાંથી એક વસ્તુ લો છો, તો તે આ રહેવા દો: એનિમેશન એ જ કાળજી અને રચનાને પાત્ર છે જે અમે પહેલાથી જ રંગો, ટાઇપોગ્રાફી અને અંતરને આપીએ છીએ. કીફ્રેમ ટોકન્સમાં નાનું રોકાણ જ્યારે પણ તમારું ઈન્ટરફેસ ફરે છે ત્યારે ચૂકવણી કરે છે.
