Predstavljajte si to: pridružite se novemu projektu, se poglobite v kodno zbirko in v prvih nekaj urah odkrijete nekaj frustrirajoče znanega. Raztresene po slogovnih listah najdete več definicij @keyframes za iste osnovne animacije. Trije različni učinki zatemnitve, dve ali tri različice diapozitivov, peščica animacij povečave in vsaj dve različni animaciji vrtenja, kajti, zakaj pa ne? @keyframes pulse { od { merilo: 1; } v { merilo: 1,1; } }
@keyframes bigger-pulse { 0 %, 20 %, 100 % { merilo: 1; } 10 %, 40 % { merilo: 1,2; } }
Če se ta scenarij sliši znano, niste sami. Po mojih izkušnjah pri različnih projektih je ena najbolj doslednih hitrih zmag, ki jih lahko dosežem, konsolidacija in standardizacija ključnih sličic. Postal je tako zanesljiv vzorec, da se zdaj veselim tega čiščenja kot ene svojih prvih nalog na kateri koli novi kodni bazi. Logika v ozadju kaosa Ta odvečnost je popolnoma smiselna, če pomislite na to. Vsi uporabljamo enake temeljne animacije pri vsakodnevnem delu: zbledi, diapozitive, povečave, vrtenja in druge pogoste učinke. Te animacije so precej enostavne in preprosto je pripraviti hitro definicijo @keyframes, da opravite delo. Brez centraliziranega animacijskega sistema razvijalci te ključne sličice seveda pišejo iz nič, ne da bi vedeli, da podobne animacije že obstajajo drugje v kodni bazi. To je še posebej pogosto pri delu v arhitekturah, ki temeljijo na komponentah (kar danes počne večina od nas), saj ekipe pogosto delajo vzporedno v različnih delih aplikacije. rezultat? Kaos v animaciji. Majhen problem Najbolj očitni težavi s podvajanjem ključnih sličic sta izgubljen razvojni čas in nepotrebna napihnjenost kode. Več definicij ključnih okvirjev pomeni več mest za posodobitev, ko se zahteve spremenijo. Ali morate prilagoditi čas svoje bledeče animacije? Poiskati boste morali vsak primerek v vaši kodni bazi. Želite standardizirati funkcije sproščanja? Vso srečo pri iskanju vseh različic. Zaradi tega množenja vzdrževalnih točk postane celo preprosta posodobitev animacije zamudna naloga. Večji problem To podvajanje ključnih sličic ustvarja veliko bolj zahrbtno težavo, ki se skriva pod površjem: past globalnega obsega. Tudi pri delu z arhitekturami, ki temeljijo na komponentah, so ključni okvirji CSS vedno definirani v globalnem obsegu. To pomeni, da se vsi ključni okvirji nanašajo na vse komponente. Vedno. Da, vaša animacija ne uporablja nujno ključnih sličic, ki ste jih definirali v svoji komponenti. Uporablja zadnje ključne sličice, ki se ujemajo s popolnoma enakim imenom, ki je bilo naloženo v globalni obseg. Dokler so vse vaše ključne sličice enake, se to morda zdi manjša težava. Toda v trenutku, ko želite prilagoditi animacijo za določen primer uporabe, ste v težavah ali še huje, povzročite jih sami. Ali vaša animacija ne bo delovala, ker se je druga komponenta naložila za vašo in prepisala vaše ključne sličice, ali pa se vaša komponenta naloži zadnja in pomotoma spremeni vedenje animacije za vsako drugo komponento, ki uporablja ime te ključne sličice, pa se tega morda sploh ne zavedate. Tukaj je preprost primer, ki prikazuje težavo: .component-one { /* slogi komponent */ animacija: impulz 1s popuščanje-izstop neskončno izmenično; }
/* ta definicija @keyframes ne bo delovala */ @keyframes pulse { od { merilo: 1; } v { merilo: 1,1; } }
/* kasneje v kodi... */
.component-two { /* slogi komponent */ animacija: impulz 1s popuščanje-izstop neskončno; }
/* ta ključni okvir bo veljal za obe komponenti */ @keyframes pulse { 0 %, 20 %, 100 % { merilo: 1; } 10 %, 40 % { merilo: 1,2; } }
Obe komponenti uporabljata isto ime animacije, vendar druga definicija @keyframes prepiše prvo. Zdaj bosta tako komponenta ena kot komponenta dve uporabljali druge ključne sličice, ne glede na to, katera komponenta je definirala katere ključne sličice. Oglejte si žetone Pen Keyframes – Demo 1 [forked] avtorja Amita Sheena. Najslabši del? To pogosto odlično deluje pri lokalnem razvoju, vendar se skrivnostno prekine v proizvodnji, ko procesi gradnje spremenijo vrstni red nalaganja vaših datotek slogov. Na koncu dobite animacije, ki se obnašajo drugače, odvisno od tega, katere komponente so naložene in v kakšnem zaporedju. Rešitev: poenotene ključne sličice Odgovor na ta kaos je presenetljivo preprost: vnaprej določeni dinamični ključni okvirji, shranjeni v skupni tabeli slogov. Namesto da bi vsaki komponenti dovolili, da definira lastne animacije, ustvarjamo centralizirane ključne sličice, ki so dobro dokumentirane in enostavne zauporaben, vzdržljiv in prilagojen posebnim potrebam vašega projekta. Zamislite si to kot žetone ključnih sličic. Tako kot uporabljamo žetone za barve in razmike in mnogi od nas že uporabljajo žetone za lastnosti animacije, kot so trajanje in funkcije sproščanja, zakaj ne bi žetonov uporabili tudi za ključne sličice? Ta pristop se lahko naravno integrira s katerim koli trenutnim potekom dela žetona oblikovanja, ki ga uporabljate, hkrati pa reši tako majhno težavo (podvajanje kode) kot večjo težavo (konflikti globalnega obsega) naenkrat. Zamisel je preprosta: ustvarite en sam vir resnice za vse naše skupne animacije. Ta slogovna tabela v skupni rabi vsebuje skrbno oblikovane ključne sličice, ki pokrivajo animacijske vzorce, ki jih naš projekt dejansko uporablja. Nič več ugibanja, ali bledeča animacija že obstaja nekje v naši kodni bazi. Nič več nenamernega prepisovanja animacij iz drugih komponent. Toda tukaj je ključ: to niso samo statične animacije kopiraj in prilepi. Zasnovani so tako, da so dinamični in jih je mogoče prilagoditi prek lastnosti po meri CSS, kar nam omogoča, da ohranimo doslednost, hkrati pa imamo še vedno prilagodljivost za prilagajanje animacij posebnim primerom uporabe, na primer, če potrebujete nekoliko večjo animacijo »pulza« na enem mestu. Gradnja prvega žetona Keyframes Eden od prvih nizko visečih plodov, ki bi se jih morali lotiti, je animacija »zatemnitev«. V enem svojih nedavnih projektov sem našel več kot ducat ločenih definicij zatemnitve in ja, vse so preprosto animirale motnost z 0 na 1. Torej, ustvarimo novo slogovno tabelo, poimenujmo jo kf-tokens.css, jo uvozimo v naš projekt in vanjo postavimo ključne okvirje z ustreznimi komentarji. /* keyframes-tokens.css */
/* * Fade In - zbledi vstopna animacija * Uporaba: animacija: kf-fade-in 0,3 s umiritev; */ @keyframes kf-fade-in { od { motnost: 0; } v { motnost: 1; } }
Ta ena sama deklaracija @keyframes nadomešča vse tiste razpršene zatemnitvene animacije po naši kodni bazi. Čisto, preprosto in globalno uporabno. In zdaj, ko imamo ta žeton definiran, ga lahko uporabimo iz katere koli komponente v našem projektu: .modal { animacija: kf-fade-in 0,3 s umiritev; }
.tooltip { animacija: kf-fade-in 0,2s enostavnost-in-out; }
.notification { animacija: kf-fade-in 0,5 s umiritev; }
Oglejte si žetone Pen Keyframes - Demo 2 [forked] avtorja Amita Sheena. Opomba: v vseh naših imenih @keyframes uporabljamo predpono kf-. Ta predpona služi kot imenski prostor, ki preprečuje konflikte poimenovanja z obstoječimi animacijami v projektu in takoj pojasni, da ti ključni okvirji prihajajo iz naše datoteke žetonov ključnih okvirjev. Izdelava dinamičnega diapozitiva Ključni okvirji kf-fade-in delujejo odlično, ker so preprosti in je malo prostora, da bi kaj pokvarili. Pri drugih animacijah pa moramo biti veliko bolj dinamični in tukaj lahko izkoristimo ogromno moč lastnosti CSS po meri. Tukaj žetoni ključnih sličic resnično blestijo v primerjavi z razpršenimi statičnimi animacijami. Vzemimo pogost scenarij: "drsne" animacije. Toda od kod priti? 100px od desne? 50% z leve? Ali naj vstopi z vrha zaslona? Ali morda priplavate z dna? Toliko možnosti, vendar namesto ustvarjanja ločenih ključnih okvirjev za vsako smer in vsako različico lahko zgradimo en prilagodljiv žeton, ki se prilagaja vsem scenarijem: /* * Slide In - usmerjena diapozitivna animacija * Za nadzor smeri uporabite --kf-slide-from * Privzeto: drsi z leve (-100%) * Uporaba: * animacija: kf-slide-in 0,3s umirjanje-ven; * --kf-slide-from: -100px 0; // drsi z leve * --kf-slide-from: 100px 0; // drsi z desne * --kf-slide-from: 0 -50px; // drsi od zgoraj */
@keyframes kf-slide-in { od { prevedi: var(--kf-slide-from, -100% 0); } v { prevedi: 0 0; } }
Zdaj lahko uporabimo ta en žeton @keyframes za katero koli smer diapozitiva preprosto tako, da spremenimo lastnost po meri --kf-slide-from: .sidebar { animacija: kf-slide-in 0,3s umirjanje-ven; /* Uporablja privzeto vrednost: diapozitivi z leve */ }
.notification { animacija: kf-slide-in 0,4s umirjanje-ven; --kf-slide-from: 0 -50px; /* drsi od zgoraj */ }
.modal { animacija: kf-fade-in 0,5 s, kf-slide-in 0,5 s kubični bezier (0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* drsi od spodaj desno */ }
Ta pristop nam daje neverjetno prilagodljivost, hkrati pa ohranja doslednost. Ena deklaracija ključne sličice, neskončne možnosti. Oglejte si žetone Pen Keyframes – Demo 3 [forked] Amita Sheena. In če želimo narediti naše animacije še bolj prilagodljive in omogočiti tudi učinke "drsenja navzven", lahkopreprosto dodajte lastnost po meri --kf-slide-to, podobno temu, kar bomo videli v naslednjem razdelku. Dvosmerne ključne sličice povečave Druga pogosta animacija, ki se podvaja med projekti, so učinki »zoom«. Ne glede na to, ali gre za subtilno povečavo za zdravice, dramatično povečavo za modale ali nežen učinek pomanjšanja za naslove, animacije povečave so povsod. Namesto ustvarjanja ločenih ključnih sličic za vsako vrednost lestvice, zgradimo en prilagodljiv nabor ključnih sličic kf-zoom:
/* * Zoom - skala animacije * Uporabite --kf-zoom-from in --kf-zoom-to za nadzor vrednosti lestvice * Privzeto: povečava od 80 % do 100 % (0,8 do 1) * Uporaba: * animacija: kf-zoom 0,2s umirjanje; * --kf-zoom-od: 0,5; --kf-zoom-to: 1; // povečava od 50 % do 100 % * --kf-zoom-from: 1; --kf-zoom-to: 0; // povečava od 100 % do 0 % * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // povečava od 100 % do 110 % */
@keyframes kf-zoom { od { lestvica: var(--kf-zoom-from, 0,8); } v { merilo: var(--kf-zoom-to, 1); } }
Z eno definicijo lahko dosežemo katero koli različico povečave, ki jo potrebujemo: .toast { animacija: kf-slide-in 0,2s, kf-zoom 0,4 s umirjanje; --kf-slide-from: 0 100 %; /* drsi od zgoraj */ /* Uporablja privzeto povečavo: obsega od 80 % do 100 % */ }
.modal { animacija: kf-zoom 0,3 s cubic-bezier (0,34, 1,56, 0,64, 1); --kf-zoom-od: 0; /* dramatičen zoom 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; /* nežno pomanjšanje */ }
Privzeta vrednost 0,8 (80 %) deluje odlično za večino elementov uporabniškega vmesnika, kot so toast sporočila in kartice, hkrati pa jo je še vedno enostavno prilagoditi za posebne primere. Oglejte si žetone Pen Keyframes – Demo 4 [forked] avtorja Amita Sheena. V nedavnih primerih ste morda opazili nekaj zanimivega: združevali smo animacije. Ena od ključnih prednosti dela z žetoni @keyframes je, da so zasnovani tako, da se brezhibno integrirajo drug z drugim. Ta gladka kompozicija je namerna, ne naključna. O sestavi animacije bomo podrobneje razpravljali kasneje, vključno s tem, kje lahko postanejo problematične, vendar je večina kombinacij enostavnih in enostavnih za izvedbo. Opomba: med pisanjem tega članka in morda zaradi njegovega pisanja sem ugotovil, da ponovno razmišljam o celotni ideji vstopnih animacij. Ali jih ob vsem nedavnem napredku CSS sploh še potrebujemo? Na srečo je Adam Argyle raziskal ista vprašanja in jih briljantno izrazil v svojem blogu. To ni v nasprotju s tem, kar je tukaj napisano, vendar predstavlja pristop, ki ga je vredno upoštevati, še posebej, če so vaši projekti močno odvisni od vstopnih animacij. Neprekinjene animacije Medtem ko se vstopne animacije, kot so »bledenje«, »drsenje« in »povečevanje«, zgodijo enkrat in nato ustavijo, se neprekinjene animacije ponavljajo v nedogled, da pritegnejo pozornost ali nakažejo tekočo dejavnost. Dve najpogostejši neprekinjeni animaciji, ki ju srečam, sta »vrtenje« (za indikatorje nalaganja) in »utrip« (za poudarjanje pomembnih elementov). Te animacije predstavljajo edinstvene izzive, ko gre za ustvarjanje žetonov ključnih sličic. Za razliko od vstopnih animacij, ki običajno prehajajo iz enega stanja v drugo, morajo biti neprekinjene animacije zelo prilagodljive v svojih vzorcih obnašanja. Spin doktor Zdi se, da vsak projekt uporablja več vrtljivih animacij. Nekateri se vrtijo v smeri urinega kazalca, drugi v nasprotni smeri urinega kazalca. Nekateri naredijo eno 360-stopinjsko rotacijo, drugi naredijo več obratov za hitrejši učinek. Namesto ustvarjanja ločenih ključnih okvirjev za vsako različico, zgradimo eno prilagodljivo vrtenje, ki obravnava vse scenarije:
/* * Vrtenje - rotacijska animacija * Uporabite --kf-spin-from in --kf-spin-to za nadzor obsega vrtenja * Za nadzor količine vrtenja uporabite --kf-spin-turns * Privzeto: vrti se od 0 do 360 stopinj (1 polni obrat) * Uporaba: * animacija: kf-spin 1s linearno neskončno; * --kf-spin-obrati: 2; // 2 polni vrtljaji * --kf-spin-od: 0deg; --kf-spin-to: 180deg; // polovična rotacija * --kf-spin-od: 0deg; --kf-spin-to: -360deg; // v nasprotni smeri urinega kazalca */
@keyframes kf-spin { od { vrtenje: var(--kf-spin-from, 0deg); } v { vrtenje: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Zdaj lahko ustvarimo katero koli različico vrtenja, ki nam je všeč:
.loading-spinner { animacija: kf-spin 1s linearno neskončno; /* Uporablja privzeto: vrti se od 0deg do 360deg */ }
.fast-loader { animacija: kf-spin 1.2s neskončno izmenično sproščanje v ven; --kf-spin-obrati: 3; /* 3 polni obrati za vsako smer na cikel*/ }
.steped-reverse { animacija: kf-spin 1,5s koraki(8) neskončno; --kf-spin-to: -360deg; /* v nasprotni smeri urinega kazalca */ }
.subtle-wiggle { animacija: kf-spin 2s ease-in-out neskončno izmenično; --kf-spin-od: -16deg; --kf-spin-to: 32deg; /* premikanje 36 stopinj: med -18 stopinj in +18 stopinj */ }
Oglejte si žetone Pen Keyframes – Demo 5 [forked] avtorja Amita Sheena. Lepota tega pristopa je v tem, da isti ključni okvirji delujejo za nalaganje vrtljivih ikon, vrtljivih ikon, učinkov premikanja in celo zapletenih večobratnih animacij. Paradoks pulza Pulzne animacije so težje, ker lahko »utripajo« različne lastnosti. Nekateri utripajo lestvico, drugi utripajo motnost, nekateri pa utripajo barvne lastnosti, kot sta svetlost ali nasičenost. Namesto ustvarjanja ločenih ključnih okvirjev za vsako lastnost, lahko ustvarimo ključne okvirje, ki delujejo s katero koli lastnostjo CSS. Tukaj je primer impulzne ključne sličice z možnostmi obsega in motnosti:
/* * Utrip - utripajoča animacija * Za nadzor obsega lestvice uporabite --kf-pulse-scale-from in --kf-pulse-scale-to * Za nadzor obsega motnosti uporabite --kf-pulse-opacity-from in --kf-pulse-opacity-to * Privzeto: brez utripa (vse vrednosti 1) * Uporaba: * animacija: kf-pulse 2s ease-in-out neskončno izmenično; * --kf-pulzna lestvica-od: 0,95; --kf-pulzna lestvica-do: 1,05; // merilni utrip * --kf-pulse-motnost-od: 0,7; --kf-pulse-motnost-to: 1; // impulz motnosti */
@keyframes kf-pulse { od { lestvica: var(--kf-pulse-scale-from, 1); motnost: var(--kf-pulse-opacity-from, 1); } v { lestvica: var(--kf-pulse-scale-to, 1); motnost: var(--kf-pulse-opacity-to, 1); } }
To ustvari prilagodljiv utrip, ki lahko animira več lastnosti: .call-to-action { animacija: kf-pulz 0,6 s neskončno izmenično; --kf-motnost-pulza-od: 0,5; /* impulz motnosti */ }
.notification-dot { animacija: kf-pulz 0,6 s enostavnost vstopanja in izstopanja neskončno izmenično; --kf-pulzna lestvica-od: 0,9; --kf-pulzna lestvica-na: 1,1; /* merilni utrip */ }
.text-highlight { animacija: kf-pulz 1,5 s neskončno popuščanje; --kf-pulzna lestvica-od: 0,8; --kf-pulzna motnost-od: 0,2; /* merilo in impulz motnosti */ }
Oglejte si žetone Pen Keyframes – Demo 6 [forked] Amita Sheena. Ta en sam kf-pulzni ključni okvir zmore vse, od subtilnega pritegovanja pozornosti do dramatičnih poudarkov, hkrati pa ga je enostavno prilagoditi. Napredno popuščanje Ena od odličnih stvari pri uporabi žetonov ključnih sličic je, kako enostavno je razširiti našo knjižnico animacij in zagotoviti učinke, ki se jih večina razvijalcev ne bi trudila napisati iz nič, na primer elastičnost ali odboj. Tukaj je primer preprostega žetona ključnih sličic »odboj«, ki uporablja lastnost po meri --kf-bounce-from za nadzor višine skoka. /* * Bounce - poskakujoča vstopna animacija * Za nadzor višine skoka uporabite --kf-bounce-from * Privzeto: skoči s 100vh (izven zaslona) * Uporaba: * animacija: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // skok z višine 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 % { prevedi: 0 0; funkcija-časovne-animacije: umiritev; } }
Animacije, kot je »elastična«, so nekoliko težje zaradi izračunov znotraj ključnih sličic. Ločeno moramo definirati --kf-elastic-from-X in --kf-elastic-from-Y (oba sta neobvezna), skupaj pa nam omogočata, da ustvarimo elastičen vhod s katere koli točke na zaslonu.
/* * Elastic In - elastična vstopna animacija * Uporabite --kf-elastic-from-X in --kf-elastic-from-Y za nadzor začetnega položaja * Privzeto: vstopi od zgoraj na sredini (0, -100vh) * Uporaba: * animacija: kf-elastic-in 2s ease-in-out obeh; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // vnesite 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 % { prevedi: 0 0; } }
Ta pristop olajša ponovno uporabo in prilagajanje naprednih ključnih sličic v našem projektu, tako da spremenite eno lastnost po meri.
.bounce-and-zoom { animacija: kf-bounce 3s ease-in, kf-zoom 3s linearni; --kf-zoom-od: 0; }
.bounce-and-slide { animacija-kompozicija: dodaj; /* Obe animaciji uporabljata prevajalnik */ animacija: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-slide-from: -200px; }
.elastic-in { animacija: kf-elastic-in 2s ease-in-out obeh; }
Oglejte si žetone Pen Keyframes – Demo 7 [forked] Amita Sheena. Do te točke smo videli, kako lahko konsolidiramo ključne okvirje na pameten in učinkovit način. Seveda boste morda želeli prilagoditi stvari, da bodo bolje ustrezale potrebam vašega projekta, vendar smo obravnavali primere več običajnih animacij in primerov vsakodnevne uporabe. In s temi žetoni ključnih sličic imamo zdaj močne gradnike za ustvarjanje doslednih animacij, ki jih je mogoče vzdrževati v celotnem projektu. Nič več podvojenih ključnih sličic, nič več konfliktov globalnega obsega. Samo čist in priročen način za reševanje vseh naših potreb po animaciji. Toda pravo vprašanje je: Kako te gradnike sestavimo skupaj? Vse to skupaj Videli smo, da je združevanje osnovnih žetonov ključnih okvirjev preprosto. Ne potrebujemo nič posebnega, kot da definiramo prvo animacijo, definiramo drugo, nastavimo spremenljivke po potrebi in to je to. /* Zbledi + zdrsni */ .toast { animacija: kf-fade-in 0,4 s, kf-slide-in 0,4s kubični-bezier (0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Povečaj + zbledi */ .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; }
/* Potisnite noter + impulz */ .notification { animacija: kf-slide-in 0,5 s, kf-pulz 1,2 s neskončno izmenično sproščanje in izstopanje; --kf-slide-from: -100px 0; --kf-pulzna lestvica-od: 0,95; --kf-pulzna lestvica-do: 1,05; }
Te kombinacije delujejo čudovito, ker vsaka animacija cilja na drugačno lastnost: motnost, preoblikovanje (prevajanje/razširitev) itd. Toda včasih pride do konfliktov, zato moramo vedeti, zakaj in kako jih obravnavati. Ko dve animaciji poskušata animirati isto lastnost - na primer obe animirata merilo ali obe animirata motnost - rezultat ne bo tak, kot ste pričakovali. Privzeto je samo ena od animacij dejansko uporabljena za to lastnost, ki je zadnja na seznamu animacij. To je omejitev, kako CSS obravnava več animacij na isti lastnosti. Na primer, to ne bo delovalo, kot je predvideno, ker bo uporabljena samo animacija kf-pulza. .bad-combo { animacija: kf-zoom 0,5s naprej, kf-pulz 1,2 s neskončno izmenično; --kf-zoom-od: 0,5; --kf-zoom-to: 1,2; --kf-pulzna lestvica-od: 0,8; --kf-pulzna lestvica-na: 1,1; }
Dodatek za animacijo Najenostavnejši in najbolj neposreden način za obravnavanje več animacij, ki vplivajo na isto lastnost, je uporaba lastnosti animation-composition. V zadnjem primeru zgoraj animacija kf-pulse nadomesti animacijo kf-zoom, zato ne bomo videli začetne povečave in ne bomo dosegli pričakovane lestvice 1,2. Z nastavitvijo sestave animacije za dodajanje povemo brskalniku, naj združi obe animaciji. To nam daje rezultat, ki ga želimo. .component-two { animacija-kompozicija: dodaj; }
Oglejte si žetone Pen Keyframes – Demo 8 [forked] Amita Sheena. Ta pristop dobro deluje v večini primerov, ko želimo združiti učinke na isto lastnost. Uporaben je tudi, ko moramo kombinirati animacije s statičnimi vrednostmi lastnosti. Na primer, če imamo element, ki uporablja lastnost translate, da ga postavi natanko tam, kjer želimo, in ga nato želimo animirati s kf-slide-in ključnimi sličicami, dobimo grd viden skok brez sestavljanja animacije. Oglejte si žetone Pen Keyframes – Demo 9 [forked] Amita Sheena. Z nastavljeno animacijsko kompozicijo za dodajanje se animacija gladko kombinira z obstoječotransformira, tako da element ostane na mestu in se animira, kot je pričakovano. Animacija Stagger Drug način ravnanja z več animacijami je, da jih "zamaknete" - to pomeni, da začnete drugo animacijo nekoliko po koncu prve. To ni rešitev, ki deluje v vsakem primeru, je pa uporabna, ko imamo vstopno animacijo, ki ji sledi neprekinjena animacija. /* zbledi + impulz motnosti */ .notification { animacija: kf-fade-in 2s umirjanje, kf-impulz 0,5 s 2 s popuščanje-v-izhod neskončno izmenično; --kf-pulse-motnost-to: 0,5; }
Oglejte si žetone Pen Keyframes – Demo 10 [forked] Amita Sheena. Naročilo je pomembno Velik del animacij, s katerimi delamo, uporablja lastnost transform. V večini primerov je to preprosto bolj priročno. Ima tudi prednost v zmogljivosti, saj je mogoče animacije transformacije pospešiti z GPU. Toda če uporabljamo transformacije, se moramo sprijazniti, da je vrstni red, v katerem izvajamo svoje transformacije, pomemben. Veliko. V svojih dosedanjih ključnih sličicah smo uporabljali posamezne transformacije. V skladu s specifikacijami se ti vedno uporabljajo v določenem vrstnem redu: najprej se element prevede, nato zavrti in nato poveča. To je smiselno in večina od nas pričakuje. Če pa uporabimo lastnost transformacije, je vrstni red, v katerem so zapisane funkcije, vrstni red, v katerem so uporabljene. V tem primeru, če nekaj premaknemo za 100 slikovnih pik na osi X in nato zavrtimo za 45 stopinj, to ni isto, kot če bi to najprej zavrteli za 45 stopinj in nato premaknili za 100 slikovnih pik. /* Rožnati kvadrat: najprej prevedi, nato zasukaj */ .example-one { transformacija: translateX(100px) rotate(45deg); }
/* Zeleni kvadrat: najprej zasukaj, nato prevedi */ .example-two { transformacija: zasukaj (45 stopinj) translateX (100 slikovnih pik); }
Oglejte si žetone Pen Keyframes – Demo 11 [forked] Amita Sheena. Toda glede na vrstni red transformacije se vse posamezne transformacije – vse, kar smo uporabili za žetone ključnih okvirjev – zgodijo pred funkcijami transformacije. To pomeni, da se bo vse, kar nastavite v lastnosti transformacije, zgodilo po animacijah. Če pa nastavite na primer prevajanje skupaj s ključnimi sličicami kf-spin, se bo prevajanje zgodilo pred animacijo. Ste še zmedeni?! To vodi do situacij, kjer lahko statične vrednosti povzročijo različne rezultate za isto animacijo, kot je v naslednjem primeru:
/* Skupna animacija za oba vrtavca */ .spinner { animacija: kf-spin 1s linearno neskončno; }
/* Rožnati vrtavec: prevedi pred vrtenjem (posamezno preoblikovanje) */ .spinner-pink { prevod: 100 % 50 %; }
/* Zeleni vrtavec: zavrti in nato prevedi (vrstni red funkcij) */ .spinner-green { transformacija: prevedi (100%, 50%); }
Oglejte si žetone Keyframes Pen - Demo 12 [forked] avtorja Amita Sheena. Vidite lahko, da prvi vrtavec (roza) dobi translate, ki se zgodi pred vrtenjem kf-spin, tako da se najprej premakne na svoje mesto in se nato zavrti. Drugi vrtavec (zelen) dobi funkcijo translate(), ki se zgodi po posamezni transformaciji, tako da se element najprej zavrti, nato premakne glede na svoj trenutni kot, in dobimo učinek široke orbite. Ne, to ni napaka. To je samo ena od tistih stvari, ki jih moramo vedeti o CSS in jih moramo imeti v mislih, ko delamo z več animacijami ali več transformacijami. Po potrebi lahko ustvarite tudi dodaten nabor ključnih okvirjev kf-spin-alt, ki obračajo elemente s funkcijo rotate(). Zmanjšano gibanje Medtem ko govorimo o alternativnih ključnih sličicah, ne moremo prezreti možnosti »brez animacije«. Ena največjih prednosti uporabe žetonov ključnih sličic je, da je dostopnost mogoče vključiti in je pravzaprav zelo enostavno narediti. Z oblikovanjem ključnih okvirjev z mislijo na dostopnost lahko zagotovimo, da uporabniki, ki imajo raje zmanjšano gibanje, dobijo bolj gladko in manj motečo izkušnjo brez dodatnega dela ali podvajanja kode. Natančen pomen »Zmanjšanega gibanja« se lahko nekoliko spremeni od ene animacije do druge in od projekta do projekta, vendar je tukaj nekaj pomembnih točk, ki jih morate upoštevati: Utišanje ključnih sličic Medtem ko je nekatere animacije mogoče ublažiti ali upočasniti, obstajajo druge, ki bi morale popolnoma izginiti, ko se zahteva zmanjšano gibanje. Dober primer so pulzne animacije. Da zagotovimo, da se te animacije ne izvajajo v načinu zmanjšanega gibanja, jih lahko preprosto zavijemo v ustrezno medijsko poizvedbo.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { od { lestvica: var(--kf-pulse-scale-from, 1); motnost: var(--kf-pulse-opacity-from, 1); } v { lestvica: var(--kf-pulse-scale-to, 1); motnost:var(--kf-pulse-opacity-to, 1); } } }
To zagotavlja, da uporabniki, ki so nastavili preferers-reduced-motion na zmanjšanje, ne bodo videli animacije in bodo dobili izkušnjo, ki ustreza njihovim željam. Instant In Nekaterih ključnih sličic ne moremo enostavno odstraniti, kot so vstopne animacije. Vrednost se mora spremeniti, mora animirati; sicer element ne bo imel pravilnih vrednosti. Toda pri zmanjšanem gibanju bi moral biti ta prehod od začetne vrednosti takojšen. Da bi to dosegli, bomo definirali dodaten niz ključnih sličic, kjer vrednost takoj skoči v končno stanje. Ti postanejo naši privzeti ključni okvirji. Nato bomo dodali navadne ključne sličice znotraj predstavnostne poizvedbe za prefers-reduced-motion, nastavljeno na no-preference, tako kot v prejšnjem primeru. /* pojavi se takoj za zmanjšano gibanje */ @keyframes kf-zoom { od, do { merilo: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Izvirne ključne sličice povečave */ @keyframes kf-zoom { od { lestvica: var(--kf-zoom-from, 0,8); } v { merilo: var(--kf-zoom-to, 1); } } }
Na ta način bodo uporabniki, ki imajo raje zmanjšano gibanje, videli, da se element takoj prikaže v končnem stanju, medtem ko vsi drugi dobijo animirani prehod. Mehki pristop Obstajajo primeri, ko želimo ohraniti nekaj gibanja, vendar veliko mehkejše in mirnejše od prvotne animacije. Na primer, odbojni vhod lahko nadomestimo z nežnim zatemnitvijo.
@keyframes kf-bounce { /* Mehko zatemnitev za zmanjšano gibanje */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Izvirni odbojni ključni okvirji */ } }
Zdaj imajo uporabniki z omogočenim zmanjšanim gibanjem še vedno občutek videza, vendar brez intenzivnega gibanja odboja ali elastične animacije. Ko so gradniki postavljeni, je naslednje vprašanje, kako jih narediti del dejanskega poteka dela. Pisanje prilagodljivih ključnih sličic je ena stvar, vendar je za njihovo zanesljivost v velikem projektu potrebnih nekaj strategij, ki sem se jih moral naučiti na težji način. Izvedbene strategije in najboljše prakse Ko imamo trdno knjižnico žetonov ključnih sličic, je pravi izziv, kako jih vključiti v vsakdanje delo.
Skušnjava je, da bi opustil vse ključne sličice naenkrat in razglasil, da je problem rešen, toda v praksi sem ugotovil, da najboljši rezultati pridejo s postopnim sprejemanjem. Začnite z najpogostejšimi animacijami, kot sta bledenje ali drsenje. To so lahke zmage, ki pokažejo takojšnjo vrednost, ne da bi zahtevali veliko prepisovanje. Poimenovanje je še ena točka, ki si zasluži pozornost. Zaradi dosledne predpone ali imenskega prostora je jasno, katere animacije so žetoni in katere lokalne enkratne. Prav tako preprečuje nenamerne trke in pomaga novim članom ekipe na prvi pogled prepoznati skupni sistem. Dokumentacija je prav tako pomembna kot koda sama. Že kratek komentar nad vsakim žetonom ključnih sličic lahko prihrani ure ugibanja pozneje. Razvijalec mora imeti možnost odpreti datoteko z žetoni, poiskati učinek, ki ga potrebuje, in kopirati vzorec uporabe neposredno v svojo komponento. Prilagodljivost je tisto, zaradi česar je ta pristop vreden truda. Z izpostavitvijo smiselnih lastnosti po meri damo ekipam prostor za prilagoditev animacije, ne da bi poškodovali sistem. Hkrati poskušajte ne preveč komplicirati. Zagotovite pomembne gumbe in ohranite mnenje o ostalih. Na koncu ne pozabite na dostopnost. Vsaka animacija ne potrebuje alternative zmanjšanega gibanja, vendar jih veliko potrebuje. Zgodnje izvajanje teh prilagoditev pomeni, da nam jih pozneje nikoli ni treba naknadno vgraditi, in kaže na stopnjo skrbnosti, ki jo bodo naši uporabniki opazili, tudi če tega nikoli ne omenijo.
Po mojih izkušnjah je obravnavanje žetonov ključnih okvirjev kot dela našega delovnega toka žetonov oblikovanja tisto, zaradi česar se držijo. Ko so nameščeni, se ne počutijo več kot posebni učinki in postanejo del oblikovalskega jezika, naravni podaljšek tega, kako se izdelek premika in odziva. Zaključek Animacije so lahko eden najbolj veselih delov gradnje vmesnikov, vendar brez strukture lahko postanejo tudi eden največjih virov frustracij. Če ključne sličice obravnavate kot žetone, vzamete nekaj, kar je običajno neurejeno in težko upravljati, in to spremenite v jasen, predvidljiv sistem. Prava vrednost ni samo v tem, da prihranite nekaj vrstic kode. V zaupanju je, da ko uporabljate pojemanje, drsenje, povečavo ali vrtenje, natančno veste, kako se bo obnašalo v celotnem projektu. To je v prilagodljivosti, ki izhaja iz lastnosti po meri brez kaosa neskončnih različic. In to je v dostopnosti, ki je vgrajena v temelj in ne dodana kotnaknadna misel. Videl sem, da te ideje delujejo v različnih skupinah in različnih kodnih bazah, vzorec pa je vedno enak. Ko so žetoni nameščeni, ključni okvirji prenehajo biti razpršena zbirka trikov in postanejo del oblikovalskega jezika. Zaradi njih je izdelek bolj nameren, bolj dosleden in bolj živ. Če vzamete eno stvar iz tega članka, naj bo to: animacije si zaslužijo enako skrb in strukturo, kot jo že namenjamo barvam, tipografiji in razmikom. Majhna naložba v žetone ključnih sličic se izplača vsakič, ko se vaš vmesnik premakne.
