Imagjinoni këtë: ju bashkoheni një projekti të ri, zhyteni në bazën e kodeve dhe brenda orëve të para, zbuloni diçka zhgënjyese të njohur. Të shpërndara nëpër fletët e stileve, ju gjeni përkufizime të shumta @keyframes për të njëjtat animacione bazë. Tre efekte të ndryshme zbehjeje, dy ose tre variacione rrëshqitëse, një pjesë e vogël animacionesh zmadhuese dhe të paktën dy animacione të ndryshme rrotullimi sepse, mirë, pse jo? pulsi @keyframes { nga { shkalla: 1; } te { shkalla: 1.1; } }
@keyframes me puls të madh { 0%, 20%, 100% { shkalla: 1; } 10%, 40% { shkalla: 1.2; } }
Nëse ky skenar tingëllon i njohur, nuk jeni vetëm. Në përvojën time nëpër projekte të ndryshme, një nga fitoret më të shpejta më të qëndrueshme që mund të jap është konsolidimi dhe standardizimi i kornizave kyçe. Është bërë një model kaq i besueshëm saqë tani e pres me padurim këtë pastrim si një nga detyrat e mia të para në çdo bazë të re kodi. Logjika prapa kaosit Ky tepricë ka kuptim të përsosur kur mendoni për të. Ne të gjithë përdorim të njëjtat animacione themelore në punën tonë të përditshme: zbehje, rrëshqitje, zmadhime, rrotullime dhe efekte të tjera të zakonshme. Këto animacione janë mjaft të drejtpërdrejta dhe është e lehtë të krijoni një përkufizim të shpejtë @keyframes për të përfunduar punën. Pa një sistem të centralizuar animacioni, zhvilluesit natyrshëm i shkruajnë këto korniza kyçe nga e para, duke mos ditur se animacione të ngjashme ekzistojnë tashmë diku tjetër në bazën e kodeve. Kjo është veçanërisht e zakonshme kur punoni në arkitektura të bazuara në komponentë (që shumica prej nesh e bëjnë këto ditë), pasi ekipet shpesh punojnë paralelisht në pjesë të ndryshme të aplikacionit. Rezultati? Kaos i animacionit. Problemi i Vogël Çështjet më të dukshme me dyfishimin e kornizave kyçe janë koha e humbur e zhvillimit dhe fryrja e panevojshme e kodit. Përkufizime të shumta të kornizave kyçe nënkuptojnë vende të shumta për t'u përditësuar kur kërkesat ndryshojnë. Duhet të rregulloni kohën e animacionit tuaj të zbehjes? Ju do të duhet të gjurmoni çdo shembull në bazën tuaj të kodit. Dëshironi të standardizoni funksionet e lehtësimit? Fat i mirë për të gjetur të gjitha variacionet. Ky shumëzim i pikave të mirëmbajtjes i bën edhe përditësimet e thjeshta të animacionit një detyrë që kërkon kohë. Problemi më i madh Ky dyfishim i kornizave kyçe krijon një problem shumë më të fshehtë që fshihet nën sipërfaqe: kurthi i shtrirjes globale. Edhe kur punoni me arkitektura të bazuara në komponentë, kornizat kryesore të CSS përcaktohen gjithmonë në shtrirjen globale. Kjo do të thotë që të gjitha kornizat kryesore zbatohen për të gjithë komponentët. Gjithmonë. Po, animacioni juaj nuk përdor domosdoshmërisht kornizat kryesore që keni përcaktuar në komponentin tuaj. Ai përdor kornizat kryesore të fundit që përputhen me të njëjtin emër që u ngarkuan në shtrirjen globale. Për sa kohë që të gjitha kornizat tuaja kryesore janë identike, kjo mund të duket si një problem i vogël. Por në momentin që dëshironi të personalizoni një animacion për një rast specifik përdorimi, jeni në telashe, ose më keq, do të jeni ju që i shkaktoni ato. Ose animacioni juaj nuk do të funksionojë sepse një komponent tjetër i ngarkuar pas tuajit, duke mbishkruar kornizat tuaja kryesore, ose ngarkesa e komponentit tuaj zgjat dhe ndryshon aksidentalisht sjelljen e animacionit për çdo komponent tjetër që përdor emrin e atij kuadri, dhe ju as që mund ta kuptoni. Këtu është një shembull i thjeshtë që tregon problemin: .komponenti-një { /* stilet e komponentëve */ animacion: puls 1s ease-in-out infinite alternate; }
/* ky përkufizim @keyframes nuk do të funksionojë */ pulsi @keyframes { nga { shkalla: 1; } te { shkalla: 1.1; } }
/* më vonë në kod... */
.komponenti-dy { /* stilet e komponentëve */ animacion: puls 1s ease-in-out infinite; }
/* ky korniza kyçe do të zbatohet për të dy komponentët */ pulsi @keyframes { 0%, 20%, 100% { shkalla: 1; } 10%, 40% { shkalla: 1.2; } }
Të dy komponentët përdorin të njëjtin emër animacioni, por përkufizimi i dytë @keyframes mbishkruan të parin. Tani si komponenti-një ashtu edhe komponenti-dy do të përdorin kornizat kryesore të dytë, pavarësisht se cili komponent ka përcaktuar se cilat korniza kyçe. Shikoni Shenjat e kornizave kyçe të stilolapsit - Demo 1 [përforcuar] nga Amit Sheen. Pjesa më e keqe? Kjo shpesh funksionon në mënyrë të përsosur në zhvillimin lokal, por prishet në mënyrë misterioze në prodhim kur proceset e ndërtimit ndryshojnë rendin e ngarkimit të fletëve tuaja të stilit. Ju përfundoni me animacione që sillen ndryshe në varësi të cilës komponentë janë të ngarkuar dhe në çfarë sekuence. Zgjidhja: Kornizat kryesore të unifikuara Përgjigja për këtë kaos është çuditërisht e thjeshtë: korniza kyçe dinamike të paracaktuara të ruajtura në një fletë stili të përbashkët. Në vend që të lejojmë çdo komponent të përcaktojë animacionet e veta, ne krijojmë korniza kyçe të centralizuara që janë të mirëdokumentuara, të lehta për t'upërdorim, i mirëmbajtur dhe i përshtatur për nevojat specifike të projektit tuaj. Mendoni si shenja të kornizave kyçe. Ashtu si ne përdorim token për ngjyrat dhe ndarjen, dhe shumë prej nesh tashmë përdorin token për vetitë e animacionit, si funksionet e kohëzgjatjes dhe lehtësimit, pse të mos përdorim token edhe për kornizat kryesore? Kjo qasje mund të integrohet në mënyrë të natyrshme me çdo rrjedhë pune aktuale të tokenit të dizajnit që po përdorni, ndërkohë që zgjidh problemin e vogël (dyfishimi i kodit) dhe problemin më të madh (konfliktet e shtrirjes globale) me një hap. Ideja është e drejtpërdrejtë: krijoni një burim të vetëm të së vërtetës për të gjitha animacionet tona të përbashkëta. Kjo fletë stili e përbashkët përmban korniza kyçe të krijuara me kujdes që mbulojnë modelet e animacionit që përdor në të vërtetë projekti ynë. Nuk ka më hamendje nëse një animacion fade ekziston tashmë diku në bazën tonë të kodeve. Nuk ka më mbishkrim aksidentalisht të animacioneve nga komponentë të tjerë. Por këtu është çelësi: këto nuk janë vetëm animacione statike copy-paste. Ato janë krijuar për të qenë dinamike dhe të personalizueshme përmes veçorive të personalizuara të CSS, duke na lejuar të ruajmë konsistencën, ndërkohë që kemi ende fleksibilitetin për të përshtatur animacionet në raste specifike përdorimi, si për shembull nëse keni nevojë për një animacion "pulsi" pak më të madh në një vend. Ndërtimi i Tokenit të Parë të Kornizave kryesore Një nga frutat e para me varje të ulët që duhet të trajtojmë është animacioni "fade-in". Në një nga projektet e mia të fundit, gjeta mbi një duzinë përkufizime të veçanta të zbehjes, dhe po, të gjithë thjesht animuan paqartësinë nga 0 në 1. Pra, le të krijojmë një fletë stili të re, ta quajmë kf-tokens.css, ta importojmë në projektin tonë dhe të vendosim kornizat tona kryesore me komentet e duhura brenda saj. /* keyframes-tokens.css */
/* * Fade In - zbehet animacioni i hyrjes * Përdorimi: animacion: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { nga { errësirë: 0; } te { errësirë: 1; } }
Kjo deklaratë e vetme @keyframes zëvendëson të gjitha ato animacione të shpërndara të zbehjes në bazën tonë të kodit. I pastër, i thjeshtë dhe i zbatueshëm globalisht. Dhe tani që e kemi përcaktuar këtë shenjë, ne mund ta përdorim atë nga çdo komponent gjatë gjithë projektit tonë: .modal { animacion: kf-fade-in 0.3s ease-out; }
.tooltip { animacion: kf-fade-in 0.2s ease-in-out; }
.njoftim { animacion: kf-fade-in 0.5s ease-out; }
Shikoni Shenjat e kornizave kyçe të stilolapsit - Demo 2 [përforcuar] nga Amit Sheen. Shënim: Ne po përdorim një prefiks kf- në të gjithë emrat tanë @keyframes. Ky prefiks shërben si një hapësirë emri që parandalon konfliktet e emërtimit me animacionet ekzistuese në projekt dhe e bën të qartë menjëherë se këto korniza kyçe vijnë nga skedari ynë i shenjave të kornizave kyçe. Krijimi i një rrëshqitjeje dinamike Kornizat kyçe kf-fade-in funksionojnë shkëlqyeshëm sepse janë të thjeshtë dhe ka pak vend për të ngatërruar gjërat. Në animacionet e tjera, megjithatë, ne duhet të jemi shumë më dinamikë, dhe këtu mund të shfrytëzojmë fuqinë e madhe të vetive të personalizuara të CSS. Kjo është ajo ku shenjat e kornizave kyçe shkëlqejnë vërtet në krahasim me animacionet statike të shpërndara. Le të marrim një skenar të përbashkët: animacionet “rrëshqitëse”. Por rrëshqitje nga ku? 100px nga e djathta? 50% nga e majta? A duhet të hyjë nga pjesa e sipërme e ekranit? Apo ndoshta noton nga fundi? Ka kaq shumë mundësi, por në vend që të krijojmë korniza kyçe të veçanta për çdo drejtim dhe çdo variacion, ne mund të ndërtojmë një shenjë fleksibël që përshtatet me të gjithë skenarët: /* * Slide In - animacion me rrëshqitje me drejtim * Përdorni --kf-slide-from për të kontrolluar drejtimin * Parazgjedhja: rrëshqet nga e majta (-100%) * Përdorimi: * animacion: kf-slide-in 0.3s ease-out; * --kf-rrëshqitje-nga: -100px 0; // rrëshqitje nga e majta * --kf-rrëshqitje-nga: 100px 0; // rrëshqitje nga e djathta * --kf-rrëshqitje-nga: 0 -50px; // rrëshqitje nga lart */
@keyframes kf-slide-in { nga { përkthe: var(--kf-rrëshqitje-nga, -100% 0); } te { përkthe: 0 0; } }
Tani mund të përdorim këtë shenjë të vetme @keyframes për çdo drejtim të rrëshqitjes thjesht duke ndryshuar veçorinë --kf-slide- from custom: .bari anësor { animacion: kf-slide-in 0.3s ease-out; /* Përdor vlerën e paracaktuar: rrëshqet nga e majta */ }
.njoftim { animacion: kf-slide-in 0.4s ease-out; --kf-rrëshqitje-nga: 0 -50px; /* rrëshqitje nga lart */ }
.modal { animacion: kf-fade-në 0,5 s, kf-rrëshqitje-në 0,5s kub-bezier (0,34, 1,56, 0,64, 1); --kf-rrëshqitje-nga: 50px 50px; /* rrëshqitje nga poshtë-djathtas */ }
Kjo qasje na jep fleksibilitet të jashtëzakonshëm duke ruajtur qëndrueshmërinë. Një deklaratë e kornizës kyçe, mundësi të pafundme. Shikoni Shenjat e kornizave kyçe të stilolapsit - Demo 3 [përforcuar] nga Amit Sheen. Dhe nëse duam t'i bëjmë animacionet tona edhe më fleksibël, duke lejuar gjithashtu efekte "rrëshqitëse", ne mund tëthjesht shtoni një --kf-slide-te veti të personalizuar, të ngjashme me atë që do të shohim në seksionin tjetër. Korniza kyçe të zmadhimit dydrejtues Një tjetër animacion i zakonshëm që kopjohet nëpër projekte janë efektet "zoom". Pavarësisht nëse është një shkallëzim delikate për mesazhet e dolli, një zmadhim dramatik për modalet, ose një efekt i butë zvogëlimi për titujt, animacionet e zmadhimit janë kudo. Në vend që të krijojmë korniza kyçe të veçanta për secilën vlerë të shkallës, le të ndërtojmë një grup fleksibël të kornizave kyçe kf-zoom:
/* * Zmadhimi - animacion në shkallë * Përdorni --kf-zoom-from dhe --kf-zoom-to për të kontrolluar vlerat e shkallës * Parazgjedhja: zmadhon nga 80% në 100% (0,8 në 1) * Përdorimi: * animacion: zmadhimi kf 0,2 s lehtësim; * --kf-zoom-nga: 0,5; --kf-zoom-to: 1; // zmadhoni nga 50% në 100% * --kf-zoom-nga: 1; --kf-zoom-to: 0; // zmadhoni nga 100% në 0% * --kf-zoom-nga: 1; --kf-zoom-to: 1.1; // zmadhoni nga 100% në 110% */
@keyframes kf-zoom { nga { shkalla: var (--kf-zoom-nga, 0,8); } te { shkalla: var (--kf-zoom-to, 1); } }
Me një përkufizim, ne mund të arrijmë çdo variacion zmadhimi që na nevojitet: .dolli { animacion: kf-rrëshqitje-në 0,2 s, zmadhimi kf 0,4 s lehtësim; --kf-rrëshqitje-nga: 0 100%; /* rrëshqitje nga lart */ /* Përdor zmadhimin e paracaktuar: shkallëzon nga 80% në 100% */ }
.modal { animacion: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-nga: 0; /* zmadhimi dramatik nga 0% në 100% */ }
.titulli { animacion: kf-fade-në 2s, kf-zoom 2s lehtësim; --kf-zoom-nga: 1.2; --kf-zoom-në: 0,8; /* shkallë e butë poshtë */ }
Parazgjedhja prej 0,8 (80%) funksionon në mënyrë të përsosur për shumicën e elementeve të ndërfaqes së përdoruesit, si mesazhet dhe kartat e dollive, ndërkohë që është ende i lehtë për t'u personalizuar për raste të veçanta. Shikoni Shenjat e kornizave kyçe të stilolapsit - Demo 4 [përforcuar] nga Amit Sheen. Ju mund të keni vënë re diçka interesante në shembujt e fundit: ne kemi kombinuar animacione. Një nga avantazhet kryesore të punës me argumentet @keyframes është se ato janë krijuar për t'u integruar pa probleme me njëri-tjetrin. Kjo përbërje e qetë është e qëllimshme, jo e rastësishme. Ne do të diskutojmë përbërjen e animacionit në më shumë detaje më vonë, duke përfshirë se ku ato mund të bëhen problematike, por shumica e kombinimeve janë të drejtpërdrejta dhe të lehta për t'u zbatuar. Shënim: Gjatë shkrimit të këtij artikulli, dhe ndoshta për shkak të shkrimit të tij, e gjeta veten duke rimenduar të gjithë idenë e animacioneve hyrëse. Me të gjitha përparimet e fundit në CSS, a na duhen ende fare? Për fat të mirë, Adam Argyle eksploroi të njëjtat pyetje dhe i shprehu ato në mënyrë të shkëlqyer në blogun e tij. Kjo nuk bie ndesh me atë që është shkruar këtu, por paraqet një qasje që ia vlen të merret në konsideratë, veçanërisht nëse projektet tuaja mbështeten shumë në animacionet e hyrjes. Animacione të vazhdueshme Ndërsa animacionet e hyrjes, si "fade", "slide" dhe "zoom" ndodhin një herë dhe më pas ndalojnë, animacionet e vazhdueshme qarkullojnë pafundësisht për të tërhequr vëmendjen ose për të treguar aktivitetin e vazhdueshëm. Dy animacionet më të zakonshme të vazhdueshme që ndesh janë "spin" (për ngarkimin e treguesve) dhe "puls" (për të theksuar elementë të rëndësishëm). Këto animacione paraqesin sfida unike kur bëhet fjalë për krijimin e shenjave të kornizave kyçe. Ndryshe nga animacionet hyrëse që zakonisht shkojnë nga një gjendje në tjetrën, animacionet e vazhdueshme duhet të jenë shumë të personalizueshme në modelet e tyre të sjelljes. Spin Doktori Çdo projekt duket se përdor animacione të shumta rrotulluese. Disa rrotullohen në drejtim të akrepave të orës, të tjerët në drejtim të kundërt. Disa bëjnë një rrotullim të vetëm 360 gradë, të tjerët bëjnë rrotullime të shumta për një efekt më të shpejtë. Në vend që të krijojmë korniza kyçe të veçanta për çdo variacion, le të ndërtojmë një rrotullim fleksibël që trajton të gjithë skenarët:
/* * Spin - animacion rrotullues * Përdorni --kf-spin-from dhe --kf-spin-to për të kontrolluar diapazonin e rrotullimit * Përdorni --kf-spin-turns për të kontrolluar sasinë e rrotullimit * Parazgjedhja: rrotullohet nga 0 gradë në 360 gradë (1 rrotullim i plotë) * Përdorimi: * animacion: kf-spin 1s linear infinite; * --kf-spin-kthesa: 2; // 2 rrotullime të plota * --kf-spin-nga: 0deg; --kf-spin-to: 180deg; // gjysmë rrotullimi * --kf-spin-nga: 0deg; --kf-spin-to: -360deg; // në të kundërt të akrepave të orës */
@keyframes kf-spin { nga { rrotullo: var(--kf-spin-nga, 0deg); } te { rrotullo: calc(var(--kf-spin-nga, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-kthehet, 1)); } }
Tani mund të krijojmë çdo variacion rrotullimi që na pëlqen:
.loading-spinner { animacion: kf-spin 1s linear infinite; /* Përdor parazgjedhjen: rrotullohet nga 0 gradë në 360 gradë */ }
.fast-loader { animacion: kf-spin 1.2s ease-in-out alternativë e pafundme; --kf-spin-kthesa: 3; /* 3 rrotullime të plota për çdo drejtim për cikël*/ }
.steped-reverse { animacion: kf-spin 1.5s step(8) infinite; --kf-spin-to: -360deg; /* në të kundërt të akrepave të orës */ }
.subtle-wiggle { animacion: kf-spin 2s ease-in-out infinite alternate; --kf-spin-nga: -16deg; --kf-spin-to: 32deg; /* lëviz 36 gradë: ndërmjet -18 gradë dhe +18 gradë */ }
Shikoni Shenjat e kornizave kyçe të stilolapsit - Demo 5 [përforcuar] nga Amit Sheen. E bukura e kësaj qasjeje është se të njëjtat korniza kyçe funksionojnë për ngarkimin e rrotulluesve, ikona rrotulluese, efekte lëvizëse dhe madje edhe animacione komplekse me shumë rrotullime. Paradoksi i pulsit Animacionet e pulsit janë më të ndërlikuara sepse mund të "pulsojnë" veti të ndryshme. Disa pulsojnë shkallën, të tjerët pulsojnë errësirën dhe disa veçori të ngjyrës së pulsit si shkëlqimi ose ngopja. Në vend që të krijojmë korniza kyçe të veçanta për secilën veti, ne mund të krijojmë korniza kyçe që funksionojnë me çdo veçori CSS. Këtu është një shembull i një kornize kyçe pulsi me opsionet e shkallës dhe opacitetit:
/* * Pulse - animacion pulsues * Përdorni --kf-pulse-scale-from dhe --kf-pulse-scale-to për të kontrolluar diapazonin e shkallës * Përdorni --kf-pulse-opacity-from dhe --kf-pulse-opacity-to për të kontrolluar diapazonin e tejdukshmërisë * Parazgjedhja: pa puls (të gjitha vlerat 1) * Përdorimi: * animacion: kf-pulse 2s ease-in-out alternativë e pafundme; * --kf-shkalla e pulsit-nga: 0,95; --kf-shkalla e pulsit deri në: 1,05; // shkallë impuls * --kf-puls-opacity-nga: 0.7; --kf-puls-opacity-në: 1; // impuls i errësirës */
@keyframes kf-pulse { nga { shkalla: var (--kf-shkalla e pulsit-nga, 1); opacity: var(--kf-pulse-opacity-nga, 1); } te { shkalla: var (--kf-pulse-shkallë-në, 1); opacity: var (--kf-pulse-opacity-to, 1); } }
Kjo krijon një puls fleksibël që mund të animojë veti të shumta: .thirrje për veprim { animacion: kf-pulse 0.6s infinite alternative; --kf-puls-opacity-nga: 0,5; /* impuls i errësirës */ }
.notification-dot { animacion: kf-pulse 0.6s ease-in-out alternativë e pafundme; --kf-shkalla e pulsit-nga: 0,9; --kf-shkalla e pulsit-në: 1.1; /* shkallë pulsi */ }
.text-highlight { animacion: kf-pulse 1.5s ease-out infinite; --kf-shkalla e pulsit-nga: 0,8; --kf-puls-opacity-nga: 0.2; /* shkalla dhe impulsi i errësirës */ }
Shihni Tokens Keyframes Pen - Demo 6 [forked] nga Amit Sheen. Kjo kornizë e vetme kyçe me puls kf mund të trajtojë gjithçka, nga tërheqjet delikate të vëmendjes deri tek pikat kryesore dramatike, të gjitha ndërkohë që janë të lehta për t'u personalizuar. Lehtësim i avancuar Një nga gjërat më të mira për përdorimin e shenjave të kornizave kyçe është se sa e lehtë është të zgjerojmë bibliotekën tonë të animacionit dhe të ofrojmë efekte që shumica e zhvilluesve nuk do të shqetësoheshin t'i shkruanin nga e para, si elasticiteti ose kërcimi. Këtu është një shembull i një tokeni të thjeshtë "bounce" të kornizave kyçe që përdor një veçori --kf-bounce-nga porosi për të kontrolluar lartësinë e kërcimit. /* * Kërcim - animacion kërcim në hyrje * Përdorni --kf-bounce-from për të kontrolluar lartësinë e kërcimit * Parazgjedhja: kërcen nga 100vh (jashtë ekranit) * Përdorimi: * animacion: kf-bounce 3s ease-in; * --kf-fryrje-nga: 200px; // kërce nga lartësia 200 px */
@keyframes kf-bounce { 0% { përkthe: 0 calc(var(--kf-bounce-nga, 100vh) * -1); }
34% { përkthe: 0 calc(var(--kf-fryrje-nga, 100vh) * -0.4); }
55% { përkthe: 0 calc(var(--kf-fryrje-nga, 100vh) * -0.2); }
72% { përkthe: 0 kalc(var(--kf-fryrje-nga, 100vh) * -0.1); }
85% { përkthe: 0 calc(var(--kf-fryrje-nga, 100vh) * -0.05); }
94% { përkthe: 0 calc(var(--kf-fryrje-nga, 100vh) * -0,025); }
99% { përkthe: 0 calc(var(--kf-fryrje-nga, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { përkthe: 0 0; animacion-kohë-funksion: lehtësim; } }
Animacionet si "elastike" janë pak më të ndërlikuara për shkak të llogaritjeve brenda kornizave kyçe. Ne duhet të përcaktojmë --kf-elastic-nga-X dhe --kf-elastic-nga-Y veçmas (të dyja janë opsionale), dhe së bashku na lejojnë të krijojmë një hyrje elastike nga çdo pikë në ekran.
/* * Elastic In - animacion elastik i hyrjes * Përdorni --kf-elastic-from-X dhe --kf-elastic-from-Y për të kontrolluar pozicionin e fillimit * Parazgjedhja: hyn nga qendra e sipërme (0, -100vh) * Përdorimi: * animacion: kf-elastic-në 2s ease-in-out të dyja; * --kf-elastik-nga-X: -50px; * --kf-elastik-nga-Y: -200px; // fut nga (-50px, -200px) */
@keyframes kf-elastic-in { 0% { përkthe: calc(var(--kf-elastic-nga-X, -50vw) * 1) calc(var(--kf-elastic-nga-Y, 0px) * 1); }
16% { përkthe: calc(var(--kf-elastic-nga-X, -50vw) * -0.3227) calc(var(--kf-elastic-nga-Y, 0px) * -0.3227); }
28% { përkthe: kalc(var(--kf-elastic-nga-X, -50vw) * 0,1312)kalc(var(--kf-elastik-nga-Y, 0px) * 0,1312); }
44% { përkthe: calc(var(--kf-elastic-nga-X, -50vw) * -0.0463) calc(var(--kf-elastic-nga-Y, 0px) * -0.0463); }
59% { përkthe: calc(var(--kf-elastic-nga-X, -50vw) * 0.0164) calc(var(--kf-elastic-nga-Y, 0px) * 0.0164); }
73% { përkthe: calc(var(--kf-elastic-nga-X, -50vw) * -0.0058) calc(var(--kf-elastic-nga-Y, 0px) * -0.0058); }
88% { përkthe: calc(var(--kf-elastic-nga-X, -50vw) * 0.0020) calc(var(--kf-elastic-nga-Y, 0px) * 0.0020); }
100% { përkthe: 0 0; } }
Kjo qasje e bën të lehtë ripërdorimin dhe personalizimin e kornizave kyçe të avancuara në projektin tonë, vetëm duke ndryshuar një veçori të vetme të personalizuar.
.bounce-and-zoom { animacion: kf-bounce 3s ease-in, kf-zoom 3s linear; --kf-zoom-nga: 0; }
.bounce-and-lide { animacion-kompozim: shtoni; /* Të dy animacionet përdorin përkthim */ animacion: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-rrëshqitje-nga: -200px; }
.elastik-në { animacion: kf-elastic-në 2s ease-in-out të dyja; }
Shikoni Shenjat e kornizave kyçe të stilolapsit - Demo 7 [përforcuar] nga Amit Sheen. Deri në këtë pikë, ne kemi parë se si mund të konsolidojmë kornizat kryesore në një mënyrë të zgjuar dhe efikase. Sigurisht, ju mund të dëshironi t'i ndryshoni gjërat për t'iu përshtatur më mirë nevojave të projektit tuaj, por ne kemi mbuluar shembuj të disa animacioneve të zakonshme dhe rasteve të përdorimit të përditshëm. Dhe me këto shenja të kornizave kyçe në vend, ne tani kemi blloqe të fuqishme ndërtimi për krijimin e animacioneve të qëndrueshme dhe të mirëmbajtura në të gjithë projektin. Nuk ka më korniza kyçe të dyfishta, nuk ka më konflikte të shtrirjes globale. Thjesht një mënyrë e pastër dhe e përshtatshme për të trajtuar të gjitha nevojat tona për animacion. Por pyetja e vërtetë është: Si t'i kompozojmë këto blloqe ndërtimi së bashku? Duke i vënë të gjitha së bashku Ne kemi parë se kombinimi i shenjave bazë të kornizave kyçe është i thjeshtë. Nuk na duhet asgjë e veçantë, veçse të përcaktojmë animacionin e parë, të përcaktojmë të dytin, të vendosim variablat sipas nevojës dhe kaq. /* Fade in + rrëshqitje në */ .dolli { animacion: kf-fade-in 0.4s, kf-rrëshqitje-në 0,4s kub-bezier(0,34, 1,56, 0,64, 1); --kf-rrëshqitje-nga: 0 40px; }
/* Zmadhoni + zbehni */ .modal { animacion: kf-fade-in 0.3s, kf-zoom 0,3s kub-bezier (0,34, 1,56, 0,64, 1); --kf-zoom-nga: 0,7; --kf-zoom-to: 1; }
/* Rrëshqitje në + puls */ .njoftim { animacion: kf-rrëshqitje-në 0,5s, kf-pulse 1.2s ease-in-out alternativë e pafundme; --kf-rrëshqitje-nga: -100px 0; --kf-shkalla e pulsit-nga: 0,95; --kf-shkalla e pulsit deri në: 1,05; }
Këto kombinime funksionojnë bukur sepse çdo animacion synon një veçori të ndryshme: opacitetin, transformimin (përkthe/shkallën), etj. Por ndonjëherë ka konflikte dhe ne duhet të dimë pse dhe si t'i trajtojmë ato. Kur dy animacione përpiqen të animojnë të njëjtën veçori - për shembull, të dyja shkallën e animimit ose të dyja animimin e errësirës - rezultati nuk do të jetë ai që prisni. Si parazgjedhje, vetëm një nga animacionet zbatohet në të vërtetë në atë pronë, e cila është e fundit në listën e animacionit. Ky është një kufizim se si CSS trajton animacione të shumta në të njëjtën pronë. Për shembull, kjo nuk do të funksionojë siç synohet sepse do të zbatohet vetëm animacioni i pulsit kf. .kombinim i keq { animacion: kf-zoom 0,5s përpara, kf-puls 1.2s alternativ pafund; --kf-zoom-nga: 0,5; --kf-zoom-to: 1.2; --kf-shkalla e pulsit-nga: 0,8; --kf-shkalla e pulsit-në: 1.1; }
Shtesa e animacionit Mënyra më e thjeshtë dhe më e drejtpërdrejtë për të trajtuar animacione të shumta që prekin të njëjtën veti është përdorimi i vetive animacion-kompozim. Në shembullin e fundit të mësipërm, animacioni i pulsit kf zëvendëson animacionin e zmadhimit kf, kështu që ne nuk do të shohim zmadhimin fillestar dhe nuk do të marrim shkallën e pritur në 1.2. Duke vendosur përbërjen e animacionit për të shtuar, ne i themi shfletuesit të kombinojë të dy animacionet. Kjo na jep rezultatin që duam. .komponenti-dy { animacion-kompozim: shtoni; }
Shihni Shenjat e kornizave kyçe të stilolapsit - Demo 8 [përforcuar] nga Amit Sheen. Kjo qasje funksionon mirë për shumicën e rasteve kur duam të kombinojmë efektet në të njëjtën pronë. Është gjithashtu e dobishme kur na duhet të kombinojmë animacionet me vlerat e vetive statike. Për shembull, nëse kemi një element që përdor veçorinë translate për ta pozicionuar saktësisht aty ku duam, dhe më pas duam ta animojmë me kornizat kyçe kf-slide-in, marrim një kërcim të keq të dukshëm pa animacion-kompozim. Shikoni Shenjat e kornizave kyçe të stilolapsit - Demo 9 [përforcuar] nga Amit Sheen. Me përbërjen e animacionit për t'u shtuar, animacioni kombinohet pa probleme me ekzistuesintransformojnë, kështu që elementi qëndron në vend dhe animohet siç pritej. Animacion Stagger Një mënyrë tjetër për të trajtuar animacionet e shumta është t'i "trondisni" ato - domethënë, të filloni animacionin e dytë pak pasi të përfundojë i pari. Nuk është një zgjidhje që funksionon për çdo rast, por është e dobishme kur kemi një animacion hyrës të ndjekur nga një animacion i vazhdueshëm. /* zbehet në + impuls i errësirës */ .njoftim { animacion: kf-fade-in 2s lehtësim-out, kf-pulse 0,5s 2s ease-in-out alternativë e pafundme; --kf-puls-opacity-në: 0,5; }
Shikoni Shenjat e kornizave kyçe të stilolapsit - Demo 10 [përforcuar] nga Amit Sheen. Rendi ka rëndësi Një pjesë e madhe e animacioneve me të cilat punojmë përdorin vetinë e transformimit. Në shumicën e rasteve, kjo është thjesht më e përshtatshme. Ai gjithashtu ka një avantazh të performancës pasi animacionet e transformimit mund të përshpejtohen me GPU. Por nëse përdorim transformimet, duhet të pranojmë se rendi në të cilin ne kryejmë transformimet tona ka rëndësi. Shumë. Në kornizat tona kryesore deri më tani, ne kemi përdorur transformime individuale. Sipas specifikimeve, këto aplikohen gjithmonë në një renditje fikse: së pari, elementi merr translate, pastaj rrotullohet, pastaj shkallëzohet. Kjo ka kuptim dhe është ajo që shumica prej nesh presin. Megjithatë, nëse përdorim vetinë e transformimit, radha në të cilën shkruhen funksionet është radha në të cilën ato zbatohen. Në këtë rast, nëse lëvizim diçka me 100 piksel në boshtin X dhe më pas e rrotullojmë me 45 gradë, nuk është njësoj sikur ta rrotullojmë fillimisht me 45 gradë dhe më pas ta lëvizim 100 pikselë. /* Sheshi rozë: Së pari përkthe, pastaj rrotullo */ .shembull-one { transformimi: translateX(100px) rotate(45deg); }
/* Sheshi jeshil: Së pari rrotullohu, pastaj përkthej */ .shembulli-dy { transformimi: rrotullimi (45 gradë) translateX (100 px); }
Shihni Shenjat e kornizave kyçe të stilolapsit - Demo 11 [përforcuar] nga Amit Sheen. Por sipas rendit të transformimit, të gjitha transformimet individuale - gjithçka që kemi përdorur për shenjat e kornizave kyçe - ndodh përpara funksioneve të transformimit. Kjo do të thotë se çdo gjë që vendosni në vetinë e transformimit do të ndodhë pas animacioneve. Por nëse vendosni, për shembull, përkthimin së bashku me kornizat kryesore të kf-spin, përkthimi do të ndodhë përpara animacionit. E hutuar akoma?! Kjo çon në situata ku vlerat statike mund të shkaktojnë rezultate të ndryshme për të njëjtin animacion, si në rastin e mëposhtëm:
/* Animacion i zakonshëm për të dy rrotulluesit */ .spiner { animacion: kf-spin 1s linear infinite; }
/* Spinner rozë: përkthe përpara rrotullimit (transformim individual) */ .spiner-rozë { përkthe: 100% 50%; }
/* Spiner jeshil: rrotullo dhe pastaj përkthe (rendi i funksionit) */ .spiner-gjelbër { transformoj: përkthe (100%, 50%); }
Shihni Shenjat e kornizave kyçe të stilolapsit - Demo 12 [përforcuar] nga Amit Sheen. Mund të shihni që rrotulluesi i parë (rozë) merr një përkthim që ndodh përpara rrotullimit të kf-spin, kështu që së pari lëviz në vendin e tij dhe më pas rrotullohet. Spineri i dytë (e gjelbër) merr një funksion translate() që ndodh pas transformimit individual, kështu që elementi fillimisht rrotullohet, më pas lëviz në lidhje me këndin e tij aktual dhe ne marrim atë efekt të orbitës së gjerë. Jo, kjo nuk është një gabim. Është vetëm një nga ato gjëra që duhet të dimë për CSS dhe të kemi parasysh kur punojmë me animacione të shumta ose transformime të shumta. Nëse është e nevojshme, mund të krijoni gjithashtu një grup shtesë kornizash kyçe kf-spin-alt që rrotullojnë elementet duke përdorur funksionin rotate(). Lëvizje e reduktuar Dhe ndërsa po flasim për korniza kyçe alternative, nuk mund të injorojmë opsionin "pa animacion". Një nga avantazhet më të mëdha të përdorimit të shenjave të kornizave kyçe është se aksesueshmëria mund të bëhet, dhe në fakt është mjaft e lehtë për t'u bërë. Duke i dizajnuar kornizat tona kryesore duke pasur parasysh aksesueshmërinë, ne mund të sigurojmë që përdoruesit që preferojnë lëvizje të reduktuar të kenë një përvojë më të qetë, më pak shpërqendruese, pa punë shtesë ose dublikim kodesh. Kuptimi i saktë i "Lëvizjes së reduktuar" mund të ndryshojë pak nga një animacion në tjetrin dhe nga projekti në projekt, por këtu janë disa pika të rëndësishme që duhen mbajtur parasysh: Heshtja e kornizave kyçe Ndërsa disa animacione mund të zbuten ose ngadalësohen, ka të tjerë që duhet të zhduken plotësisht kur kërkohet lëvizje e reduktuar. Animacionet e pulsit janë një shembull i mirë. Për t'u siguruar që këto animacione nuk funksionojnë në modalitetin e lëvizjes së reduktuar, thjesht mund t'i mbështjellim ato në pyetjen e duhur të medias.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { nga { shkalla: var (--kf-shkalla e pulsit-nga, 1); opacity: var(--kf-pulse-opacity-nga, 1); } te { shkalla: var (--kf-pulse-shkallë-në, 1); errësirë:var (--kf-puls-opacity-to, 1); } } }
Kjo siguron që përdoruesit që kanë vendosur preferencat-reduktuar-lëvizjen për të reduktuar nuk do ta shohin animacionin dhe do të marrin një përvojë që përputhet me preferencën e tyre. Instant Instant Ka disa korniza kyçe që nuk mund t'i heqim thjesht, të tilla si animacionet hyrëse. Vlera duhet të ndryshojë, duhet të animojë; përndryshe, elementi nuk do të ketë vlerat e duhura. Por në lëvizje të reduktuar, ky kalim nga vlera fillestare duhet të jetë i menjëhershëm. Për ta arritur këtë, ne do të përcaktojmë një grup shtesë kornizash kyçe ku vlera hidhet menjëherë në gjendjen përfundimtare. Këto bëhen kornizat tona kryesore të paracaktuara. Më pas, ne do të shtojmë kornizat kryesore të rregullta brenda një pyetjeje mediatike për preferencat-reduktuar-lëvizje të vendosur në pa-preferencë, ashtu si në shembullin e mëparshëm. /* shfaqet menjëherë për lëvizje të reduktuar */ @keyframes kf-zoom { nga, në { shkalla: var (--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Kornizat kryesore të zmadhimit origjinal */ @keyframes kf-zoom { nga { shkalla: var (--kf-zoom-nga, 0,8); } te { shkalla: var (--kf-zoom-to, 1); } } }
Në këtë mënyrë, përdoruesit që preferojnë lëvizje të reduktuar do ta shohin elementin të shfaqet menjëherë në gjendjen e tij përfundimtare, ndërsa të gjithë të tjerët marrin tranzicionin e animuar. Qasja e butë Ka raste kur duam të mbajmë disa lëvizje, por shumë më të buta dhe më të qeta se animacioni origjinal. Për shembull, ne mund të zëvendësojmë një hyrje të kërcimit me një zbehje të butë.
@keyframes kf-bounce { /* Zbehje e butë për lëvizje të reduktuar */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Kornizat kryesore të kërcimit origjinal */ } }
Tani, përdoruesit me lëvizje të reduktuar të aktivizuar ende marrin një ndjenjë të pamjes, por pa lëvizjen intensive të një kërcimi ose animacioni elastik. Me vendosjen e blloqeve të ndërtimit, pyetja tjetër është se si t'i bëjmë ato pjesë të rrjedhës aktuale të punës. Shkrimi i kornizave kyçe fleksibël është një gjë, por bërja e tyre të besueshme në një projekt të madh kërkon disa strategji që më duhej t'i mësoja në mënyrën e vështirë. Strategjitë e zbatimit dhe praktikat më të mira Pasi të kemi një bibliotekë solide të shenjave të kornizave kyçe, sfida e vërtetë është se si t'i sjellim ato në punën e përditshme.
Tundimi është që të hedhim të gjitha kornizat kryesore menjëherë dhe ta shpallim problemin të zgjidhur, por në praktikë kam gjetur se rezultatet më të mira vijnë nga adoptimi gradual. Filloni me animacionet më të zakonshme, të tilla si fade ose rrëshqitje. Këto janë fitore të lehta që tregojnë vlerë të menjëhershme pa kërkuar rishkrime të mëdha. Emërtimi është një tjetër pikë që meriton vëmendje. Një parashtesë e qëndrueshme ose hapësira e emrit e bën të qartë se cilat animacione janë shenja dhe cilat janë të vetmet lokale. Ai gjithashtu parandalon përplasjet aksidentale dhe ndihmon anëtarët e rinj të ekipit të njohin sistemin e përbashkët me një shikim. Dokumentacioni është po aq i rëndësishëm sa vetë kodi. Edhe një koment i shkurtër mbi çdo shenjë të kornizave kyçe mund të kursejë orë të tëra hamendjeje më vonë. Një zhvillues duhet të jetë në gjendje të hapë skedarin e argumenteve, të skanojë për efektin që i nevojitet dhe të kopjojë modelin e përdorimit direkt në komponentin e tij. Fleksibiliteti është ajo që e bën këtë qasje të vlefshme për përpjekjen. Duke ekspozuar vetitë e ndjeshme të personalizuara, ne u japim ekipeve hapësirë për të përshtatur animacionin pa e prishur sistemin. Në të njëjtën kohë, përpiquni të mos ndërlikoni shumë. Jepni pullat që kanë rëndësi dhe mbajini të tjerët të mendimit. Së fundi, mbani mend aksesin. Jo çdo animacion ka nevojë për një alternativë të reduktuar të lëvizjes, por shumë kanë nevojë. Pjekja e hershme në këto rregullime do të thotë që nuk duhet t'i riparojmë më vonë dhe tregon një nivel kujdesi që përdoruesit tanë do ta vënë re edhe nëse nuk e përmendin kurrë.
Në përvojën time, trajtimi i shenjave të kornizave kyçe si pjesë e rrjedhës së punës sonë të argumenteve të projektimit është ajo që i bën ato të qëndrojnë. Pasi të vendosen, ata pushojnë së ndjeri si efekte speciale dhe bëhen pjesë e gjuhës së dizajnit, një zgjatje e natyrshme e mënyrës se si produkti lëviz dhe përgjigjet. Përfundimi Animacionet mund të jenë një nga pjesët më të gëzueshme të ndërfaqeve të ndërtimit, por pa strukturë, ato mund të bëhen gjithashtu një nga burimet më të mëdha të zhgënjimit. Duke i trajtuar kornizat kryesore si shenja, ju merrni diçka që zakonisht është e çrregullt dhe e vështirë për t'u menaxhuar dhe e ktheni atë në një sistem të qartë dhe të parashikueshëm. Vlera e vërtetë nuk është vetëm në ruajtjen e disa rreshtave të kodit. Është në besimin se kur përdorni një fade, rrëshqitje, zmadhimi ose rrotullim, ju e dini saktësisht se si do të sillet përgjatë projektit. Është në fleksibilitetin që vjen nga vetitë me porosi pa kaosin e variacioneve të pafundme. Dhe është në aksesueshmërinë e ndërtuar në themel në vend që të shtohet sinjë mendim i mëvonshëm. Unë i kam parë këto ide të funksionojnë në ekipe të ndryshme dhe në baza të ndryshme kodesh, dhe modeli është gjithmonë i njëjtë. Pasi të vendosen shenjat, kornizat kyçe pushojnë së qeni një koleksion i shpërndarë truket dhe bëhen pjesë e gjuhës së dizajnit. Ato e bëjnë produktin të ndihet më i qëllimshëm, më i qëndrueshëm dhe më i gjallë. Nëse merrni një gjë nga ky artikull, le të jetë kjo: animacionet meritojnë të njëjtin kujdes dhe strukturë që tashmë u kushtojmë ngjyrave, tipografisë dhe hapësirës. Një investim i vogël në shenjat e kornizave kyçe shpërblehet sa herë që ndërfaqja juaj lëviz.
