Zamislite ovo: pridružite se novom projektu, zaronite u bazu kodova i unutar prvih nekoliko sati otkrijete nešto frustrirajuće poznato. Razbacane po stilskim tablicama, pronać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 barem dvije različite animacije vrtnje jer, dobro, zašto ne? @keyframes puls { od { mjerilo: 1; } do { mjerilo: 1,1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { mjerilo: 1; } 10%, 40% { mjerilo: 1,2; } }
Ako vam ovaj scenarij zvuči poznato, niste sami. Prema mom iskustvu u raznim projektima, jedna od najdosljednijih brzih pobjeda koje mogu postići je konsolidacija i standardizacija ključnih okvira. To je postao tako pouzdan obrazac da se sada veselim ovom čišćenju kao jednom od svojih prvih zadataka na bilo kojoj novoj bazi koda. Logika iza kaosa Ova suvišnost ima savršenog smisla kada razmislite o tome. Svi koristimo iste temeljne animacije u našem svakodnevnom radu: blijeđenje, slajdove, zumiranje, vrtnje i druge uobičajene efekte. Ove su animacije prilično jednostavne i lako je smisliti brzu definiciju @keyframes da biste obavili posao. Bez središnjeg sustava animacije, programeri prirodno pišu te ključne kadrove ispočetka, nesvjesni da slične animacije već postoje negdje drugdje u bazi koda. To je osobito uobičajeno kada se radi u arhitekturama temeljenim na komponentama (što većina nas danas radi), jer timovi često rade paralelno u različitim dijelovima aplikacije. Rezultat? Kaos u animaciji. Mali problem Najočitiji problemi s dupliciranjem ključnih okvira su uzalud izgubljeno vrijeme razvoja i nepotrebno napuhavanje koda. Više definicija ključnih okvira znači više mjesta za ažuriranje kada se zahtjevi promijene. Trebate li prilagoditi vrijeme svoje animacije za blijeđenje? Morat ćete uloviti svaku instancu u svojoj bazi koda. Želite standardizirati funkcije ublažavanja? Sretno u pronalaženju svih varijacija. Ovo umnožavanje točaka održavanja čini čak i jednostavna ažuriranja animacije dugotrajnim zadatkom. Veći problem Ovo umnožavanje ključnih kadrova stvara mnogo podmukliji problem koji vreba ispod površine: zamku globalnog opsega. Čak i kada radite s arhitekturama temeljenim na komponentama, CSS ključni okviri uvijek su definirani u globalnom opsegu. To znači da se svi ključni okviri primjenjuju na sve komponente. Uvijek. Da, vaša animacija ne mora nužno koristiti ključne kadrove koje ste definirali u svojoj komponenti. Koristi posljednje ključne kadrove koji odgovaraju istom nazivu koji su učitani u globalni opseg. Sve dok su svi vaši ključni kadrovi identični, ovo se može činiti kao manji problem. Ali u trenutku kada poželite prilagoditi animaciju za određeni slučaj upotrebe, vi ste u nevolji ili još gore, vi ćete biti taj koji ih uzrokuje. Ili vaša animacija neće raditi jer se druga komponenta učitala nakon vaše, prepisujući vaše ključne kadrove, ili se vaša komponenta učitava posljednja i slučajno mijenja ponašanje animacije za svaku drugu komponentu koristeći naziv tog ključnog kadra, a vi toga možda niste ni svjesni. Evo jednostavnog primjera koji pokazuje problem: .component-one { /* stilovi komponenti */ animacija: puls 1s lagano ulazak-izlaz beskonačno naizmjenično; }
/* ova @keyframes definicija neće raditi */ @keyframes puls { od { mjerilo: 1; } do { mjerilo: 1,1; } }
/* kasnije u kodu... */
.component-two { /* stilovi komponenti */ animacija: puls 1s ease-in-out beskonačno; }
/* ovaj ključni okvir primijenit će se na obje komponente */ @keyframes puls { 0%, 20%, 100% { mjerilo: 1; } 10%, 40% { mjerilo: 1,2; } }
Obje komponente koriste isti naziv animacije, ali druga definicija @keyframes prepisuje prvu. Sada će i komponenta-1 i komponenta-dva koristiti druge ključne kadrove, bez obzira na to koja je komponenta definirala koje ključne kadrove. Pogledajte Pen Keyframes Tokens - Demo 1 [forked] od Amita Sheena. Najgori dio? Ovo često savršeno funkcionira u lokalnom razvoju, ali se misteriozno prekida u proizvodnji kada procesi izgradnje promijene redoslijed učitavanja vaših stilskih listova. Na kraju dobijete animacije koje se ponašaju drugačije ovisno o tome koje su komponente učitane i kojim redoslijedom. Rješenje: objedinjeni ključni okviri Odgovor na ovaj kaos je iznenađujuće jednostavan: unaprijed definirani dinamički ključni okviri pohranjeni u zajedničkoj tablici stilova. Umjesto da dopuštamo da svaka komponenta definira svoje vlastite animacije, stvaramo centralizirane ključne kadrove koji su dobro dokumentirani, jednostavni zakorištenje, održavanje i prilagođeno specifičnim potrebama vašeg projekta. Zamislite to kao tokene ključnih sličica. Baš kao što koristimo tokene za boje i razmake, a mnogi od nas već koriste tokene za svojstva animacije, poput trajanja i funkcija ublažavanja, zašto ne bismo koristili tokene i za ključne kadrove? Ovaj se pristup može prirodno integrirati s bilo kojim trenutnim tijekovima rada tokena dizajna koji koristite, dok istovremeno rješava i mali problem (dupliciranje koda) i veći problem (konflikti globalnog opsega). Ideja je jednostavna: stvoriti jedan izvor istine za sve naše zajedničke animacije. Ova dijeljena lista stilova sadrži pažljivo izrađene ključne okvire koji pokrivaju uzorke animacije koje naš projekt zapravo koristi. Nema više nagađanja postoji li animacija za blijeđenje već negdje u našoj bazi kodova. Nema više slučajnog prepisivanja animacija iz drugih komponenti. Ali ovdje je ključ: ovo nisu samo statične copy-paste animacije. Osmišljeni su da budu dinamični i prilagodljivi putem CSS prilagođenih svojstava, omogućujući nam da održimo dosljednost dok još uvijek imamo fleksibilnost za prilagodbu animacija određenim slučajevima upotrebe, primjerice ako vam je potrebna malo veća "pulsna" animacija na jednom mjestu. Izrada prvog tokena ključnih okvira Jedan od prvih problema s kojima bismo se trebali pozabaviti je "fade-in" animacija. U jednom od svojih nedavnih projekata pronašao sam više od desetak zasebnih definicija zatamnjenja, i da, sve su jednostavno animirale neprozirnost od 0 do 1. Dakle, stvorimo novu tablicu stilova, nazovimo je kf-tokens.css, uvezimo je u naš projekt i postavimo naše ključne okvire s odgovarajućim komentarima unutar nje. /* keyframes-tokens.css */
/* * Fade In - blijedi ulazna animacija * Upotreba: animacija: kf-fade-in 0,3s lagano-out; */ @keyframes kf-fade-in { od { neprozirnost: 0; } do { neprozirnost: 1; } }
Ova pojedinačna @keyframes deklaracija zamjenjuje sve one raštrkane animacije koje se postepeno pojavljuju u našoj bazi koda. Čist, jednostavan i globalno primjenjiv. Sada kada smo definirali ovaj token, možemo ga koristiti iz bilo koje komponente u našem projektu: .modal { animacija: kf-fade-in 0,3s lagano-out; }
.tooltip { animacija: kf-fade-in 0,2s lagano-in-out; }
.obavijest { animacija: kf-fade-in 0,5s lagano-out; }
Pogledajte Pen Keyframes Tokens - Demo 2 [forked] od Amita Sheena. Napomena: koristimo prefiks kf- u svim našim nazivima @keyframes. Ovaj prefiks služi kao prostor imena koji sprječava sukobe imenovanja s postojećim animacijama u projektu i odmah daje do znanja da ti ključni okviri dolaze iz naše datoteke tokena ključnih okvira. Izrada dinamičnog slajda KF-fade-in ključni okviri rade sjajno jer su jednostavni i ima malo prostora za zabrljati stvari. U drugim animacijama, međutim, moramo biti puno dinamičniji, a ovdje možemo iskoristiti ogromnu snagu prilagođenih CSS svojstava. Ovdje tokeni ključnih kadrova stvarno blistaju u usporedbi s raspršenim statičnim animacijama. Uzmimo uobičajeni scenarij: "slide-in" animacije. Ali skliznuti odakle? 100px s desna? 50% slijeva? Treba li ulaziti s vrha zaslona? Ili možda isplivati s dna? Toliko mogućnosti, ali umjesto stvaranja zasebnih ključnih okvira za svaki smjer i svaku varijaciju, možemo izgraditi jedan fleksibilni token koji se prilagođava svim scenarijima: /* * Slide In - usmjerena slajd animacija * Koristite --kf-slide-from za kontrolu smjera * Zadano: klizi slijeva (-100%) * Upotreba: * animacija: kf-slide-in 0,3s lagano-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 { prevedi: var(--kf-slide-from, -100% 0); } do { prevesti: 0 0; } }
Sada možemo koristiti ovaj pojedinačni token @keyframes za bilo koji smjer slajda jednostavnom promjenom prilagođenog svojstva --kf-slide-from: .sidebar { animacija: kf-slide-in 0,3s lagano-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 kubični bezier (0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* slajd odozdo desno */ }
Ovaj pristup daje nam nevjerojatnu fleksibilnost uz održavanje dosljednosti. Jedna deklaracija ključnog okvira, beskonačne mogućnosti. Pogledajte Pen Keyframes Tokens - Demo 3 [forked] od Amita Sheena. A ako želimo naše animacije učiniti još fleksibilnijima, dopuštajući i efekte "slide-out", možemojednostavno dodajte prilagođeno svojstvo --kf-slide-to, slično onome što ćemo vidjeti u sljedećem odjeljku. Dvosmjerni ključni okviri zumiranja Još jedna uobičajena animacija koja se duplicira u projektima su efekti "zumiranja". Bilo da se radi o suptilnom povećanju za tost poruke, dramatičnom povećanju za modale ili blagom efektu smanjivanja za naslove, animacije zumiranja su posvuda. Umjesto stvaranja zasebnih ključnih okvira za svaku vrijednost ljestvice, napravimo jedan fleksibilan skup kf-zoom ključnih okvira:
/* * Zoom - skala animacije * Koristite --kf-zoom-from i --kf-zoom-to za kontrolu vrijednosti mjerila * Zadano: zumira od 80% do 100% (0,8 do 1) * Upotreba: * animacija: kf-zoom 0.2s ease-out; * --kf-zoom-from: 0,5; --kf-zoom-to: 1; // zumiranje od 50% do 100% * --kf-zoom-from: 1; --kf-zoom-to: 0; // zumiranje od 100% do 0% * --kf-zoom-from: 1; --kf-zoom-to: 1,1; // zumiranje od 100% do 110% */
@keyframes kf-zoom { od { skala: var(--kf-zoom-from, 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,2 s, kf-zoom 0,4 s lagano smanjivanje; --kf-slide-from: 0 100%; /* slajd od vrha */ /* Koristi zadano zumiranje: skalira od 80% do 100% */ }
.modal { animacija: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* dramatičan zum od 0% do 100% */ }
.naslov { animacija: kf-fade-in 2 s, kf-zoom 2s lagano uvlačenje; --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 posebnim slučajevima. Pogledajte Pen Keyframes Tokens - Demo 4 [forked] od Amita Sheena. Možda ste primijetili nešto zanimljivo u nedavnim primjerima: kombinirali smo animacije. Jedna od ključnih prednosti rada s @keyframes tokenima je ta što su dizajnirani da se besprijekorno međusobno integriraju. Ova glatka kompozicija je namjerna, a ne slučajna. Kasnije ćemo detaljnije raspravljati o kompoziciji animacije, uključujući gdje 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 njegovog pisanja, zatekao sam se kako preispitujem cijelu ideju ulaznih animacija. Uza sva nedavna dostignuća u CSS-u, trebaju li nam još uvijek uopće? Srećom, Adam Argyle istražio je ista pitanja i briljantno 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 uvelike oslanjaju na ulazne animacije. Kontinuirane animacije Dok se ulazne animacije, kao što su "izbljeđivanje", "klizanje" i "zumiranje", događaju jednom i zatim prestanu, neprekidne animacije beskonačno se ponavljaju kako bi privukle pozornost ili ukazale na aktivnost u tijeku. Dvije najčešće kontinuirane animacije s kojima se susrećem su "vrtnja" (za indikatore učitavanja) i "puls" (za isticanje važnih elemenata). Ove animacije predstavljaju jedinstvene izazove kada je u pitanju stvaranje tokena ključnih sličica. Za razliku od ulaznih animacija koje obično idu iz jednog stanja u drugo, kontinuirane animacije moraju biti vrlo prilagodljive u svojim obrascima ponašanja. Spin doktor Čini se da svaki projekt koristi više animacija vrtnje. Neki se okreću u smjeru kazaljke na satu, drugi suprotno. Neki rade jednu rotaciju za 360 stupnjeva, drugi rade više okreta za brži učinak. Umjesto stvaranja zasebnih ključnih okvira za svaku varijaciju, napravimo jednu fleksibilnu vrtnju koja obrađuje sve scenarije:
/* * Spin - rotacijska 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 stupnjeva do 360 stupnjeva (1 puna rotacija) * Upotreba: * animacija: kf-spin 1s linearno beskonačno; * --kf-spin-okreta: 2; // 2 pune rotacije * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // pola rotacije * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // suprotno od kazaljke na satu */
@keyframes kf-spin { od { rotiraj: var(--kf-spin-from, 0deg); } do { rotiraj: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Sada možemo stvoriti bilo koju varijaciju vrtnje koju želimo:
.loading-spinner { animacija: kf-spin 1s linearno beskonačno; /* Koristi zadano: rotira od 0 stupnjeva do 360 stupnjeva */ }
.fast-loader { animacija: kf-spin 1.2s lagano ulazak-izlazak beskonačno naizmjenično; --kf-spin-okreta: 3; /* 3 pune rotacije za svaki smjer po ciklusu*/ }
.steped-reverse { animacija: kf-spin 1,5 s koraci(8) beskonačno; --kf-spin-to: -360deg; /* suprotno od kazaljke na satu */ }
.subtle-wiggle { animacija: kf-spin 2s ease-in-out beskonačno naizmjenično; --kf-spin-od: -16deg; --kf-spin-to: 32deg; /* pomicanje 36 stupnjeva: između -18 stupnjeva i +18 stupnjeva */ }
Pogledajte Pen Keyframes Tokens - Demo 5 [forked] od Amita Sheena. Ljepota ovog pristupa je u tome što isti ključni okviri rade za učitavanje spinnera, rotirajućih ikona, efekata pomicanja, pa čak i složenih višestrukih animacija. 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ćenosti. Umjesto stvaranja zasebnih ključnih okvira za svako svojstvo, možemo stvoriti ključne okvire koji rade s bilo kojim CSS svojstvom. Evo primjera pulsirajuće ključne slike s opcijama razmjera i neprozirnosti:
/* * Puls - pulsirajuća animacija * Koristite --kf-pulse-scale-from i --kf-pulse-scale-to za kontrolu raspona skale * Koristite --kf-pulse-opacity-from i --kf-pulse-opacity-to za kontrolu raspona neprozirnosti * Zadano: nema pulsa (sve vrijednosti 1) * Upotreba: * animacija: kf-pulse 2s ease-in-out beskonačno naizmjenično; * --kf-pulsna skala-od: 0,95; --kf-pulsna skala-do: 1,05; // ljestvica pulsa * --kf-neprozirnost-pulsa-od: 0,7; --kf-neprozirnost-pulsa-do: 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 fleksibilni puls koji može animirati više svojstava: .poziv na radnju { animacija: kf-puls 0,6 s beskonačno naizmjenično; --kf-neprozirnost-pulsa-od: 0,5; /* puls neprozirnosti */ }
.notification-dot { animacija: kf-puls 0,6 s lakoća ulaska-izlaska beskonačno naizmjenično; --kf-pulsna skala-od: 0,9; --kf-pulsna skala-do: 1,1; /* puls skale */ }
.text-highlight { animacija: kf-puls 1,5 s beskonačno popuštanje; --kf-pulsna skala-od: 0,8; --kf-neprozirnost-pulsa-od: 0,2; /* skala i puls neprozirnosti */ }
Pogledajte Pen Keyframes Tokens - Demo 6 [forked] od Amita Sheena. Ovaj pojedinačni kf-pulse ključni kadar može podnijeti sve, od suptilnog privlačenja pozornosti do dramatičnih istaknutih trenutaka, a sve to lako prilagoditi. Napredno ublažavanje Jedna od sjajnih stvari u vezi s korištenjem tokena ključnih kadrova je koliko je lako proširiti našu knjižnicu animacija i pružiti efekte koje većina programera ne bi zamarala pisati od nule, poput elastičnosti ili odbijanja. Ovdje je primjer jednostavnog "odskočnog" tokena ključnih kadrova koji koristi prilagođeno svojstvo --kf-bounce-from za kontrolu visine skoka. /* * Bounce - poskakujuća ulazna animacija * Koristite --kf-bounce-from za kontrolu visine skoka * Zadano: skače od 100vh (izvan zaslona) * Upotreba: * animacija: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // skok s visine od 200px */
@keyframes kf-bounce { 0% { prevedi: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { prevedi: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { prevedi: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { prevedi: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { prevedi: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { prevedi: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { prevedi: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { prevesti: 0 0; funkcija mjerenja vremena animacije: popuštanje; } }
Animacije poput "elastične" malo su složenije zbog izračuna unutar ključnih okvira. Moramo zasebno definirati --kf-elastic-from-X i --kf-elastic-from-Y (oboje su izborno), a zajedno nam omogućuju stvaranje elastičnog ulaza s bilo koje točke na ekranu.
/* * Elastic In - elastična ulazna animacija * Koristite --kf-elastic-from-X i --kf-elastic-from-Y za kontrolu početne pozicije * Zadano: ulazi s gornje sredine (0, -100vh) * Upotreba: * animacija: kf-elastic-in 2s ease-in-out oba; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // unesite od (-50px, -200px) */
@keyframes kf-elastic-in { 0% { prevedi: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { prevedi: 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% { prevedi: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { prevedi: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { prevedi: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88% { prevedi: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100% { prevesti: 0 0; } }
Ovaj pristup olakšava ponovnu upotrebu i prilagodbu naprednih ključnih okvira u našem projektu, samo promjenom jednog prilagođenog svojstva.
.bounce-and-zoom { animacija: kf-bounce 3s lagano uvlačenje, kf-zoom 3s linearni; --kf-zoom-from: 0; }
.bounce-and-slide { animacija-kompozicija: dodati; /* Obje animacije koriste prijevod */ animacija: kf-bounce 3s lagano uvlačenje, kf-slide-in 3s lagano izvlačenje; --kf-slide-from: -200px; }
.elastic-in { animacija: kf-elastic-in 2s ease-in-out oba; }
Pogledajte Pen Keyframes Tokens - Demo 7 [forked] od Amita Sheena. Do ove točke vidjeli smo kako možemo konsolidirati ključne okvire na pametan i učinkovit način. Naravno, možda biste željeli prilagoditi stvari kako bi bolje odgovarale potrebama vašeg projekta, ali mi smo pokrili primjere nekoliko uobičajenih animacija i slučajeva svakodnevne upotrebe. A s ovim tokenima ključnih okvira sada imamo snažne građevne blokove za stvaranje dosljednih animacija koje se mogu održavati u cijelom projektu. Nema više dupliciranih ključnih okvira, nema više sukoba globalnog opsega. Samo čist, praktičan način za rješavanje svih naših potreba za animacijom. Ali pravo pitanje glasi: Kako sastaviti te građevne blokove zajedno? Sve zajedno Vidjeli smo da je kombiniranje osnovnih tokena ključnih okvira jednostavno. Ne treba nam ništa posebno nego definirati prvu animaciju, definirati drugu, namjestiti varijable po potrebi i to je to. /* Fade in + slide in */ .toast { animacija: kf-fade-in 0,4s, kf-slide-in 0,4s kubični bezier (0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Povećaj + blijedi */ .modal { animacija: kf-fade-in 0,3 s, kf-zoom 0,3 s kubični bezier (0,34, 1,56, 0,64, 1); --kf-zoom-od: 0,7; --kf-zoom-to: 1; }
/* Uklizavanje + puls */ .obavijest { animacija: kf-slide-in 0,5s, kf-pulse 1.2s lagano ulaženje-izlaz beskonačno naizmjenično; --kf-slide-from: -100px 0; --kf-pulsna skala-od: 0,95; --kf-pulsna skala-do: 1,05; }
Ove kombinacije funkcioniraju prekrasno jer svaka animacija cilja na različito svojstvo: neprozirnost, transformaciju (prevođenje/razmjer), itd. Ali ponekad postoje sukobi i moramo znati zašto i kako se s njima nositi. Kada dvije animacije pokušaju animirati isto svojstvo - na primjer, obje animiraju skalu ili obje animiraju neprozirnost - rezultat neće biti onakav kakav očekujete. Prema zadanim postavkama samo se jedna od animacija zapravo primjenjuje na to svojstvo, koje je posljednje na popisu animacija. Ovo je ograničenje načina na koji CSS obrađuje više animacija na istom svojstvu. Na primjer, ovo neće raditi kako je predviđeno jer će se primijeniti samo animacija kf-pulsa. .bad-combo { animacija: kf-zoom 0,5 s naprijed, kf-puls 1.2s beskonačno naizmjenično; --kf-zoom-od: 0,5; --kf-zoom-to: 1,2; --kf-pulsna skala-od: 0,8; --kf-pulsna skala-do: 1,1; }
Dodatak za animaciju Najjednostavniji i najizravniji način rukovanja višestrukim animacijama koje utječu na isto svojstvo jest korištenje svojstva sastava animacije. U posljednjem primjeru iznad, kf-pulsna animacija zamjenjuje kf-zoom animaciju, tako da nećemo vidjeti početno zumiranje i nećemo dobiti očekivanu skalu od 1,2. Postavljanjem sastava animacije za dodavanje, kažemo pregledniku da kombinira obje animacije. To nam daje rezultat koji želimo. .component-two { animacija-kompozicija: dodati; }
Pogledajte Pen Keyframes Tokens - Demo 8 [forked] od Amita Sheena. Ovaj pristup dobro funkcionira u većini slučajeva kada želimo kombinirati učinke na istom svojstvu. 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 točno gdje želimo, a zatim ga želimo animirati s kf-slide-in ključnim okvirima, dobivamo gadan vidljiv skok bez kompozicije animacije. Pogledajte Pen Keyframes Tokens - Demo 9 [forked] od Amita Sheena. S postavljenom animacijskom kompozicijom za dodavanje, animacija se glatko kombinira s postojećomtransformirati, tako da element ostaje na mjestu i animira se prema očekivanjima. Animacija Teturanje Drugi način rukovanja s višestrukim animacijama je njihovo "postavljanje" - to jest, započinjanje druge animacije malo nakon završetka prve. To nije rješenje koje radi za svaki slučaj, ali je korisno kada imamo ulaznu animaciju nakon koje slijedi kontinuirana animacija. /* blijedi + puls neprozirnosti */ .obavijest { animacija: kf-fade-in 2s ease-out, kf-puls 0,5s 2s lagano ulaženje-izlaz beskonačno naizmjenično; --kf-neprozirnost-pulsa-do: 0,5; }
Pogledajte Pen Keyframes Tokens - Demo 10 [forked] od Amita Sheena. Narudžba je važna Velik dio animacija s kojima radimo koristi svojstvo transformacije. U većini slučajeva to je jednostavno praktičnije. Također ima prednost u izvedbi jer se animacije transformacije mogu ubrzati GPU-om. Ali ako koristimo transformacije, moramo prihvatiti da je bitan redoslijed kojim izvodimo naše transformacije. Puno. U našim dosadašnjim ključnim okvirima koristili smo pojedinačne transformacije. Prema specifikacijama, oni se uvijek primjenjuju fiksnim redoslijedom: prvo se element premjesti, zatim zakrene, pa skalira. Ovo ima smisla i to je ono što većina nas očekuje. Međutim, ako koristimo svojstvo transformacije, redoslijed kojim su funkcije napisane je redoslijed kojim se primjenjuju. U ovom slučaju, ako pomaknemo nešto za 100 piksela na X-osi i zatim to rotiramo za 45 stupnjeva, to nije isto kao da to prvo rotiramo za 45 stupnjeva, a zatim pomaknemo za 100 piksela. /* Ružičasti kvadrat: prvo prevedi, a zatim zakreni */ .example-one { transformacija: translateX(100px) rotacija(45deg); }
/* Zeleni kvadrat: Prvo rotiraj, zatim prevedi */ .example-two { transformacija: rotacija(45deg) translateX(100px); }
Pogledajte Pen Keyframes Tokens - Demo 11 [forked] od Amita Sheena. Ali prema redoslijedu transformacije, sve pojedinačne transformacije - sve što smo upotrijebili za tokene ključnih okvira - događa se prije funkcija transformacije. To znači da će se sve što postavite u svojstvu transformacije dogoditi nakon animacija. Ali ako postavite, na primjer, prijevod zajedno s ključnim okvirima kf-spin, prijevod će se dogoditi prije animacije. Još ste zbunjeni?! To dovodi do situacija u kojima statične vrijednosti mogu uzrokovati različite rezultate za istu animaciju, kao u sljedećem slučaju:
/* Zajednička animacija za oba spinnera */ .spinner { animacija: kf-spin 1s linearno beskonačno; }
/* Pink spinner: prevedi prije rotiranja (pojedinačna transformacija) */ .spinner-pink { prijevod: 100% 50%; }
/* Zeleni spinner: rotiraj pa prevedi (redoslijed funkcija) */ .spinner-green { transformiraj: prevedi (100%, 50%); }
Pogledajte Pen Keyframes Tokens - Demo 12 [forked] od Amita Sheena. Možete vidjeti da prvi spiner (ružičasti) dobiva translator koji se događa prije rotacije kf-spina, pa se prvo pomiče na svoje mjesto, a zatim se vrti. Drugi spinner (zeleni) dobiva funkciju translate() koja se događa nakon pojedinačne transformacije, tako da se element prvo okreće, a zatim pomiče u odnosu na svoj trenutni kut, i dobivamo efekt široke orbite. Ne, ovo nije greška. To je samo jedna od onih stvari koje trebamo znati o CSS-u i imati na umu kada radimo s više animacija ili više transformacija. Ako je potrebno, također možete stvoriti dodatni skup kf-spin-alt ključnih okvira koji rotiraju elemente pomoću funkcije rotate(). Smanjeno kretanje I dok govorimo o alternativnim ključnim okvirima, ne možemo zanemariti opciju "bez animacije". Jedna od najvećih prednosti korištenja tokena ključnih okvira jest ta da se pristupačnost može ugraditi, a to je zapravo prilično jednostavno 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 glatko iskustvo koje manje ometa, bez dodatnog rada ili dupliciranja koda. Točno značenje "Smanjeno kretanje" 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 sličica Dok se neke animacije mogu ublažiti ili usporiti, postoje druge koje bi trebale potpuno nestati kada se zahtijeva smanjeno kretanje. Pulsne animacije su dobar primjer. Kako bismo bili sigurni da se ove animacije ne izvode u smanjenom načinu rada, možemo ih jednostavno zamotati u odgovarajući medijski upit.
@media (preferira-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); } } }
To osigurava da korisnici koji su postavili prefers-reduced-motion za smanjenje neće vidjeti animaciju i dobit će iskustvo koje odgovara njihovim željama. Instant In Postoje neki ključni okviri koje ne možemo jednostavno ukloniti, poput ulaznih animacija. Vrijednost se mora mijenjati, mora animirati; inače element neće imati točne vrijednosti. Ali u smanjenom kretanju, ovaj prijelaz s početne vrijednosti trebao bi biti trenutačni. Da bismo to postigli, definirat ćemo dodatni skup ključnih okvira gdje vrijednost odmah skače na krajnje stanje. Oni postaju naši zadani ključni okviri. Zatim ćemo dodati obične ključne okvire unutar medijskog upita za prefers-reduced-motion postavljen na no-preference, baš kao u prethodnom primjeru. /* uskoči odmah za smanjeno kretanje */ @keyframes kf-zoom { od, do { skala: var(--kf-zoom-to, 1); } }
@media (preferira-reduced-motion: no-preference) { /* Izvorni ključni kadrovi zumiranja */ @keyframes kf-zoom { od { skala: var(--kf-zoom-from, 0,8); } do { skala: var(--kf-zoom-to, 1); } } }
Na taj će način korisnici koji preferiraju smanjeno kretanje vidjeti element koji se trenutno pojavljuje u svom konačnom stanju, dok će svi ostali dobiti animirani prijelaz. Meki pristup Postoje slučajevi u kojima želimo zadržati neke pokrete, ali mnogo mekše i smirenije od originalne animacije. Na primjer, odskočni ulaz možemo zamijeniti blagim zatamnjenjem.
@keyframes kf-bounce { /* Lagano zatamnjenje za smanjeno kretanje */ }
@media (preferira-reduced-motion: no-preference) { @keyframes kf-bounce { /* Izvorni odbijajući ključni kadrovi */ } }
Sada korisnici s omogućenom smanjenom kretnjom i dalje imaju osjećaj izgleda, ali bez intenzivnog kretanja odskoka ili elastične animacije. S postavljenim sastavnim dijelovima, sljedeće je pitanje kako ih učiniti dijelom stvarnog tijeka rada. Pisanje fleksibilnih ključnih okvira jedna je stvar, ali da bi ih učinili pouzdanima u velikom projektu potrebno je nekoliko strategija koje sam morao naučiti na teži način. Strategije implementacije i najbolje prakse Nakon što dobijemo solidnu biblioteku tokena ključnih sličica, pravi je izazov kako ih unijeti u svakodnevni rad.
U iskušenju je ispustiti sve ključne okvire odjednom i proglasiti problem riješenim, ali u praksi sam otkrio da najbolji rezultati dolaze postupnim usvajanjem. Počnite s najčešćim animacijama, kao što su blijeđenje ili klizanje. Ovo su laki dobici koji pokazuju trenutačnu vrijednost bez potrebe za velikim prepisivanjem. Imenovanje je još jedna točka koja zaslužuje pozornost. Konzistentan prefiks ili imenski prostor čini jasnim koje su animacije tokeni, a koje lokalne jednokratne. Također sprječava slučajne sudare i pomaže novim članovima tima da na prvi pogled prepoznaju zajednički sustav. Dokumentacija je jednako važna kao i sam kod. Čak i kratki komentar iznad svakog tokena ključnih sličica može kasnije uštedjeti sate nagađanja. Programer bi trebao biti u mogućnosti otvoriti datoteku tokena, skenirati učinak koji im je potreban i kopirati obrazac korištenja ravno u svoju komponentu. Fleksibilnost je ono zbog čega je ovaj pristup vrijedan truda. Izlažući osjetljiva prilagođena svojstva, timovima dajemo prostor za prilagodbu animacije bez kvara na sustavu. U isto vrijeme pokušajte ne komplicirati previše. Osigurajte bitne gumbe, a ostalo držite mišljenjem. Na kraju, sjetite se pristupačnosti. Ne treba svaka animacija alternativu smanjenog kretanja, ali mnoge je trebaju. Rano uvođenje ovih prilagodbi znači da ih više nikada ne moramo naknadno ugrađivati, a to pokazuje razinu brige koju će naši korisnici primijetiti čak i ako to nikad ne spomenu.
Prema mom iskustvu, tretiranje tokena ključnih okvira kao dijela našeg radnog tijeka dizajna tokena ono je što ih čini postojanim. Jednom kada su postavljeni, prestaju se osjećati kao specijalni efekti i postaju dio dizajnerskog jezika, prirodno proširenje načina na koji se proizvod kreće i reagira. Zamotavanje Animacije mogu biti jedan od najradosnijih dijelova izgradnje sučelja, ali bez strukture mogu postati i jedan od najvećih izvora frustracija. 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 sustav. Prava vrijednost nije samo u spremanju nekoliko redaka koda. To je u povjerenju da kada koristite fade, slajd, zumiranje ili vrtnju, točno znate kako će se to ponašati u cijelom projektu. To je u fleksibilnosti koja dolazi iz prilagođenih svojstava bez kaosa beskrajnih varijacija. I to je u pristupačnosti koja je ugrađena u temelj, a ne dodana kaonaknadna misao. Vidio sam kako te ideje rade u različitim timovima i različitim bazama koda, a uzorak je uvijek isti. Nakon što su tokeni postavljeni, ključni okviri prestaju biti raspršena zbirka trikova i postaju dio dizajnerskog jezika. Oni čine proizvod namjernijim, dosljednijim i življim. Ako uzmete jednu stvar iz ovog članka, neka to bude sljedeće: animacije zaslužuju istu brigu i strukturu koju već pridajemo bojama, tipografiji i razmacima. Mala investicija u tokene ključnih sličica isplati se svaki put kada se vaše sučelje pomakne.
