Zamislite ovo: pridružite se novom projektu, zaronite u bazu koda i u prvih nekoliko sati otkrijete nešto frustrirajuće poznato. Rasuti po stilovima, naći ćete više definicija @keyframes za iste osnovne animacije. Tri različita efekta zatamnjenja, dvije ili tri varijacije slajdova, pregršt animacija zumiranja i najmanje dvije različite animacije okretanja jer, pa, zašto ne? @keyframes puls { od { skala: 1; } do { skala: 1,1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { skala: 1; } 10%, 40% { razmjer: 1,2; } }
Ako vam ovaj scenario zvuči poznato, niste sami. Prema mom iskustvu u različitim projektima, jedna od najdosljednijih brzih pobjeda koje mogu ostvariti je konsolidacija i standardizacija ključnih kadrova. To je postao toliko pouzdan obrazac da se sada radujem ovom čišćenju kao jednom od mojih prvih zadataka na bilo kojoj novoj bazi koda. Logika iza haosa Ovaj višak ima savršenog smisla kada razmislite o tome. Svi koristimo iste osnovne animacije u našem svakodnevnom radu: blijedi, slajdovi, zumiranja, okretanja i drugi uobičajeni efekti. Ove animacije su prilično jednostavne i lako je napraviti brzu definiciju @keyframes da biste obavili posao. Bez centralizovanog sistema animacije, programeri prirodno pišu ove ključne kadrove od nule, nesvesni da slične animacije već postoje negde drugde u bazi koda. Ovo je posebno uobičajeno kada radite u arhitekturi baziranim na komponentama (što većina nas danas radi), jer timovi često rade paralelno u različitim dijelovima aplikacije. Rezultat? Animacijski haos. Mali problem Najočigledniji problemi s dupliciranjem ključnih kadrova su izgubljeno vrijeme razvoja i nepotrebno naduvavanje koda. Više definicija ključnih kadrova znače više mjesta za ažuriranje kada se zahtjevi promijene. Trebate podesiti tajming vaše fade animacije? Morat ćete pronaći svaku instancu u vašoj bazi kodova. Želite li standardizirati funkcije ublažavanja? Sretno u pronalaženju svih varijacija. Ovo množenje bodova održavanja čini čak i jednostavna ažuriranja animacije dugotrajnim zadatkom. Veći problem Ovo dupliciranje ključnih kadrova stvara mnogo podmukliji problem koji se krije ispod površine: zamku globalnog opsega. Čak i kada radite sa arhitekturama zasnovanim na komponentama, CSS ključni okviri su uvek definisani u globalnom opsegu. To znači da se svi ključni kadrovi primjenjuju na sve komponente. Uvijek. Da, vaša animacija ne koristi nužno ključne kadrove koje ste definirali u svojoj komponenti. Koristi posljednje ključne kadrove koji se podudaraju s istim imenom koji su učitani u globalni opseg. Sve dok su svi vaši ključni kadrovi identični, ovo može izgledati kao manji problem. Ali u trenutku kada želite da prilagodite animaciju za određeni slučaj upotrebe, u nevolji ste, ili još gore, vi ćete ih uzrokovati. Ili vaša animacija neće raditi jer se druga komponenta učitava nakon vaše, prepisuje vaše ključne kadrove, ili se vaša komponenta učitava posljednja i slučajno mijenja ponašanje animacije za svaku drugu komponentu koja koristi ime tog ključnog kadra, a vi to možda niste ni svjesni. Evo jednostavnog primjera koji pokazuje problem: .component-one { /* stilovi komponenti */ animacija: puls 1s ease-in-out beskonačno naizmjenično; }
/* ova @keyframes definicija neće raditi */ @keyframes puls { od { skala: 1; } do { skala: 1,1; } }
/* kasnije u kodu... */
.component-two { /* stilovi komponenti */ animacija: puls 1s ease-in-out beskonačan; }
/* ovaj ključni kadar će se primijeniti na obje komponente */ @keyframes puls { 0%, 20%, 100% { skala: 1; } 10%, 40% { razmjer: 1,2; } }
Obje komponente koriste isto ime animacije, ali druga definicija @keyframes zamjenjuje prvu. Sada će i komponenta-jedan i komponenta-dva koristiti druge ključne kadrove, bez obzira koja je komponenta definirala koje ključne kadrove. Pogledajte tokene ključnih kadrova olovke - Demo 1 [forked] autora Amita Sheena. Najgori dio? Ovo često savršeno funkcionira u lokalnom razvoju, ali se misteriozno prekida u proizvodnji kada procesi izgradnje mijenjaju redoslijed učitavanja vaših stilskih tablica. Na kraju ćete dobiti animacije koje se ponašaju različito ovisno o tome koje su komponente učitane i kojim redoslijedom. Rješenje: Unified Keyframes Odgovor na ovaj haos je iznenađujuće jednostavan: unaprijed definirani dinamički ključni kadrovi pohranjeni u zajedničkoj tablici stilova. Umjesto da dozvolimo svakoj komponenti da definira vlastite animacije, mi kreiramo centralizirane ključne kadrove koji su dobro dokumentirani i laki zakorištenje, održavanje i prilagođeno specifičnim potrebama vašeg projekta. Zamislite to kao tokene ključnih kadrova. Baš kao što koristimo tokene za boje i razmake, a mnogi od nas već koriste tokene za svojstva animacije, poput funkcija trajanja i ublažavanja, zašto ne bismo koristili tokene i za ključne kadrove? Ovaj pristup može se prirodno integrirati s bilo kojim trenutnim tokenom rada dizajna koji koristite, dok istovremeno rješava i mali problem (dupliciranje koda) i veći problem (globalni sukobi opsega). Ideja je jednostavna: stvoriti jedan izvor istine za sve naše zajedničke animacije. Ova zajednička tablica stilova sadrži pažljivo izrađene ključne kadrove koji pokrivaju obrasce animacije koje naš projekt zapravo koristi. Nema više nagađanja da li animacija blijeđenja već postoji negdje u našoj bazi koda. Nema više slučajnog prepisivanja animacija iz drugih komponenti. Ali ovdje je ključ: ovo nisu samo statične copy-paste animacije. Dizajnirane su da budu dinamične i prilagodljive kroz CSS prilagođena svojstva, omogućavajući nam da održimo konzistentnost, a da i dalje imamo fleksibilnost prilagođavanja animacija specifičnim slučajevima upotrebe, na primjer, ako vam je potrebna malo veća "pulsna" animacija na jednom mjestu. Izgradnja prvog tokena ključnih kadrova Jedno od prvih plodova s kojima se treba pozabaviti je „fade-in“ animacija. U jednom od mojih nedavnih projekata, pronašao sam preko desetak zasebnih definicija koje se postepeno povećavaju, i da, sve su jednostavno animirale neprozirnost od 0 do 1. Dakle, napravimo novi stilski list, nazovimo ga kf-tokens.css, uvezemo ga u naš projekat i stavimo naše ključne kadrove sa odgovarajućim komentarima unutar njega. /* keyframes-tokens.css */
/* * Fade In - fade animacija ulaza * Upotreba: animacija: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { od { neprozirnost: 0; } do { neprozirnost: 1; } }
Ova jedinstvena deklaracija @keyframes zamjenjuje sve one raspršene animacije zatamnjenja u našoj bazi koda. Čisto, jednostavno i globalno primjenjivo. I sada kada smo definirali ovaj token, možemo ga koristiti iz bilo koje komponente u cijelom projektu: .modal { animacija: kf-fade-in 0.3s ease-out; }
.tooltip { animacija: kf-fade-in 0.2s lakoća-u-izlaz; }
.obavijest { animacija: kf-fade-in 0.5s ease-out; }
Pogledajte tokene za ključne kadrove olovke - Demo 2 [forked] autora Amita Sheena. Napomena: Koristimo prefiks kf- u svim našim imenima @keyframes. Ovaj prefiks služi kao imenski prostor koji sprečava sukobe imena sa postojećim animacijama u projektu i odmah daje do znanja da ovi ključni kadrovi dolaze iz naše datoteke tokena ključnih kadrova. Izrada dinamičkog slajda Kf-fade-in ključni kadrovi rade odlično jer su jednostavni i ima malo prostora da se stvari zabrljaju. U drugim animacijama, međutim, moramo biti mnogo dinamičniji, a ovdje možemo iskoristiti ogromnu moć CSS prilagođenih svojstava. Ovo je mjesto gdje tokeni ključnih kadrova zaista blistaju u poređenju sa razbacanim statičnim animacijama. Uzmimo uobičajeni scenario: "slide-in" animacije. Ali uklizati odakle? 100px s desne strane? 50% s lijeve strane? Treba li ući s vrha ekrana? Ili možda plutaju sa dna? Toliko mogućnosti, ali umjesto stvaranja zasebnih ključnih kadrova za svaki smjer i svaku varijaciju, možemo napraviti jedan fleksibilan token koji se prilagođava svim scenarijima: /* * Slide In - usmjerena animacija slajdova * Koristite --kf-slide-from za kontrolu smjera * Zadano: klizi s lijeve strane (-100%) * Upotreba: * animacija: kf-slide-in 0.3s ease-out; * --kf-slide-from: -100px 0; // slajd slijeva * --kf-slide-from: 100px 0; // slajd s desna * --kf-slide-from: 0 -50px; // slajd od vrha */
@keyframes kf-slide-in { od { translate: var(--kf-slide-from, -100% 0); } do { prevedi: 0 0; } }
Sada možemo koristiti ovaj pojedinačni @keyframes token za bilo koji smjer slajda jednostavnom promjenom --kf-slide-from prilagođenog svojstva: .sidebar { animacija: kf-slide-in 0.3s ease-out; /* Koristi zadanu vrijednost: slajdovi slijeva */ }
.obavijest { animacija: kf-slide-in 0.4s ease-out; --kf-slide-from: 0 -50px; /* slajd od vrha */ }
.modal { animacija: kf-fade-in 0.5s, kf-slide-in 0.5s kubni-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* slajd dolje desno */ }
Ovaj pristup nam daje nevjerovatnu fleksibilnost uz održavanje dosljednosti. Jedna deklaracija ključnog okvira, beskonačne mogućnosti. Pogledajte tokene za ključne kadrove olovke - Demo 3 [forked] autora Amita Sheena. A ako želimo da naše animacije učinimo još fleksibilnijim, omogućavajući i efekte „klizanja“, možemojednostavno dodajte --kf-slide-to prilagođeno svojstvo, slično onome što ćemo vidjeti u sljedećem odjeljku. Bidirectional Zoom Keyframes Još jedna uobičajena animacija koja se umnožava u projektima su efekti "zumiranja". Bilo da se radi o suptilnom povećanju za poruke tosta, dramatičnom zumiranju za modale ili nežnom efektu smanjenja za naslove, animacije zumiranja su posvuda. Umjesto kreiranja zasebnih ključnih kadrova za svaku vrijednost skale, napravimo jedan fleksibilan skup kf-zoom ključnih kadrova:
/* * Zoom - animacija veličine * Koristite --kf-zoom-from i --kf-zoom-to za kontrolu vrijednosti skale * Zadano: zumiranje od 80% do 100% (0,8 do 1) * Upotreba: * animacija: kf-zoom 0.2s ease-out; * --kf-zoom-od: 0,5; --kf-zoom-to: 1; // zumiranje od 50% do 100% * --kf-zoom-od: 1; --kf-zoom-to: 0; // zumiranje od 100% do 0% * --kf-zoom-od: 1; --kf-zoom-to: 1.1; // zumiranje od 100% do 110% */
@keyframes kf-zoom { od { skala: var(--kf-zoom-od, 0,8); } do { skala: var(--kf-zoom-to, 1); } }
S jednom definicijom možemo postići bilo koju varijaciju zumiranja koja nam je potrebna: .toast { animacija: kf-slide-in 0,2s, kf-zoom 0.4s ease-out; --kf-slide-from: 0 100%; /* slajd od vrha */ /* Koristi zadani zum: skalira od 80% do 100% */ }
.modal { animacija: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-od: 0; /* dramatično zumiranje od 0% do 100% */ }
.heading { animacija: kf-fade-in 2s, kf-zoom 2s ease-in; --kf-zoom-od: 1.2; --kf-zoom-to: 0,8; /* lagano smanjivanje */ }
Zadana vrijednost od 0,8 (80%) savršeno funkcionira za većinu elemenata korisničkog sučelja, kao što su tost poruke i kartice, dok se i dalje lako prilagođava za posebne slučajeve. Pogledajte tokene za ključne kadrove olovke - Demo 4 [forked] autora Amita Sheena. Možda ste primijetili nešto zanimljivo u nedavnim primjerima: kombinirali smo animacije. Jedna od ključnih prednosti rada sa tokenima @keyframes je ta što su dizajnirani da se međusobno integrišu. Ova glatka kompozicija je namjerna, a ne slučajna. Kasnije ćemo detaljnije raspravljati o kompoziciji animacije, uključujući gdje one mogu postati problematične, ali većina kombinacija je jednostavna i laka za implementaciju. Napomena: Dok sam pisao ovaj članak, a možda i zbog pisanja, zatekao sam sebe da promišljam cijelu ideju o ulaznim animacijama. Uz sve nedavne napretke u CSS-u, da li su nam još uvijek potrebni? Na sreću, Adam Argyle je istražio ista pitanja i sjajno ih izrazio u svom blogu. Ovo nije u suprotnosti s onim što je ovdje napisano, ali predstavlja pristup vrijedan razmatranja, posebno ako se vaši projekti u velikoj mjeri oslanjaju na ulazne animacije. Kontinuirane animacije Dok se ulazne animacije, poput "fade", "slide" i "zoom" dešavaju jednom, a zatim se zaustavljaju, kontinuirane animacije se vrte na neodređeno vrijeme kako bi privukle pažnju ili ukazale na aktivnost koja je u toku. Dvije najčešće kontinuirane animacije s kojima se susrećem su "spin" (za indikatore učitavanja) i "pulse" (za isticanje važnih elemenata). Ove animacije predstavljaju jedinstvene izazove kada je u pitanju kreiranje tokena ključnih kadrova. Za razliku od ulaznih animacija koje obično prelaze iz jednog stanja u drugo, kontinuirane animacije moraju biti vrlo prilagodljive u svojim obrascima ponašanja. Spin Doctor Čini se da svaki projekat koristi višestruke animacije okretanja. Neki se okreću u smjeru kazaljke na satu, drugi u suprotnom smjeru. Neki rade jednu rotaciju za 360 stepeni, drugi rade više okreta za brži efekat. Umjesto kreiranja zasebnih ključnih kadrova za svaku varijaciju, napravimo jedno fleksibilno okretanje koje obrađuje sve scenarije:
/* * Spin - rotacija animacija * Koristite --kf-spin-from i --kf-spin-to za kontrolu raspona rotacije * Koristite --kf-spin-turns za kontrolu količine rotacije * Zadano: rotira od 0 stepeni do 360 stepeni (1 puna rotacija) * Upotreba: * animacija: kf-spin 1s linearno beskonačno; * --kf-spin-turns: 2; // 2 pune rotacije * --kf-spin-od: 0deg; --kf-spin-to: 180 stepeni; // pola rotacije * --kf-spin-od: 0deg; --kf-spin-to: -360 stepeni; // suprotno od kazaljke na satu */
@keyframes kf-spin { od { rotirati: var(--kf-spin-from, 0deg); } do { rotirati: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Sada možemo kreirati bilo koju varijaciju okretanja koja nam se sviđa:
.loading-spinner { animacija: kf-spin 1s linearna beskonačna; /* Koristi zadano: rotira od 0 stepeni do 360 stepeni */ }
.fast-loader { animacija: kf-spin 1.2s beskonačna alternativa jednostavnog ulaska; --kf-spin-turns: 3; /* 3 pune rotacije za svaki smjer po ciklusu*/ }
.steped-reverse { animacija: kf-spin 1.5s koraka(8) beskonačno; --kf-spin-to: -360 stepeni; /* u smjeru suprotnom od kazaljke na satu */ }
.subtle-wiggle { animacija: kf-spin 2s ease-in-out beskonačna alternativa; --kf-spin-od: -16deg; --kf-spin-to: 32deg; /* pomicanje za 36 stupnjeva: između -18 stupnjeva i +18 stupnjeva */ }
Pogledajte tokene ključnih kadrova olovke - Demo 5 [forked] autora Amita Sheena. Ljepota ovog pristupa je u tome što isti ključni kadrovi rade za učitavanje spinnera, rotirajućih ikona, efekata pomicanja, pa čak i složenih animacija s više okreta. Paradoks pulsa Pulsne animacije su složenije jer mogu "pulsirati" različita svojstva. Neki pulsiraju skalu, drugi pulsiraju neprozirnost, a neki pulsiraju svojstva boje poput svjetline ili zasićenja. Umjesto da kreiramo zasebne ključne kadrove za svako svojstvo, možemo kreirati ključne kadrove koji rade sa bilo kojim CSS svojstvom. Evo primjera pulsnog ključnog kadra s opcijama razmjera i neprozirnosti:
/* * Puls - pulsirajuća animacija * Koristite --kf-pulse-scale-from i --kf-pulse-scale-do za kontrolu raspona skale * Koristite --kf-pulse-opacity-from i --kf-pulse-opacity-do za kontrolu raspona neprozirnosti * Zadano: nema pulsa (sve vrijednosti 1) * Upotreba: * animacija: kf-pulse 2s ease-in-out beskonačno alternativno; * --kf-pulse-scale-od: 0,95; --kf-pulse-scale-to: 1,05; // skala puls * --kf-pulse-opacity-od: 0,7; --kf-pulse-opacity-to: 1; // puls neprozirnosti */
@keyframes kf-pulse { od { skala: var(--kf-pulse-scale-from, 1); neprozirnost: var(--kf-pulse-opacity-from, 1); } do { skala: var(--kf-pulse-scale-to, 1); neprozirnost: var(--kf-pulse-opacity-to, 1); } }
Ovo stvara fleksibilan puls koji može animirati više svojstava: .poziv na akciju { animacija: kf-pulse 0.6s beskonačno alternativno; --kf-pulse-opacity-od: 0,5; /* puls neprozirnosti */ }
.notification-dot { animacija: kf-pulse 0.6s beskonačno naizmjenično jednostavno ulazak-izlaz; --kf-pulse-scale-od: 0,9; --kf-pulse-scale-to: 1.1; /* skala puls */ }
.text-highlight { animacija: kf-pulse 1.5s ease-out beskonačno; --kf-puls-skala-od: 0,8; --kf-pulse-opacity-od: 0,2; /* skala i puls neprozirnosti */ }
Pogledajte tokene ključnih okvira olovke - Demo 6 [račvano] autora Amita Sheena. Ovaj pojedinačni kf-pulse ključni kadar može podnijeti sve, od suptilnog privlačenja pažnje do dramatičnih istaknutih trenutaka, a sve je lako prilagoditi. Advanced Easing Jedna od sjajnih stvari u korišćenju tokena ključnih kadrova je koliko je lako proširiti našu biblioteku animacija i pružiti efekte koje većina programera ne bi napisala od nule, kao što su elastični ili odskočni. Evo primjera jednostavnog tokena ključnih kadrova "bounce" koji koristi --kf-bounce-from prilagođeno svojstvo za kontrolu visine skoka. /* * Odskakanje - animacija odskakanja ulaza * Koristite --kf-bounce-from za kontrolu visine skoka * Zadano: skače sa 100vh (van ekrana) * Upotreba: * animacija: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // skok sa visine od 200px */
@keyframes kf-bounce { 0% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { prevedi: 0 0; animacija-vremenska-funkcija: ease-out; } }
Animacije poput "elastične" su malo složenije zbog proračuna unutar ključnih kadrova. Moramo definisati --kf-elastic-from-X i --kf-elastic-from-Y odvojeno (oba su opciona), a zajedno nam omogućavaju da kreiramo elastični ulaz iz bilo koje tačke na ekranu.
/* * Elastic In - elastična ulazna animacija * Koristite --kf-elastic-od-X i --kf-elastic-from-Y za kontrolu početne pozicije * Zadano: ulazi od gornjeg centra (0, -100vh) * Upotreba: * animacija: kf-elastic-in 2s ease-in-out oboje; * --kf-elastic-od-X: -50px; * --kf-elastic-od-Y: -200px; // unesite od (-50px, -200px) */
@keyframes kf-elastic-in { 0% { translate: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28% { prevedi: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100% { prevedi: 0 0; } }
Ovaj pristup olakšava ponovnu upotrebu i prilagođavanje naprednih ključnih kadrova u našem projektu, samo promjenom jednog prilagođenog svojstva.
.bounce-and-zoom { animacija: kf-bounce 3s olakšanje, kf-zoom 3s linearni; --kf-zoom-od: 0; }
.bounce-and-slide { animacija-kompozicija: dodaj; /* Obje animacije koriste translate */ animacija: kf-bounce 3s olakšanje, kf-slide-in 3s ease-out; --kf-slide-from: -200px; }
.elastic-in { animacija: kf-elastic-in 2s ease-in-out oboje; }
Pogledajte tokene za ključne kadrove olovke - Demo 7 [forked] autora Amita Sheena. Do ove tačke smo vidjeli kako možemo konsolidirati ključne kadrove na pametan i efikasan način. Naravno, možda biste željeli podesiti stvari tako da bolje odgovaraju potrebama vašeg projekta, ali mi smo pokrili primjere nekoliko uobičajenih animacija i slučajeva svakodnevne upotrebe. A sa ovim tokenima ključnih kadrova na mjestu, sada imamo moćne građevne blokove za kreiranje dosljednih animacija koje se mogu održavati u cijelom projektu. Nema više dupliciranih ključnih kadrova, nema više sukoba globalnog opsega. Samo čist, praktičan način za rješavanje svih naših potreba za animacijom. Ali pravo pitanje je: kako da sastavimo ove blokove zajedno? Stavljajući sve zajedno Vidjeli smo da je kombiniranje osnovnih tokena ključnih kadrova jednostavno. Ne treba nam ništa posebno osim da definiramo prvu animaciju, definiramo drugu, podesimo varijable po potrebi i to je to. /* Fade in + slide in */ .toast { animacija: kf-fade-in 0.4s, kf-slide-in 0.4s kubni-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* Uvećavanje + smanjivanje */ .modal { animacija: kf-fade-in 0.3s, kf-zoom 0.3s kubni-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-od: 0,7; --kf-zoom-to: 1; }
/* Ubaci + puls */ .obavijest { animacija: kf-slide-in 0.5s, kf-pulse 1.2s beskonačno naizmjenično jednostavno uključivanje-izlaz; --kf-slide-from: -100px 0; --kf-puls-skala-od: 0,95; --kf-pulse-scale-to: 1,05; }
Ove kombinacije lijepo funkcioniraju jer svaka animacija cilja na drugačiju osobinu: neprozirnost, transformaciju (translate/scale) itd. Ali ponekad postoje konflikti i moramo znati zašto i kako se nositi s njima. Kada dvije animacije pokušaju animirati isto svojstvo - na primjer, obje animiraju skalu ili obje animiraju neprozirnost - rezultat neće biti ono što očekujete. Podrazumevano, samo jedna od animacija se zapravo primjenjuje na to svojstvo, a to je posljednja na listi animacija. Ovo je ograničenje načina na koji CSS rukuje višestrukim animacijama na istom svojstvu. Na primjer, ovo neće raditi kako je predviđeno jer će se primijeniti samo kf-pulse animacija. .bad-combo { animacija: kf-zoom 0.5s naprijed, kf-puls 1.2s beskonačan naizmjenični; --kf-zoom-od: 0,5; --kf-zoom-to: 1.2; --kf-puls-skala-od: 0,8; --kf-pulse-scale-to: 1.1; }
Animation Addition Najjednostavniji i najizravniji način za rukovanje višestrukim animacijama koje utječu na isto svojstvo je korištenje svojstva kompozicije animacije. U posljednjem primjeru iznad, kf-pulse animacija zamjenjuje kf-zoom animaciju, tako da nećemo vidjeti početni zum i nećemo dobiti očekivanu skalu od 1,2. Postavljanjem kompozicije animacije za dodavanje, govorimo pretraživaču da kombinuje obe animacije. Ovo nam daje rezultat koji želimo. .component-two { animacija-kompozicija: dodaj; }
Pogledajte tokene za ključne kadrove olovke - Demo 8 [forked] autora Amita Sheena. Ovaj pristup dobro funkcionira u većini slučajeva gdje želimo kombinirati efekte na istu imovinu. Također je korisno kada trebamo kombinirati animacije sa statičkim vrijednostima svojstava. Na primjer, ako imamo element koji koristi svojstvo translate da ga pozicionira tačno tamo gdje želimo, a zatim ga želimo animirati pomoću kf-slide-in ključnih kadrova, dobićemo gadan vidljiv skok bez kompozicije animacije. Pogledajte tokene za ključne kadrove olovke - Demo 9 [forked] autora Amita Sheena. Uz set animacije-kompozicije za dodavanje, animacija se glatko kombinuje sa postojećomtransformirati, tako da element ostaje na mjestu i animira kako se očekuje. Animation Stagger Drugi način rukovanja višestrukim animacijama je da se one "zakače" - to jest, pokrenite drugu animaciju malo nakon što se prva završi. To nije rješenje koje funkcionira za svaki slučaj, ali je korisno kada imamo ulaznu animaciju praćenu kontinuiranom animacijom. /* fade in + puls neprozirnosti */ .obavijest { animacija: kf-fade-in 2s ease-out, kf-puls 0,5s 2s lako-in-out beskonačno naizmjenično; --kf-pulse-opacity-to: 0,5; }
Pogledajte Pen Keyframes Tokene - Demo 10 [forked] autora Amita Sheena. Order Matters Veliki dio animacija s kojima radimo koristi svojstvo transformacije. U većini slučajeva, ovo je jednostavno praktičnije. Takođe ima prednost u performansama jer animacije transformacije mogu biti GPU ubrzane. Ali ako koristimo transformacije, moramo prihvatiti da je redoslijed kojim izvodimo naše transformacije bitan. Puno. U našim ključnim okvirima do sada smo koristili pojedinačne transformacije. Prema specifikacijama, one se uvijek primjenjuju u fiksnom redoslijedu: prvo se element translatira, zatim se rotira, a zatim skalira. Ovo ima smisla i ono što većina nas očekuje. Međutim, ako koristimo svojstvo transformacije, redosled kojim su funkcije napisane je redosled kojim se primenjuju. U ovom slučaju, ako nešto pomjerimo za 100 piksela po X-osi, a zatim ga zarotimo za 45 stepeni, to nije isto kao da ga prvo zarotiramo za 45 stepeni, a zatim pomerimo za 100 piksela. /* Ružičasti kvadrat: prvo prevedite, a zatim rotirajte */ .example-one { transform: translateX(100px) rotate(45deg); }
/* Zeleni kvadrat: Prvo rotirajte, a zatim prevedite */ .primjer-dva { transform: rotate(45deg) translateX(100px); }
Pogledajte tokene za ključne kadrove olovke - Demo 11 [forked] autora Amita Sheena. Ali prema redoslijedu transformacije, sve pojedinačne transformacije - sve što smo koristili za tokene ključnih kadrova - dešavaju se prije funkcija transformacije. To znači da će se sve što postavite u svojstvu transformacije dogoditi nakon animacija. Ali ako postavite, na primjer, translate zajedno sa ključnim kadrovima kf-spin, prijevod će se dogoditi prije animacije. Još zbunjen?! Ovo dovodi do situacija u kojima statičke vrijednosti mogu uzrokovati različite rezultate za istu animaciju, kao u sljedećem slučaju:
/* Zajednička animacija za oba spinera */ .spinner { animacija: kf-spin 1s linearna beskonačna; }
/* Pink spinner: prevedite prije rotiranja (pojedinačna transformacija) */ .spinner-pink { prevesti: 100% 50%; }
/* Zeleni spinner: rotiraj pa prevedi (redoslijed funkcija) */ .spinner-green { transform: translate(100%, 50%); }
Pogledajte tokene ključnih okvira olovke - Demo 12 [račvano] autora Amita Sheena. Možete vidjeti da prvi spiner (ružičasti) dobija translaciju koja se dešava prije rotacije kf-spin-a, tako da se prvo pomiče na svoje mjesto, a zatim se okreće. Drugi spinner (zeleni) dobija funkciju translate() koja se dešava nakon individualne transformacije, tako da se element prvo okreće, a zatim se pomera u odnosu na svoj trenutni ugao, i dobijamo efekat široke orbite. Ne, ovo nije greška. To je samo jedna od onih stvari koje moramo znati o CSS-u i imati na umu kada radimo s višestrukim animacijama ili višestrukim transformacijama. Ako je potrebno, možete kreirati i dodatni skup kf-spin-alt ključnih kadrova koji rotiraju elemente pomoću funkcije rotate(). Reduced Motion I dok govorimo o alternativnim ključnim kadrovima, ne možemo zanemariti opciju „bez animacije“. Jedna od najvećih prednosti korištenja tokena ključnih kadrova je ta što se pristupačnost može uklopiti, a to je zapravo prilično lako učiniti. Dizajnirajući naše ključne kadrove imajući na umu pristupačnost, možemo osigurati da korisnici koji preferiraju smanjeno kretanje dobiju glatkije iskustvo koje manje ometa, bez dodatnog rada ili dupliciranja koda. Tačno značenje "Reduced Motion" može se malo promijeniti od jedne animacije do druge, i od projekta do projekta, ali evo nekoliko važnih točaka koje treba imati na umu: Isključivanje ključnih kadrova Dok se neke animacije mogu ublažiti ili usporiti, postoje druge koje bi trebale potpuno nestati kada se zatraži smanjeni pokret. Pulsne animacije su dobar primjer. Kako bismo bili sigurni da ove animacije ne rade u režimu smanjenog kretanja, možemo ih jednostavno umotati u odgovarajući medijski upit.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { od { skala: var(--kf-pulse-scale-from, 1); neprozirnost: var(--kf-pulse-opacity-from, 1); } do { skala: var(--kf-pulse-scale-to, 1); neprozirnost:var(--kf-pulse-opacity-to, 1); } } }
Ovo osigurava da korisnici koji su postavili prefers-reduced-motion za smanjenje neće vidjeti animaciju i da će dobiti iskustvo koje odgovara njihovim željama. Instant In Postoje neki ključni kadrovi koje ne možemo jednostavno ukloniti, kao što su ulazne animacije. Vrijednost se mora promijeniti, mora animirati; u suprotnom, element neće imati ispravne vrijednosti. Ali u smanjenom kretanju, ovaj prijelaz sa početne vrijednosti trebao bi biti trenutan. Da bismo to postigli, definirat ćemo dodatni skup ključnih kadrova gdje vrijednost odmah skače u krajnje stanje. Oni postaju naši zadani ključni kadrovi. Zatim ćemo dodati regularne ključne kadrove unutar medijskog upita za prefers-reduced-motion postavljen na no-preference, baš kao u prethodnom primjeru. /* iskoči odmah za smanjeno kretanje */ @keyframes kf-zoom { od, do { skala: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Originalni ključni kadrovi zumiranja */ @keyframes kf-zoom { od { skala: var(--kf-zoom-od, 0,8); } do { skala: var(--kf-zoom-to, 1); } } }
Na ovaj način, korisnici koji preferiraju smanjeni pokret vidjet će da se element trenutno pojavljuje u svom konačnom stanju, dok svi ostali dobijaju animirani prijelaz. Meki pristup Postoje slučajevi u kojima želimo zadržati neki pokret, ali mnogo mekši i mirniji od originalne animacije. Na primjer, možemo zamijeniti odskočni ulaz sa blagim umanjivanjem.
@keyframes kf-bounce { /* Soft fade-in za smanjeno kretanje */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Originalni ključni kadrovi odbijanja */ } }
Sada, korisnici s omogućenim smanjenim pokretom i dalje imaju osjećaj izgleda, ali bez intenzivnog pokreta odbijanja ili elastične animacije. S postavljenim gradivnim blokovima, sljedeće pitanje je kako ih učiniti dijelom stvarnog toka posla. Pisanje fleksibilnih ključnih kadrova je jedna stvar, ali njihovo stvaranje pouzdanih u velikom projektu zahtijeva nekoliko strategija koje sam morao naučiti na teži način. Strategije implementacije i najbolje prakse Jednom kada imamo solidnu biblioteku tokena ključnih kadrova, pravi izazov je kako ih uvesti u svakodnevni rad.
Iskušenje je da se sve ključne kadrove ispuste odjednom i problem proglasi riješenim, ali u praksi sam otkrio da najbolji rezultati dolaze iz postepenog usvajanja. Počnite s najčešćim animacijama, kao što su bledenje ili slajdovanje. Ovo su lake pobjede koje pokazuju trenutnu vrijednost bez potrebe za velikim prepisivanjem. Imenovanje je još jedna stvar koja zaslužuje pažnju. Dosljedan prefiks ili imenski prostor čini očiglednim koje su animacije tokeni, a koje su lokalne jednokratne. Takođe sprečava slučajne sudare i pomaže novim članovima tima da na prvi pogled prepoznaju zajednički sistem. Dokumentacija je jednako važna kao i sam kod. Čak i kratak komentar iznad svakog tokena ključnih kadrova može uštedjeti sate nagađanja kasnije. Programer bi trebao biti u mogućnosti da otvori datoteku tokena, skenira efekat koji mu je potreban i kopira obrazac korištenja direktno u svoju komponentu. Fleksibilnost je ono što čini ovaj pristup vrijednim truda. Izlažući razumna prilagođena svojstva, timovima dajemo prostor da prilagode animaciju bez narušavanja sistema. Istovremeno, pokušajte da ne komplikujete previše. Obezbedite dugmad koja su bitna, a ostalo zadržite mišljenje. Konačno, zapamtite pristupačnost. Nije svakoj animaciji potrebna alternativa smanjenog pokreta, ali mnogima je potrebna. Rano uvođenje ovih prilagođavanja znači da ih kasnije nikada ne moramo naknadno ugraditi, a to pokazuje razinu brige koju će naši korisnici primijetiti čak i ako to nikada ne spomenu.
Prema mom iskustvu, tretiranje tokena ključnih kadrova kao dijela našeg tokena dizajna je ono što ih čini da se drže. Jednom kada su na svom mestu, prestaju da se osećaju kao specijalni efekti i postaju deo jezika dizajna, prirodno proširenje načina na koji se proizvod kreće i reaguje. Wrapping Up Animacije mogu biti jedan od najradosnijih dijelova izgradnje interfejsa, ali bez strukture mogu postati i jedan od najvećih izvora frustracije. Tretirajući ključne kadrove kao tokene, uzimate nešto što je obično neuredno i teško za upravljanje i pretvarate to u jasan, predvidljiv sistem. Prava vrijednost nije samo u uštedi nekoliko linija koda. U povjerenju je da kada koristite fade, klizanje, zumiranje ili okretanje, znate tačno kako će se ponašati u cijelom projektu. To je fleksibilnost koja dolazi iz prilagođenih svojstava bez haosa beskrajnih varijacija. I to je u pristupačnosti ugrađenoj u temelj, a ne dodatoj kaonaknadna misao. Vidio sam kako ove ideje rade u različitim timovima i različitim kodnim bazama, a obrazac je uvijek isti. Jednom kada su tokeni na mjestu, ključni kadrovi prestaju biti raspršena kolekcija trikova i postaju dio jezika dizajna. Oni čine da se proizvod osjeća namjernijim, dosljednijim i življim. Ako uzmete jednu stvar iz ovog članka, neka to bude: animacije zaslužuju istu brigu i strukturu koju već dajemo bojama, tipografiji i razmacima. Mala investicija u tokene ključnih kadrova se isplati svaki put kada se vaš interfejs pomeri.
