Kuvittele tämä: liity uuteen projektiin, sukellat koodikantaan ja huomaat muutaman ensimmäisen tunnin aikana jotain turhauttavan tuttua. Tyylitaulukoissa on hajallaan useita @keyframes-määritelmiä samoille perusanimaatioille. Kolme erilaista häivytystehostetta, kaksi tai kolme diamuunnelmaa, kourallinen zoomausanimaatioita ja vähintään kaksi erilaista pyöritysanimaatiota, koska no, miksi ei? @keyframes pulssi { alkaen { mittakaava: 1; } to { mittakaava: 1,1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { mittakaava: 1; } 10 %, 40 % { mittakaava: 1,2; } }
Jos tämä skenaario kuulostaa tutulta, et ole yksin. Kokemukseni eri projekteista, yksi johdonmukaisimmista nopeista voitoista, joita voin tarjota, on avainkehysten yhdistäminen ja standardointi. Siitä on tullut niin luotettava malli, että odotan nyt tätä siivousta yhtenä ensimmäisistä tehtävistäni missä tahansa uudessa koodikannassa. Logiikka kaaoksen takana Tämä redundanssi on täysin järkevää, kun sitä ajattelee. Käytämme kaikki samoja perusanimaatioita päivittäisessä työssämme: häivytyksiä, dioja, zoomauksia, pyörityksiä ja muita yleisiä tehosteita. Nämä animaatiot ovat melko yksinkertaisia, ja on helppo luoda nopea @keyframes-määritelmä työn suorittamiseksi. Ilman keskitettyä animaatiojärjestelmää kehittäjät luonnollisesti kirjoittavat nämä avainkehykset tyhjästä tietämättä, että samanlaisia animaatioita on jo olemassa muualla koodikannassa. Tämä on erityisen yleistä työskennellessä komponenttipohjaisissa arkkitehtuureissa (jota useimmat meistä tekevät nykyään), koska tiimit työskentelevät usein rinnakkain sovelluksen eri osissa. Tulos? Animaatiokaaos. Pieni Ongelma Ilmeisimpiä avainkehysten päällekkäisyyksiin liittyviä ongelmia ovat hukkaan kulunut kehitysaika ja tarpeeton koodin turvotus. Useat avainkehyksen määritelmät tarkoittavat useita päivityksiä, kun vaatimukset muuttuvat. Haluatko säätää häivytysanimaatiosi ajoitusta? Sinun on etsittävä jokainen esiintymä koodikannastasi. Haluatko standardoida helpotustoiminnot? Onnea kaikkien muunnelmien etsintään. Huoltopisteiden moninkertaisuus tekee jopa yksinkertaisista animaatiopäivityksistä aikaa vievän tehtävän. Isompi Ongelma Tämä avainkehysten päällekkäisyys luo paljon salakavalamman ongelman, joka piilee pinnan alla: globaalin kaukoloukun. Jopa komponenttipohjaisten arkkitehtuurien kanssa työskenneltäessä CSS-avainkehykset määritellään aina globaalissa laajuudessa. Tämä tarkoittaa, että kaikki avainkehykset koskevat kaikkia komponentteja. Aina. Kyllä, animaatiosi ei välttämättä käytä komponentissa määrittämiäsi avainkehyksiä. Se käyttää viimeisiä avainkehyksiä, jotka vastaavat täsmälleen samaa nimeä, jotka ladattiin globaaliin alueeseen. Niin kauan kuin kaikki avainkehyksesi ovat identtisiä, tämä saattaa tuntua pieneltä ongelmalta. Mutta sillä hetkellä, kun haluat mukauttaa animaation tiettyyn käyttötapaukseen, olet vaikeuksissa, tai mikä pahempaa, olet niiden aiheuttaja. Joko animaatiosi ei toimi, koska toinen komponentti on ladattu sinun perässäsi, ja se korvaa avainkehyksesi, tai komponenttisi latautuu viimeiseksi ja muuttaa vahingossa kaikkien muiden kyseisen avainkehyksen nimeä käyttävien komponenttien animaation käyttäytymistä, etkä ehkä edes huomaa sitä. Tässä on yksinkertainen esimerkki ongelman havainnollistamisesta: .component-one { /* komponenttityylejä */ animaatio: pulssi 1s easy-in-out ääretön vaihtoehtoinen; }
/* tämä @keyframes-määritelmä ei toimi */ @keyframes pulssi { alkaen { mittakaava: 1; } to { mittakaava: 1,1; } }
/* myöhemmin koodissa... */
.component-two { /* komponenttityylejä */ animaatio: pulssi 1s easy-in-out ääretön; }
/* nämä avainkehykset koskevat molempia komponentteja */ @keyframes pulssi { 0%, 20%, 100% { mittakaava: 1; } 10 %, 40 % { mittakaava: 1,2; } }
Molemmat komponentit käyttävät samaa animaation nimeä, mutta toinen @keyframes-määritelmä korvaa ensimmäisen. Nyt sekä komponentti yksi että komponentti kaksi käyttävät toista avainkehystä riippumatta siitä, mikä komponentti määritti mitkä avainkehykset. Katso Pen Keyframes Tokens - Demo 1 [forked], Amit Sheen. Pahin osa? Tämä toimii usein täydellisesti paikallisessa kehityksessä, mutta katkeaa mystisesti tuotannossa, kun rakennusprosessit muuttavat tyylisivujesi latausjärjestystä. Päädyt animaatioihin, jotka käyttäytyvät eri tavalla riippuen siitä, mitkä komponentit ladataan ja missä järjestyksessä. Ratkaisu: Unified Keyframes Vastaus tähän kaaokseen on yllättävän yksinkertainen: ennalta määritetyt dynaamiset avainkehykset, jotka on tallennettu jaettuun tyylitaulukkoon. Sen sijaan, että antaisimme jokaisen komponentin määritellä omat animaationsa, luomme keskitettyjä avainkehyksiä, jotka ovat hyvin dokumentoituja ja helppojakäytettävä, ylläpidettävä ja räätälöity projektisi erityistarpeisiin. Ajattele sitä avainkehysten tunnuksina. Aivan kuten käytämme tunnuksia väreihin ja väliin, ja monet meistä käyttävät jo tunnuksia animaatioominaisuuksiin, kuten kesto- ja helpotustoimintoihin, miksi et käyttäisi tunnuksia myös avainkehyksiin? Tämä lähestymistapa voi integroitua luonnollisesti mihin tahansa nykyiseen käyttämääsi suunnittelutunnusten työnkulkuun, ja samalla se ratkaisee sekä pienen ongelman (koodin päällekkäisyys) että suuremman ongelman (maailmanlaajuiset ristiriidat) yhdellä kertaa. Idea on suoraviivainen: luo yksi totuuden lähde kaikille yhteisille animaatioillemme. Tämä jaettu tyylitaulukko sisältää huolellisesti muotoiltuja avainkehyksiä, jotka kattavat projektissamme käyttämät animaatiomallit. Ei tarvitse enää arvailla, onko häivytysanimaatio jo olemassa jossain koodikannassamme. Et enää vahingossa korvaa animaatioita muista komponenteista. Mutta tässä on avain: nämä eivät ole vain staattisia kopioi-liitä animaatioita. Ne on suunniteltu olemaan dynaamisia ja muokattavissa mukautettujen CSS-ominaisuuksien avulla, mikä mahdollistaa johdonmukaisuuden säilyttämisen samalla kun voimme joustavasti mukauttaa animaatioita tiettyihin käyttötapauksiin, kuten jos tarvitset hieman suurempaa "pulssi-animaatiota yhdessä paikassa". Ensimmäisen avainkehyksen tunnuksen rakentaminen Yksi ensimmäisistä alhaalla roikkuvista hedelmistä, joihin meidän pitäisi puuttua, on "häipyvä" animaatio. Yhdessä äskettäisestä projektistani löysin yli tusina erillistä häivytysmääritelmää, ja kyllä, ne kaikki vain animoivat läpinäkyvyyden nollasta 1:een. Luodaan siis uusi tyylitaulukko, kutsutaan sitä nimellä kf-tokens.css, tuodaan se projektiimme ja sijoitetaan avainkehyksemme asianmukaisin kommentein sen sisään. /* keyframes-tokens.css */
/* * Fade In – häivytysanimaatio * Käyttö: animaatio: kf-fade-in 0.3s help-out; */ @keyframes kf-fade-in { alkaen { opasiteetti: 0; } to { opasiteetti: 1; } }
Tämä yksittäinen @keyframes-ilmoitus korvaa kaikki hajallaan olevat häivytysanimaatiot koodikannassamme. Puhdas, yksinkertainen ja maailmanlaajuisesti soveltuva. Ja nyt kun tämä tunnus on määritelty, voimme käyttää sitä mistä tahansa komponentista koko projektissamme: .modal { animaatio: kf-fade-in 0.3s ease-out; }
.tooltip { animaatio: kf-fade-in 0.2s ease-in-out; }
.notification { animaatio: kf-fade-in 0.5s help-out; }
Katso Pen Keyframes Tokens - Demo 2 [forked], Amit Sheen. Huomautus: Käytämme kf-etuliitettä kaikissa @keyframes-nimissä. Tämä etuliite toimii nimitilana, joka estää nimeämisristiriidat projektin olemassa olevien animaatioiden kanssa ja tekee välittömästi selväksi, että nämä avainkehykset tulevat avainkehysten tunnistetiedostostamme. Dynaamisen dian tekeminen Kf-fade-in-avainkehykset toimivat hyvin, koska ne ovat yksinkertaisia ja niissä on vähän tilaa sotkea. Muissa animaatioissa meidän on kuitenkin oltava paljon dynaamisempia, ja tässä voimme hyödyntää CSS:n mukautettujen ominaisuuksien valtavaa tehoa. Tässä avainkehysten tunnukset todella loistavat verrattuna hajallaan oleviin staattisiin animaatioihin. Otetaan yleinen skenaario: "suunnitettavat" animaatiot. Mutta liukua sisään mistä? 100px oikealta? 50% vasemmalta? Pitäisikö sen syöttää näytön yläreunasta? Tai kenties kellua pohjasta? On niin monia mahdollisuuksia, mutta sen sijaan, että luomme erillisiä avainkehyksiä kullekin suunnalle ja jokaiselle muunnelmalle, voimme rakentaa yhden joustavan tunnuksen, joka mukautuu kaikkiin skenaarioihin: /* * Slide In - suuntaava diaanimaatio * Käytä --kf-slide-from ohjataksesi suuntaa * Oletus: liukuu sisään vasemmalta (-100 %) *Käyttö: * animaatio: kf-slide-in 0,3 s helpotus; * --kf-slide-from: -100px 0; // liukuu vasemmalta * --kf-slide-from: 100px 0; // liuku oikealta * --kf-slide-from: 0 -50px; // liuku ylhäältä */
@keyframes kf-slide-in { alkaen { kääntää: var(--kf-slide-from, -100% 0); } to { kääntää: 0 0; } }
Nyt voimme käyttää tätä yksittäistä @keyframes -tunnusta mihin tahansa dian suuntaan yksinkertaisesti muuttamalla mukautettua ominaisuutta --kf-slide-from: .sidebar { animaatio: kf-slide-in 0.3s help-out; /* Käyttää oletusarvoa: liukuu vasemmalta */ }
.notification { animaatio: kf-slide-in 0.4s help-out; --kf-slide-from: 0 -50px; /* liuku ylhäältä */ }
.modal { animaatio: kf-fade-in 0,5 s, kf-slide-in 0,5 s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* dia alhaalta oikealta */ }
Tämä lähestymistapa antaa meille uskomattoman joustavuuden säilyttäen samalla johdonmukaisuuden. Yksi avainkehysilmoitus, rajattomat mahdollisuudet. Katso Pen Keyframes Tokens - Demo 3 [forked], Amit Sheen. Ja jos haluamme tehdä animaatioistamme entistä joustavampia ja mahdollistaa myös "liukuvien" tehosteiden, voimmelisää yksinkertaisesti --kf-slide-to mukautettu ominaisuus, samanlainen kuin mitä näemme seuraavassa osiossa. Kaksisuuntaiset zoom-avainkehykset Toinen yleinen animaatio, joka toistuu projekteissa, on "zoom"-tehosteet. Zoomausanimaatioita on kaikkialla, olipa kyseessä hienovarainen skaalaus toastosanomille, dramaattinen zoomaus modaaleille tai lempeä pienennystehoste otsikoille. Sen sijaan, että luomme jokaiselle skaalausarvolle erilliset avainkehykset, luodaan yksi joustava kf-zoom-avainkehysten joukko:
/* * Zoom - mittakaavaanimaatio * Käytä --kf-zoom-from ja --kf-zoom-to skaalausarvojen ohjaamiseen * Oletus: zoomaa 80 %:sta 100 %:iin (0,8 - 1) *Käyttö: * animaatio: kf-zoom 0,2s helpotettu; * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // zoomaa 50 %:sta 100 %:iin * --kf-zoom-from: 1; --kf-zoom-to: 0; // zoomaa 100 %:sta 0 %:iin * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // zoomaa 100 %:sta 110 %:iin */
@keyframes kf-zoom { alkaen { asteikko: var(--kf-zoom-from, 0.8); } to { mittakaava: var(--kf-zoom-to, 1); } }
Yhdellä määritelmällä voimme saavuttaa minkä tahansa tarvitsemamme zoomausmuunnelman: .toast { animaatio: kf-slide-in 0.2s, kf-zoom 0.4s helpotettu; --kf-slide-from: 0 100%; /* liuku ylhäältä */ /* Käyttää oletuszoomausta: skaalautuu 80 %:sta 100 %:iin */ }
.modal { animaatio: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* dramaattinen zoomaus 0 %:sta 100 %:iin */ }
.heading { animaatio: kf-fade-in 2s, kf-zoom 2s helppokäyttöinen; --kf-zoom-alkaen: 1.2; --kf-zoom-to: 0.8; /* pienennä hellävaraisesti */ }
Oletusarvo 0,8 (80 %) toimii täydellisesti useimmissa käyttöliittymäelementeissä, kuten toast-viesteissä ja korteissa, mutta on silti helppo mukauttaa erityistapauksia varten. Katso Pen Keyframes Tokens - Demo 4 [forked], Amit Sheen. Olet ehkä huomannut jotain mielenkiintoista viimeaikaisissa esimerkeissä: olemme yhdistäneet animaatioita. Yksi @keyframes-tunnisteiden kanssa työskentelyn tärkeimmistä eduista on, että ne on suunniteltu integroitumaan saumattomasti toisiinsa. Tämä sileä koostumus on tahallinen, ei sattumaa. Keskustelemme animaation koostumuksesta tarkemmin myöhemmin, mukaan lukien missä niistä voi tulla ongelmallisia, mutta useimmat yhdistelmät ovat yksinkertaisia ja helppoja toteuttaa. Huomautus: Tätä artikkelia kirjoittaessani ja ehkä sen kirjoittamisen takia huomasin miettiväni uudelleen koko sisäänkäyntianimaatioiden ideaa. Kaiken viimeaikaisen CSS:n kehityksen vuoksi tarvitsemmeko niitä edelleen ollenkaan? Onneksi Adam Argyle tutki samoja kysymyksiä ja ilmaisi ne loistavasti blogissaan. Tämä ei ole ristiriidassa täällä kirjoitetun kanssa, mutta se tarjoaa harkitsemisen arvoisen lähestymistavan, varsinkin jos projektisi ovat vahvasti riippuvaisia sisäänkäyntianimaatioista. Jatkuvat animaatiot Kun sisääntuloanimaatiot, kuten "häivytys", "liuku" ja "zoomaus", tapahtuvat kerran ja sitten pysähtyvät, jatkuvat animaatiot kiertävät loputtomasti kiinnittääkseen huomion tai osoittaen käynnissä olevaa toimintaa. Kaksi yleisintä jatkuvaa animaatiota, joita kohtaan, ovat "spin" (latausilmaisimien lataamiseen) ja "pulssi" (tärkeiden elementtien korostamiseen). Nämä animaatiot asettavat ainutlaatuisia haasteita avainkehystunnisteiden luomiseen. Toisin kuin sisäänkäyntianimaatiot, jotka tyypillisesti siirtyvät tilasta toiseen, jatkuvien animaatioiden käyttäytymismallien on oltava hyvin muokattavissa. Spin Doctor Jokainen projekti näyttää käyttävän useita pyöritysanimaatioita. Jotkut pyörivät myötäpäivään, toiset vastapäivään. Jotkut tekevät yhden 360 asteen kierroksen, toiset tekevät useita käännöksiä nopeamman vaikutuksen saavuttamiseksi. Sen sijaan, että luomme jokaiselle muunnelmalle erilliset avainkehykset, luodaan yksi joustava pyöräytys, joka käsittelee kaikki skenaariot:
/* * Spin - kiertoanimaatio * Käytä --kf-spin-from ja --kf-spin-to ohjataksesi pyörimisaluetta * Käytä --kf-spin-turns ohjataksesi kiertomäärää * Oletus: pyörii 0 astetta 360 asteeseen (1 täysi kierros) *Käyttö: * animaatio: kf-spin 1s lineaarinen ääretön; * --kf-spin-käännökset: 2; // 2 täyttä kierrosta * --kf-spin-from: 0deg; --kf-spin-to: 180°; // puolikierto * --kf-spin-from: 0deg; --kf-spin-to: -360°; // vastapäivään */
@keyframes kf-spin { alkaen { kiertää: var(--kf-spin-from, 0deg); } to { rotate: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Nyt voimme luoda minkä tahansa spinvariation, josta pidämme:
.loading-spinner { animaatio: kf-spin 1s lineaarinen ääretön; /* Käyttää oletusarvoa: pyörii 0 astetta 360 asteeseen */ }
.fast-loader { animaatio: kf-spin 1.2s ease-in-out ääretön vaihtoehto; --kf-spin-käännöksiä: 3; /* 3 täyttä kierrosta kumpaankin suuntaan sykliä kohden*/ }
.steped-reverse { animaatio: kf-spin 1,5s askelia(8) ääretön; --kf-spin-to: -360°; /* vastapäivään */ }
.subtle-wiggle { animaatio: kf-spin 2s easy-in-out ääretön vaihtoehto; --kf-spin-alkaen: -16 astetta; --kf-spin-to: 32 astetta; /* heiluu 36 astetta: -18 - +18 astetta */ }
Katso Pen Keyframes Tokens - Demo 5 [forked], Amit Sheen. Tämän lähestymistavan kauneus on se, että samat avainkehykset toimivat pyörivien, pyörivien kuvakkeiden, heilutustehosteiden ja jopa monimutkaisten monikierrosten animaatioiden lataamisessa. Pulssin paradoksi Pulssianimaatiot ovat hankalampia, koska ne voivat "pulssia" eri ominaisuuksia. Jotkut pulssivat asteikkoa, toiset opasiteettia ja jotkut väriominaisuuksia, kuten kirkkautta tai kylläisyyttä. Sen sijaan, että luomme erillisiä avainkehyksiä kullekin omaisuudelle, voimme luoda avainkehyksiä, jotka toimivat minkä tahansa CSS-omaisuuden kanssa. Tässä on esimerkki pulssi-avainkehyksestä skaala- ja peittävyysvaihtoehdoilla:
/* * Pulssi - sykkivä animaatio * Käytä --kf-pulse-scale-from ja --kf-pulse-scale-to ohjataksesi asteikon aluetta * Käytä --kf-pulse-opacity-from ja --kf-pulse-opacity-to ohjataksesi opasiteettialuetta * Oletus: ei pulssia (kaikki arvot 1) *Käyttö: * animaatio: kf-pulse 2s easy-in-out ääretön vaihtoehtoinen; * --kf-pulssiasteikko-alkaen: 0,95; --kf-pulse-scale-to: 1,05; // asteikon pulssi * --kf-pulssi-opasiteetti-alkaen: 0,7; --kf-pulse-opasiteetti-to: 1; // opasiteettipulssi */
@keyframes kf-pulse { alkaen { asteikko: var(--kf-pulse-scale-from, 1); opasiteetti: var(--kf-pulssi-opasiteetti-from, 1); } to { asteikko: var(--kf-pulse-scale-to, 1); opasiteetti: var(--kf-pulssi-opasiteetti-to, 1); } }
Tämä luo joustavan pulssin, joka voi animoida useita ominaisuuksia: .call-to-action { animaatio: kf-pulse 0.6s ääretön vaihtoehtoinen; --kf-pulssi-opasiteetti-alkaen: 0,5; /* opasiteettipulssi */ }
.notification-dot { animaatio: kf-pulse 0.6s easy-in-out ääretön vaihtoehtoinen; --kf-pulssiasteikko-alkaen: 0,9; --kf-pulse-scale-to: 1.1; /* asteikkopulssi */ }
.text-highlight { animaatio: kf-pulse 1.5s ease-out ääretön; --kf-pulssiasteikko-alkaen: 0,8; --kf-pulssi-opasiteetti-alkaen: 0,2; /* asteikko ja opasiteettipulssi */ }
Katso Pen Keyframes Tokens - Demo 6 [forked], Amit Sheen. Tämä yksittäinen kf-pulse-avainkehys pystyy käsittelemään kaikkea hienovaraisista huomionkiinnityksistä dramaattisiin kohokohtiin, samalla kun sitä on helppo muokata. Advanced Easing Yksi avainkehysten tokenien käytön hienoista asioista on se, kuinka helppoa on laajentaa animaatiokirjastoamme ja tarjota tehosteita, joita useimmat kehittäjät eivät vaivaudu kirjoittamaan tyhjästä, kuten elastisia tai pomppivia. Tässä on esimerkki yksinkertaisesta "bounce" keyframes -tunnuksesta, joka käyttää --kf-bounce-from mukautettua ominaisuutta ohjaamaan hyppykorkeutta. /* * Bounce - pomppiva sisäänkäyntianimaatio * Käytä --kf-bounce-from ohjataksesi hyppykorkeutta * Oletus: hyppää 100vh:sta (näytön ulkopuolella) *Käyttö: * animaatio: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // hyppää 200 kuvapisteen korkeudesta */
@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% { kääntää: 0 0; animaatio-ajoitustoiminto: helpotus; } }
Animaatiot, kuten "elastic", ovat hieman hankalampia avainkehysten sisällä olevien laskelmien vuoksi. Meidän on määritettävä --kf-elastic-from-X ja --kf-elastic-from-Y erikseen (molemmat ovat valinnaisia), ja yhdessä niiden avulla voimme luoda joustavan sisäänkäynnin mistä tahansa näytön kohdasta.
/* * Elastic In - joustava sisäänkäyntianimaatio * Käytä --kf-elastic-from-X ja --kf-elastic-from-Y ohjataksesi aloitusasentoa * Oletus: tulee ylhäältä keskeltä (0, -100vh) *Käyttö: * animaatio: kf-elastic-in 2s easy-in-out molemmat; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // syötä alkaen (-50px, -200px) */
@keyframes kf-elastic-in { 0 % { käännä: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16 % { käännä: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28 % { käännä: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44 % { käännä: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59 % { käännä: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73 % { käännä: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88 % { käännä: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100 % { kääntää: 0 0; } }
Tämän lähestymistavan ansiosta edistyneiden avainkehysten uudelleenkäyttö ja mukauttaminen projektissamme on helppoa muuttamalla yhtä mukautettua ominaisuutta.
.bounce-and-zoom { animaatio: kf-bounce 3s easy-in, kf-zoom 3s lineaarinen; --kf-zoom-from: 0; }
.bounce-and-slide { animaatio-kokoonpano: lisää; /* Molemmat animaatiot käyttävät käännöstä */ animaatio: kf-bounce 3s easy-in, kf-slide-in 3s helpotus; --kf-slide-from: -200px; }
.elastic-in { animaatio: kf-elastic-in 2s ease-in-out molemmat; }
Katso Pen Keyframes Tokens - Demo 7 [forked], Amit Sheen. Tähän asti olemme nähneet, kuinka voimme yhdistää avainkehykset älykkäällä ja tehokkaalla tavalla. Tietysti saatat haluta muokata asioita vastaamaan paremmin projektisi tarpeita, mutta olemme käsitelleet esimerkkejä useista yleisistä animaatioista ja jokapäiväisistä käyttötapauksista. Ja kun nämä avainkehykset ovat käytössä, meillä on nyt tehokkaita rakennuspalikoita johdonmukaisten, ylläpidettävien animaatioiden luomiseen koko projektin ajan. Ei enää päällekkäisiä avainkehyksiä, ei enää maailmanlaajuisia laajuusristiriitoja. Vain puhdas ja kätevä tapa hoitaa kaikki animaatiotarpeemme. Mutta varsinainen kysymys on: kuinka me kokoamme nämä rakennuspalikat yhteen? Laittamalla kaikki yhteen Olemme nähneet, että avainkehysten perustunnisteiden yhdistäminen on yksinkertaista. Emme tarvitse mitään erityistä, vaan määritellä ensimmäinen animaatio, määritellä toinen, asettaa muuttujat tarpeen mukaan, ja siinä se. /* Häivytys + liu'u sisään */ .toast { animaatio: kf-fade-in 0.4s, kf-slide-in 0,4 s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Lähentäminen + häivytys */ .modal { animaatio: kf-fade-in 0.3s, kf-zoom 0,3 s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-alkaen: 0,7; --kf-zoom-to: 1; }
/* Liu'uta sisään + pulssi */ .notification { animaatio: kf-slide-in 0,5 s, kf-pulse 1.2s help-in-out ääretön vaihtoehtoinen; --kf-slide-from: -100px 0; --kf-pulssiasteikko-alkaen: 0,95; --kf-pulse-scale-to: 1,05; }
Nämä yhdistelmät toimivat kauniisti, koska jokainen animaatio kohdistuu eri ominaisuuteen: läpinäkyvyys, muunnos (käännä/skaalaa) jne. Mutta joskus tulee ristiriitoja, ja meidän on tiedettävä, miksi ja miten niitä käsitellään. Kun kaksi animaatiota yrittää animoida samaa ominaisuutta – esimerkiksi molemmat animoivat mittakaavan tai molemmat animoivat peittävyyttä – tulos ei ole odotettu. Oletusarvoisesti vain yhtä animaatioista käytetään kyseiseen ominaisuuteen, joka on animaatioluettelon viimeinen. Tämä on rajoitus sille, kuinka CSS käsittelee useita animaatioita samalla omaisuudella. Tämä ei esimerkiksi toimi tarkoitetulla tavalla, koska vain kf-pulse-animaatio on käytössä. .bad-combo { animaatio: kf-zoom 0,5 s eteenpäin, kf-pulssi 1.2s ääretön vaihtoehtoinen; --kf-zoom-alkaen: 0,5; --kf-zoom-to: 1.2; --kf-pulssiasteikko-alkaen: 0,8; --kf-pulse-scale-to: 1.1; }
Animaatio lisäys Yksinkertaisin ja suorin tapa käsitellä useita samaan ominaisuuteen vaikuttavia animaatioita on käyttää animaatiokoosteominaisuutta. Yllä olevassa viimeisessä esimerkissä kf-pulse-animaatio korvaa kf-zoom-animaation, joten emme näe alkuperäistä zoomia emmekä saa odotettua asteikkoa 1,2:een. Asettamalla lisättävän animaation, käskemme selainta yhdistämään molemmat animaatiot. Tämä antaa meille haluamamme tuloksen. .component-two { animaatio-kokoonpano: lisää; }
Katso Pen Keyframes Tokens - Demo 8 [forked], Amit Sheen. Tämä lähestymistapa toimii hyvin useimmissa tapauksissa, joissa haluamme yhdistää tehosteita samaan omaisuuteen. Se on hyödyllinen myös silloin, kun meidän on yhdistettävä animaatioita staattisten ominaisuusarvojen kanssa. Esimerkiksi, jos meillä on elementti, joka käyttää translate-ominaisuutta sijoittaakseen sen tarkalleen haluamaamme kohtaan, ja sitten haluamme animoida sen kf-slide-in-avainkehyksillä, saamme ilkeän näkyvän hypyn ilman animaatiokokoonpanoa. Katso Pen Keyframes Tokens - Demo 9 [forked], Amit Sheen. Kun animaatio-sommittelu on asetettu lisättäväksi, animaatio yhdistetään sujuvasti olemassa olevaanmuuntaa, joten elementti pysyy paikallaan ja animoituu odotetusti. Animaatio Stagger Toinen tapa käsitellä useita animaatioita on "porrastaa" niitä eli aloittaa toinen animaatio hieman ensimmäisen valmistumisen jälkeen. Se ei ole jokaiseen tapaukseen sopiva ratkaisu, mutta se on hyödyllinen, kun meillä on sisäänkäyntianimaatio, jota seuraa jatkuva animaatio. /* häivytys + opasiteettipulssi */ .notification { animaatio: kf-fade-in 2s helpotus, kf-pulssi 0.5s 2s helpotus sisään-ulos ääretön vaihtoehtoinen; --kf-pulse-opasiteetti-to: 0,5; }
Katso Pen Keyframes Tokens - Demo 10 [forked], Amit Sheen. Tilausasiat Suuri osa käyttämistämme animaatioista käyttää muunnosominaisuutta. Useimmissa tapauksissa tämä on yksinkertaisesti kätevämpää. Sillä on myös suorituskykyetu, koska muunnosanimaatioita voidaan kiihdyttää GPU:lla. Mutta jos käytämme muunnoksia, meidän on hyväksyttävä, että järjestyksellä, jossa teemme muunnoksiamme, on merkitystä. Paljon. Avainkehyksissämme olemme tähän mennessä käyttäneet yksittäisiä muunnoksia. Teknisten tietojen mukaan niitä käytetään aina kiinteässä järjestyksessä: ensin elementti käännetään, sitten pyöritetään ja sitten skaalataan. Tämä on järkevää ja sitä useimmat meistä odottavat. Jos kuitenkin käytämme muunnosominaisuutta, funktioiden kirjoitusjärjestys on sama järjestys, jossa niitä käytetään. Tässä tapauksessa, jos liikutamme jotain 100 pikseliä X-akselilla ja sitten käännämme sitä 45 astetta, se ei ole sama asia kuin ensin 45 astetta kiertäminen ja sitten 100 pikselin siirtäminen. /* Vaaleanpunainen neliö: Käännä ensin ja käännä sitten */ .example-one { muunnos: translateX(100px) rotate(45deg); }
/* Vihreä neliö: Kierrä ensin ja käännä sitten */ .esimerkki-kaksi { muunnos: käännä(45 astetta) translateX(100px); }
Katso Pen Keyframes Tokens - Demo 11 [forked], Amit Sheen. Mutta muunnosjärjestyksen mukaan kaikki yksittäiset muunnokset – kaikki, mitä olemme käyttäneet avainkehysten tunnisteille – tapahtuvat ennen muunnostoimintoja. Tämä tarkoittaa, että kaikki, mitä määrität muunnosominaisuuteen, tapahtuu animaatioiden jälkeen. Mutta jos asetat esimerkiksi käännöksen yhdessä kf-spin-avainkehysten kanssa, käännös tapahtuu ennen animaatiota. Vielä sekaisin?! Tämä johtaa tilanteisiin, joissa staattiset arvot voivat aiheuttaa erilaisia tuloksia samalle animaatiolle, kuten seuraavassa tapauksessa:
/* Yhteinen animaatio molemmille pyörittäjille */ .spinner { animaatio: kf-spin 1s lineaarinen ääretön; }
/* Pink spinner: käännä ennen kiertoa (yksittäinen muunnos) */ .spinner-pink { kääntää: 100 % 50 %; }
/* Vihreä kehruu: kierrä ja käännä (toimintojärjestys) */ .spinner-green { muunnos: translate(100%, 50%); }
Katso Pen Keyframes Tokens - Demo 12 [forked], Amit Sheen. Voit nähdä, että ensimmäinen spinner (vaaleanpunainen) saa käännöksen, joka tapahtuu ennen kf-spin kiertoa, joten se siirtyy ensin paikoilleen ja sitten pyörii. Toinen spinner (vihreä) saa translate()-funktion, joka tapahtuu yksittäisen muunnoksen jälkeen, joten elementti ensin pyörii, sitten liikkuu suhteessa senhetkiseen kulmaan, ja saamme tuon leveän kiertoradan efektin. Ei, tämä ei ole bugi. Se on vain yksi niistä asioista, jotka meidän on tiedettävä CSS:stä ja pidettävä mielessä, kun työskentelemme useiden animaatioiden tai useiden muunnosten kanssa. Tarvittaessa voit myös luoda ylimääräisen joukon kf-spin-alt avainkehyksiä, jotka kiertävät elementtejä käyttämällä rotate()-funktiota. Alennettu liike Ja vaikka puhumme vaihtoehtoisista avainkehyksistä, emme voi sivuuttaa "ei animaatiota" -vaihtoehtoa. Yksi avainkehysten tokenien käytön suurimmista eduista on, että saavutettavuus voidaan tiivistää, ja se on itse asiassa melko helppo tehdä. Suunnittelemalla avainkehyksemme käytettävyyttä ajatellen voimme varmistaa, että käyttäjät, jotka pitävät alennettua liikettä parempana, saavat sujuvamman ja vähemmän häiritsevän kokemuksen ilman ylimääräistä työtä tai koodin päällekkäisyyttä. Sanan "Reduced Motion" tarkka merkitys voi muuttua hieman animaatiosta toiseen ja projektista toiseen, mutta tässä on muutama tärkeä seikka, jotka on pidettävä mielessä: Avainkehysten mykistäminen Vaikka joitain animaatioita voidaan pehmentää tai hidastaa, on toisia, joiden pitäisi kadota kokonaan, kun liikettä pyydetään. Pulssianimaatiot ovat hyvä esimerkki. Varmistaaksemme, että nämä animaatiot eivät toimi supistetussa liikkeessä, voimme yksinkertaisesti kääriä ne sopivaan mediakyselyyn.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { alkaen { asteikko: var(--kf-pulse-scale-from, 1); opasiteetti: var(--kf-pulssi-opasiteetti-from, 1); } to { asteikko: var(--kf-pulse-scale-to, 1); opasiteetti:var(--kf-pulssi-opasiteetti-to, 1); } } }
Näin varmistetaan, että käyttäjät, jotka ovat määrittäneet pienennyksen mieluiten-vähennettynä, eivät näe animaatiota ja saavat mieltymyksiään vastaavan kokemuksen. Instant In Joitakin avainkehyksiä emme voi yksinkertaisesti poistaa, kuten sisäänkäyntianimaatioita. Arvon on muututtava, sen on animoitava; muuten elementillä ei ole oikeita arvoja. Mutta pienennetyssä liikkeessä tämän siirtymän alkuperäisestä arvosta pitäisi olla välitön. Tämän saavuttamiseksi määritämme ylimääräisen joukon avainkehyksiä, joissa arvo hyppää välittömästi lopputilaan. Näistä tulee oletusavainkehyksemme. Sitten lisäämme tavalliset avainkehykset mediakyselyyn, joka koskee prefers-reduced-motion -asetusta no-preference-asetukseksi, kuten edellisessä esimerkissä. /* ponnahtaa sisään välittömästi vähentääksesi liikettä */ @keyframes kf-zoom { alkaen, kohteeseen { mittakaava: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Alkuperäiset zoomausavainkehykset */ @keyframes kf-zoom { alkaen { asteikko: var(--kf-zoom-from, 0.8); } to { mittakaava: var(--kf-zoom-to, 1); } } }
Tällä tavalla käyttäjät, jotka haluavat pienentää liikettä, näkevät elementin näkyvän välittömästi lopullisessa tilassaan, kun taas kaikki muut saavat animoidun siirtymän. Pehmeä lähestymistapa On tapauksia, joissa haluamme säilyttää jonkin verran liikettä, mutta paljon pehmeämpää ja rauhallisempaa kuin alkuperäinen animaatio. Voimme esimerkiksi korvata pomppivan sisäänkäynnin hellävaraisella häivytyksellä.
@keyframes kf-bounce { /* Pehmeä häivytys vähentää liikettä */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Alkuperäiset palautuvat avainkehykset */ } }
Nyt käyttäjät, joilla on alennettu liike, saavat edelleen vaikutelman, mutta ilman pomppimisen tai elastisen animaation voimakasta liikettä. Kun rakennuspalikat ovat paikoillaan, seuraava kysymys on, kuinka ne saadaan osaksi varsinaista työnkulkua. Joustavien avainkehysten kirjoittaminen on yksi asia, mutta niiden luotettavuus suuressa projektissa vaatii muutamia strategioita, jotka minun piti oppia kantapään kautta. Käyttöönottostrategiat ja parhaat käytännöt Kun meillä on vankka kirjasto avainkehystunnisteista, todellinen haaste on niiden tuominen jokapäiväiseen työhön.
Kiusaus on pudottaa kaikki avainkehykset sisään ja julistaa ongelma ratkaistuksi, mutta käytännössä olen huomannut, että parhaat tulokset saadaan asteittaisesta käyttöönotosta. Aloita yleisimmistä animaatioista, kuten häivytyksestä tai liukumisesta. Nämä ovat helppoja voittoja, jotka osoittavat välitöntä arvoa ilman suuria uudelleenkirjoituksia. Nimeäminen on toinen huomion arvoinen seikka. Johdonmukainen etuliite tai nimiavaruus tekee selväksi, mitkä animaatiot ovat tunnuksia ja mitkä paikallisia kertaluonteisia. Se myös estää vahingossa tapahtuvat törmäykset ja auttaa uusia tiimin jäseniä tunnistamaan jaetun järjestelmän yhdellä silmäyksellä. Dokumentaatio on yhtä tärkeä kuin itse koodi. Jopa lyhyt kommentti jokaisen avainkehyksen tunnuksen yläpuolella voi säästää tunteja arvailulta myöhemmin. Kehittäjän tulee pystyä avaamaan tokens-tiedosto, skannata tarvitsemansa tehosteet ja kopioida käyttökuvio suoraan komponenttiinsa. Joustavuus tekee tästä lähestymistavasta vaivan arvoista. Esittelemällä järkeviä mukautettuja ominaisuuksia annamme tiimeille tilaa muokata animaatiota järjestelmää rikkomatta. Yritä samalla olla tekemättä liian monimutkaista. Anna tärkeät nupit ja pidä loput mielipiteinä. Muista lopuksi saavutettavuus. Kaikki animaatiot eivät tarvitse supistettua liikevaihtoehtoa, mutta monet tarvitsevat. Näiden säätöjen tekeminen ajoissa tarkoittaa, että meidän ei tarvitse asentaa niitä jälkikäteen, ja se osoittaa huolellisuuden tasoa, jonka käyttäjämme huomaavat, vaikka he eivät koskaan mainitsisi sitä.
Kokemukseni mukaan avainkehysten tunnisteiden käsitteleminen osana suunnittelutunnisteiden työnkulkuamme saa ne kiinni. Kun ne ovat paikoillaan, ne eivät enää tunnu erikoistehosteilta ja niistä tulee osa suunnittelukieltä, luonnollinen jatke tuotteen liikkeelle ja reagoinnille. Päätös Animaatiot voivat olla yksi iloisimpia osia käyttöliittymien rakentamisessa, mutta ilman rakennetta niistä voi tulla myös yksi suurimmista turhautumisen lähteistä. Käsittelemällä avainkehyksiä tokeneina otat jotain, joka on yleensä sotkuista ja vaikeasti hallittavaa, ja muutat siitä selkeän, ennustettavan järjestelmän. Todellinen arvo ei ole vain muutaman koodirivin tallentaminen. Se on varma siitä, että kun käytät häivytystä, liukumista, zoomausta tai pyöritystä, tiedät tarkalleen, kuinka se käyttäytyy projektin aikana. Se on mukautettujen ominaisuuksien tuomaa joustavuutta ilman loputtomien muunnelmien kaaosta. Ja se on esteettömyys, joka on rakennettu perustaan, eikä lisättyjälkikäteen. Olen nähnyt näiden ideoiden toimivan eri tiimeissä ja erilaisissa koodikantoissa, ja malli on aina sama. Kun tunnukset ovat paikoillaan, avainkehykset lakkaavat olemasta hajallaan olevia temppuja ja niistä tulee osa suunnittelukieltä. Ne saavat tuotteen tuntumaan tarkoituksellisemmalta, johdonmukaisemmalta ja elävämmältä. Jos otat yhden asian tästä artikkelista, olkoon se tämä: animaatiot ansaitsevat saman huolenpidon ja rakenteen kuin annamme jo väreille, typografialle ja välityksille. Pieni investointi avainkehysten tunnuksiin maksaa itsensä takaisin aina, kun käyttöliittymäsi liikkuu.
