Kujutage ette seda: liitute uue projektiga, sukeldute koodibaasi ja esimeste tundide jooksul avastate midagi masendavalt tuttavat. Stiilitabelitesse hajutatult leiate samade põhianimatsioonide jaoks mitu @keyframes definitsiooni. Kolm erinevat tuhmumisefekti, kaks või kolm slaidivariatsiooni, käputäis suumianimatsioone ja vähemalt kaks erinevat pöörlemisanimatsiooni, sest noh, miks mitte? @keyframes impulss { alates { skaala: 1; } to { skaala: 1,1; } }
@keyframes bigger-impulse { 0%, 20%, 100% { skaala: 1; } 10%, 40% { skaala: 1,2; } }
Kui see stsenaarium tundub tuttav, pole te üksi. Minu erinevate projektide kogemuse põhjal on üks järjepidevamaid kiireid võite võtmekaadrite konsolideerimine ja standardimine. Sellest on saanud nii usaldusväärne muster, et nüüd ootan seda puhastamist kui üht oma esimestest ülesannetest mis tahes uues koodibaasis. Kaose taga olev loogika See koondamine on täiesti loogiline, kui sellele mõelda. Me kõik kasutame oma igapäevases töös samu põhianimatsioone: tuhmub, slaidib, suumib, keerutab ja muid levinud efekte. Need animatsioonid on üsna lihtsad ja töö tegemiseks on lihtne koostada kiire @keyframes definitsioon. Ilma tsentraliseeritud animatsioonisüsteemita kirjutavad arendajad need võtmekaadrid loomulikult nullist, teadmata, et sarnased animatsioonid on mujal koodibaasis juba olemas. See on eriti levinud komponendipõhistes arhitektuurides töötamisel (mida enamik meist tänapäeval teeb), kuna meeskonnad töötavad sageli paralleelselt rakenduse erinevates osades. Tulemus? Animatsiooni kaos. Väike probleem Kõige ilmsemad võtmekaadrite dubleerimisega seotud probleemid on raisatud arendusaeg ja tarbetu koodi paisutamine. Mitu võtmekaadri määratlust tähendab mitut kohta, mida nõuete muutumisel värskendada. Kas peate kohandama oma tuhmumisanimatsiooni ajastust? Peate oma koodibaasis üles otsima kõik eksemplarid. Kas soovite lihtsustusfunktsioone standardida? Edu kõikide variatsioonide leidmisel. Hoolduspunktide korrutamine muudab isegi lihtsad animatsioonivärskendused aeganõudvaks ülesandeks. Suurem probleem See võtmekaadrite dubleerimine tekitab pinna all palju salakavalama probleemi: globaalse ulatuse lõksu. Isegi komponendipõhiste arhitektuuridega töötamisel määratletakse CSS-i võtmekaadrid alati globaalses ulatuses. See tähendab, et kõik võtmekaadrid kehtivad kõikidele komponentidele. Alati. Jah, teie animatsioon ei pruugi tingimata kasutada komponendis määratletud võtmekaadreid. See kasutab viimaseid võtmekaadreid, mis vastavad täpselt samale nimele, mis laaditi globaalsesse ulatusse. Kui kõik teie võtmekaadrid on identsed, võib see tunduda väikese probleemina. Kuid hetkel, kui soovite animatsiooni konkreetse kasutusjuhtumi jaoks kohandada, olete hädas või, mis veelgi hullem, olete nende põhjustaja. Teie animatsioon ei tööta, kuna mõni teine komponent laaditi pärast teie oma, kirjutades teie võtmekaadrid üle, või teie komponent laaditakse viimati ja muudab kogemata kõigi selle võtmekaadri nime kasutavate komponentide animatsiooni käitumist ja te ei pruugi sellest isegi aru saada. Siin on lihtne näide, mis näitab probleemi: .component-one { /* komponentide stiilid */ animatsioon: pulss 1s lihtsus sisse-välja lõpmatu vahelduv; }
/* see @keyframes definitsioon ei tööta */ @keyframes impulss { alates { skaala: 1; } to { skaala: 1,1; } }
/* hiljem koodis... */
.component-two { /* komponentide stiilid */ animatsioon: pulss 1s lihtsus sisse-välja lõpmatu; }
/* need võtmekaadrid rakenduvad mõlemale komponendile */ @keyframes impulss { 0%, 20%, 100% { skaala: 1; } 10%, 40% { skaala: 1,2; } }
Mõlemad komponendid kasutavad sama animatsiooni nime, kuid teine @keyframes definitsioon kirjutab esimese üle. Nüüd kasutavad nii komponent üks kui ka teine võtmekaadreid, olenemata sellest, milline komponent millise võtmekaadri määras. Vaadake pliiatsi võtmekaadrite märke – Demo 1 [kahveldatud], autor Amit Sheen. Halvim osa? See töötab kohalikus arenduses sageli suurepäraselt, kuid katkeb tootmises müstiliselt, kui ehitusprotsessid muudavad teie stiilitabelite laadimisjärjekorda. Lõppkokkuvõttes saate animatsioone, mis käituvad erinevalt sõltuvalt sellest, millised komponendid laaditakse ja millises järjestuses. Lahendus: ühtsed võtmekaadrid Vastus sellele kaosele on üllatavalt lihtne: eelmääratletud dünaamilised võtmekaadrid, mis on salvestatud jagatud stiililehele. Selle asemel, et lasta igal komponendil määrata oma animatsioonid, loome tsentraliseeritud võtmekaadreid, mis on hästi dokumenteeritud ja hõlpsasti kasutatavad.kasutatav, hooldatav ja kohandatud teie projekti konkreetsetele vajadustele. Mõelge sellele kui võtmekaadri märkidele. Nii nagu me kasutame märke värvide ja vahekauguste jaoks ning paljud meist juba kasutavad märke animatsiooni omaduste jaoks, nagu kestus ja kergendusfunktsioonid, miks mitte kasutada märke ka võtmekaadrite jaoks? Seda lähenemisviisi saab loomulikult integreerida mis tahes praeguse kujundusmärgi töövooga, mida kasutate, lahendades korraga nii väikese probleemi (koodi dubleerimine) kui ka suurema probleemi (ülemaailmse ulatuse konfliktid). Idee on otsene: looge kõigi meie levinud animatsioonide jaoks üks tõeallikas. See jagatud stiilitabel sisaldab hoolikalt koostatud võtmekaadreid, mis katavad animatsioonimustreid, mida meie projekt tegelikult kasutab. Enam pole vaja arvata, kas fade animatsioon on kuskil meie koodibaasis juba olemas. Enam ei kirjutata kogemata animatsioone muudest komponentidest üle. Kuid siin on võti: need pole lihtsalt staatilised kopeerimis-kleebi animatsioonid. Need on loodud olema dünaamilised ja kohandatavad CSS-i kohandatud atribuutide kaudu, võimaldades meil säilitada järjepidevust, säilitades samal ajal paindlikkuse kohandada animatsioone konkreetsetele kasutusjuhtudele, näiteks kui vajate ühes kohas pisut suuremat impulss-animatsiooni. Esimese võtmekaadri märgi loomine Üks esimesi madalalt rippuvaid puuvilju, millega peaksime tegelema, on sisse tuhmuv animatsioon. Ühes oma hiljutises projektis leidsin üle tosina eraldi tuhmumisdefinitsiooni ja jah, need kõik lihtsalt animeerisid läbipaistmatuse 0-lt 1-ni. Loome siis uue stiilitabeli, nimetame selle kf-tokens.css-iks, impordime selle oma projekti ja paigutame selle sisse oma võtmekaadrid koos õigete kommentaaridega. /* keyframes-tokens.css */
/* * Fade In – fade sissepääsu animatsioon * Kasutamine: animatsioon: kf-fade-in 0,3s easy-out; */ @keyframes kf-fade-in { alates { läbipaistmatus: 0; } to { läbipaistmatus: 1; } }
See üksainus @keyframes deklaratsioon asendab kõik need hajutatud tuhmumisanimatsioonid meie koodibaasis. Puhas, lihtne ja ülemaailmselt rakendatav. Ja nüüd, kui meil on see tunnus defineeritud, saame seda kasutada mis tahes komponendist kogu meie projekti jooksul: .modal { animatsioon: kf-fade-in 0,3s easy-out; }
.tooltip { animatsioon: kf-fade-in 0,2s ease-in-out; }
.notification { animatsioon: kf-fade-in 0,5s easy-out; }
Vaadake pliiatsi võtmekaadrite märke – Demo 2 [kahveldatud], autor Amit Sheen. Märkus. Kasutame kõigis @keyframes nimedes eesliidet kf. See eesliide toimib nimeruumina, mis hoiab ära nimetamiskonfliktide projektis olemasolevate animatsioonidega ja teeb kohe selgeks, et need võtmekaadrid pärinevad meie võtmekaadrite lubade failist. Dünaamilise slaidi tegemine Kf-fade-in võtmekaadrid töötavad suurepäraselt, kuna see on lihtne ja asjade segamiseks on vähe ruumi. Teiste animatsioonide puhul peame aga olema palju dünaamilisemad ja siin saame kasutada CSS-i kohandatud atribuutide tohutut jõudu. Siin säravad võtmekaadri märgid võrreldes hajutatud staatiliste animatsioonidega. Võtame tavalise stsenaariumi: "sisselibistatavad" animatsioonid. Aga kust sisse libiseda? 100px paremalt? 50% vasakult? Kas see peaks sisenema ekraani ülaosast? Või äkki põhjast sisse ujuda? Nii palju võimalusi, kuid selle asemel, et luua iga suuna ja iga variatsiooni jaoks eraldi võtmekaadreid, saame luua ühe paindliku märgi, mis kohandub kõigi stsenaariumidega: /* * Slide In – suunatud slaidi animatsioon * Suuna juhtimiseks kasutage --kf-slide-from * Vaikimisi: libiseb vasakult sisse (-100%) *Kasutus: * animatsioon: kf-slide-in 0,3s easy-out; * --kf-slide-from: -100px 0; // libistage vasakult * --kf-slide-from: 100px 0; // libistage paremalt * --kf-slide-from: 0 -50px; // libistage ülevalt */
@keyframes kf-slide-in { alates { translate: var(--kf-slide-from, -100% 0); } to { tõlkida: 0 0; } }
Nüüd saame seda ühte @keyframes luba kasutada mis tahes slaidisuuna jaoks, muutes lihtsalt kohandatud atribuuti --kf-slide-from: .sidebar { animatsioon: kf-slide-in 0,3s easy-out; /* Kasutab vaikeväärtust: slaidid vasakult */ }
.notification { animatsioon: kf-slide-in 0,4s easy-out; --kf-slide-from: 0 -50px; /* slaid ülevalt */ }
.modal { animatsioon: 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; /* libistage alt paremalt */ }
See lähenemisviis annab meile uskumatu paindlikkuse, säilitades samal ajal järjepidevuse. Üks võtmekaadri deklaratsioon, lõputud võimalused. Vaadake pliiatsi võtmekaadrite märke – Demo 3 [kahveldatud], autor Amit Sheen. Ja kui tahame muuta oma animatsioonid veelgi paindlikumaks, võimaldades ka väljalibisevaid efekte, saamelihtsalt lisage kohandatud atribuut --kf-slide-to, sarnaselt järgmises jaotises nähtule. Kahesuunalised suumiga võtmekaadrid Teine levinud animatsioon, mis projektides dubleeritakse, on suumiefektid. Suumianimatsioonid on kõikjal olemas, olgu selleks röstsaiateadete peen suurendamine, modaalide dramaatiline suurendamine või pealkirjade õrn vähendamise efekt. Selle asemel, et luua iga skaala väärtuse jaoks eraldi võtmekaadreid, loome ühe paindliku kf-zoom võtmekaadrite komplekti:
/* * Suum - skaalaanimatsioon * Kasutage skaala väärtuste kontrollimiseks --kf-zoom-from ja --kf-zoom-to * Vaikimisi: suumib 80% kuni 100% (0,8 kuni 1) *Kasutus: * animatsioon: kf-zoom 0,2s kergendus; * --kf-zoom-from: 0,5; --kf-zoom-to: 1; // suumi 50%-lt 100%-le * --kf-zoom-from: 1; --kf-zoom-to: 0; // suumi 100%-lt 0%-le * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // suumi 100%-lt 110%-le */
@keyframes kf-zoom { alates { skaala: var(--kf-zoom-from, 0,8); } to { skaala: var(--kf-zoom-to, 1); } }
Ühe definitsiooniga saame saavutada mis tahes vajaliku suumivariatsiooni: .toast { animatsioon: kf-slide-in 0,2 s, kf-zoom 0,4s kergendus; --kf-slaidi-alates: 0 100%; /* slaid ülevalt */ /* Kasutab vaikesuumi: skaalal 80% kuni 100% */ }
.modal { animatsioon: kf-zoom 0,3 s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0; /* dramaatiline suum 0% kuni 100% */ }
.heading { animatsioon: kf-fade-in 2s, kf-zoom 2s lihtsustus; --kf-zoom-from: 1.2; --kf-zoom-to: 0,8; /* vähendage õrnalt */ }
Vaikimisi 0,8 (80%) töötab suurepäraselt enamiku kasutajaliidese elementide (nt röstsaiad ja kaardid) puhul, kuid seda on siiski lihtne erijuhtudeks kohandada. Vaadake pliiatsi võtmekaadrite märke – Demo 4 [kahveldatud], autor Amit Sheen. Võib-olla olete viimastes näidetes märganud midagi huvitavat: oleme kombineerinud animatsioone. @keyframes žetoonidega töötamise üks peamisi eeliseid on see, et need on loodud üksteisega sujuvalt integreeruma. See sujuv kompositsioon on tahtlik, mitte juhuslik. Animatsiooni koostist käsitleme üksikasjalikumalt hiljem, sealhulgas kohtades, kus need võivad problemaatiliseks muutuda, kuid enamik kombinatsioone on lihtsad ja hõlpsasti rakendatavad. Märkus. Seda artiklit kirjutades ja võib-olla just selle kirjutamise tõttu leidsin end kogu sissepääsuanimatsioonide ideed ümber mõtlemas. Arvestades kõiki hiljutisi CSS-i edusamme, kas meil on neid üldse vaja? Õnneks uuris Adam Argyle samu küsimusi ja väljendas neid oma ajaveebis suurepäraselt. See ei ole vastuolus siin kirjutatuga, kuid see on lähenemisviis, mida tasub kaaluda, eriti kui teie projektid sõltuvad suuresti sissepääsuanimatsioonidest. Pidevad animatsioonid Kui sissepääsuanimatsioonid, nagu „hajumine”, „libistamine” ja „suumimine”, toimuvad üks kord ja seejärel peatuvad, siis pidevad animatsioonid loovad lõputult tähelepanu, et juhtida tähelepanu või osutada käimasolevale tegevusele. Kaks kõige levinumat pidevat animatsiooni, mida ma kohtan, on "spin" (indikaatorite laadimiseks) ja "pulss" (oluliste elementide esiletõstmiseks). Need animatsioonid esitavad võtmekaadrite žetoonide loomisel ainulaadseid väljakutseid. Erinevalt sissepääsuanimatsioonidest, mis tavaliselt liiguvad ühest olekust teise, peavad pidevad animatsioonid olema oma käitumismustrites väga kohandatavad. Pöörlemisdoktor Tundub, et iga projekt kasutab mitut keerutamisanimatsiooni. Mõned pöörlevad päripäeva, teised vastupäeva. Mõned teevad ühe 360-kraadise pöörde, teised teevad kiirema efekti saavutamiseks mitu pööret. Selle asemel, et luua iga variatsiooni jaoks eraldi võtmekaadrid, loome ühe paindliku keerutuse, mis käsitleb kõiki stsenaariume.
/* * Spin – pöörlemisanimatsioon * Pöörlemisvahemiku reguleerimiseks kasutage --kf-spin-from ja --kf-spin-to * Kasutage pöörete arvu reguleerimiseks käsku --kf-spin-turns * Vaikimisi: pöörleb 0 kraadist 360 kraadini (1 täispööre) *Kasutus: * animatsioon: kf-spin 1s lineaarne lõpmatu; * --kf-spin-turns: 2; // 2 täispööret * --kf-spin-from: 0deg; --kf-spin-to: 180°; // poolpööramine * --kf-spin-from: 0deg; --kf-spin-to: -360°; // vastupäeva */
@keyframes kf-spin { alates { pööra: var(--kf-spin-from, 0deg); } to { pööra: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Nüüd saame luua mis tahes meelepärase keerutamisvariatsiooni:
.loading-spinner { animatsioon: kf-spin 1s lineaarne lõpmatu; /* Kasutab vaikimisi: pöörleb 0 kraadist 360 kraadini */ }
.fast-loader { animatsioon: kf-spin 1.2s ease-in-out infinite alternate; --kf-spin-turns: 3; /* 3 täispööret igas suunas tsükli kohta*/ }
.steped-reverse { animatsioon: kf-spin 1,5s sammud(8) lõpmatu; --kf-spin-to: -360°; /* vastupäeva */ }
.subtle-wiggle { animatsioon: kf-spin 2s lihtsus sisse-välja lõpmatu vahelduv; --kf-spin-alates: -16°; --kf-spin-to: 32°; /* kõigub 36 kraadi: vahemikus -18 kuni +18 kraadi */ }
Vaadake pliiatsi võtmekaadrite märke – Demo 5 [kahveldatud], autor Amit Sheen. Selle lähenemisviisi ilu seisneb selles, et samad võtmekaadrid töötavad keerutajate laadimisel, pöörlevate ikoonide, vingerdamise efektide ja isegi keerukate mitme pöördega animatsioonide jaoks. Pulsi paradoks Impulssanimatsioonid on keerulisemad, kuna need võivad "pulseerida" erinevaid omadusi. Mõned pulseerivad skaalat, teised läbipaistmatust ja mõned värviomadusi, nagu heledus või küllastus. Selle asemel, et luua iga atribuudi jaoks eraldi võtmekaadreid, saame luua võtmekaadreid, mis töötavad mis tahes CSS-i atribuudiga. Siin on näide impulssvõtmekaadrist koos skaala ja läbipaistmatuse valikutega.
/* * Pulss – pulseeriv animatsioon * Kasutage skaala reguleerimiseks --kf-pulse-scale-from ja --kf-pulse-scale-to * Läbipaistmatuse vahemiku reguleerimiseks kasutage --kf-pulse-oacity-from ja --kf-pulse-pacity-to * Vaikimisi: impulss puudub (kõik väärtused 1) *Kasutus: * animatsioon: kf-pulse 2s lihtsus sisse-välja lõpmatu vahelduv; * --kf-impulss-skaala-alates: 0,95; --kf-impulss-skaala-to: 1,05; // skaala impulss * --kf-impulsi läbipaistmatus-alates: 0,7; --kf-impulsi läbipaistmatus-to: 1; // läbipaistmatuse impulss */
@keyframes kf-pulse { alates { skaala: var(--kf-impulss-skaala-from, 1); läbipaistmatus: var(--kf-impulss-läbipaistmatus-from, 1); } to { skaala: var(--kf-impulss-scale-to, 1); läbipaistmatus: var(--kf-impulss-oacity-to, 1); } }
See loob paindliku impulsi, mis suudab animeerida mitut omadust: .call-to-action { animatsioon: kf-impulss 0,6s infinite alternate; --kf-impulsi läbipaistmatus-alates: 0,5; /* läbipaistmatuse impulss */ }
.notification-dot { animatsioon: kf-impulss 0,6 s lihtsus sisse-välja lõpmatu vahelduv; --kf-impulss-skaala-alates: 0,9; --kf-impulss-scale-to: 1.1; /* skaala impulss */ }
.text-highlight { animatsioon: kf-pulse 1,5s easy-out lõpmatu; --kf-impulss-skaala-alates: 0,8; --kf-impulsi-läbipaistmatus-alates: 0,2; /* skaala ja läbipaistmatuse impulss */ }
Vaadake pliiatsi võtmekaadrite märke – Demo 6 [kahveldatud], autor Amit Sheen. See üksainus kf-impulss-võtmekaader saab hakkama kõigega alates peenest tähelepanu haaramisest kuni dramaatiliste esiletõstusteni, samas kui seda on lihtne kohandada. Täiustatud leevendus Võtmekaadrite žetoonide kasutamise üks suurepäraseid omadusi on see, kui lihtne on meie animatsiooniteeki laiendada ja pakkuda efekte, mida enamik arendajaid ei viitsiks nullist kirjutada, nagu elastsed või põrgatavad efektid. Siin on näide lihtsast võtmekaadrite tagasilöögist, mis kasutab hüppekõrguse juhtimiseks kohandatud atribuuti --kf-bounce-from. /* * Bounce – põrgatav sissepääsuanimatsioon * Kasutage hüppekõrguse reguleerimiseks --kf-bounce-from * Vaikimisi: hüppab 100vh-lt (ekraanilt väljas) *Kasutus: * animatsioon: kf-bounce 3s lihtne sisselülitamine; * --kf-bounce-from: 200px; // hüpata 200 piksli kõrguselt */
@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% { tõlkida: 0 0; animatsiooni-ajastamise funktsioon: kergendus; } }
Animatsioonid nagu "elastne" on võtmekaadrite sees olevate arvutuste tõttu pisut keerulisemad. Peame defineerima --kf-elastic-from-X ja --kf-elastic-from-Y eraldi (mõlemad on valikulised) ning koos võimaldavad need luua elastse sissepääsu ekraani mis tahes punktist.
/* * Elastic In – elastne sissepääsuanimatsioon * Algpositsiooni kontrollimiseks kasutage --kf-elastic-from-X ja --kf-elastic-from-Y * Vaikimisi: siseneb ülevalt keskelt (0, -100vh) *Kasutus: * animatsioon: kf-elastic-in 2s easy-in-out mõlemad; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // sisestage alates (-50px, -200px) */
@keyframes kf-elastic-in { 0% { translate: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28% { tõlgi: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100% { tõlkida: 0 0; } }
See lähenemisviis muudab meie projekti täpsemate võtmekaadrite taaskasutamise ja kohandamise lihtsaks, muutes vaid üht kohandatud atribuuti.
.bounce-and-zoom { animatsioon: kf-bounce 3s kergendatav, kf-zoom 3s lineaarne; --kf-zoom-from: 0; }
.bounce-and-slide { animatsioon-kompositsioon: lisa; /* Mõlemad animatsioonid kasutavad tõlkimist */ animatsioon: kf-bounce 3s kergendatav, kf-slide-in 3s easy-out; --kf-slide-from: -200px; }
.elastic-in { animatsioon: kf-elastic-in 2s easy-in-out mõlemad; }
Vaadake pliiatsi võtmekaadrite märke – Demo 7 [kahveldatud], autor Amit Sheen. Siiani oleme näinud, kuidas saame võtmekaadreid nutikalt ja tõhusalt konsolideerida. Muidugi võiksite asju kohandada, et need vastaksid paremini teie projekti vajadustele, kuid oleme käsitlenud näiteid mitmetest levinud animatsioonidest ja igapäevastest kasutusjuhtudest. Ja kui need võtmekaadri märgid on paigas, on meil nüüd võimsad ehitusplokid järjepidevate ja hooldatavate animatsioonide loomiseks kogu projekti jooksul. Pole enam dubleeritud võtmekaadreid ega globaalse ulatuse konflikte. Lihtsalt puhas ja mugav viis kõigi meie animatsioonivajaduste lahendamiseks. Kuid tegelik küsimus on: kuidas me neid ehitusplokke koos koostame? Selle kõik kokku panemine Oleme näinud, et põhiliste võtmekaadrite märkide kombineerimine on lihtne. Me ei vaja midagi erilist, kui defineerida esimene animatsioon, määratleda teine, seada muutujad vastavalt vajadusele ja ongi kõik. /* Pimendamine + sisse libistamine */ .toast { animatsioon: kf-fade-in 0,4 s, kf-slide-in 0,4 s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Sissesuumimine + tuhmumine */ .modal { animatsioon: kf-fade-in 0,3 s, kf-zoom 0,3 s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0,7; --kf-zoom-to: 1; }
/* Lükake sisse + pulss */ .notification { animatsioon: kf-slide-in 0,5 s, kf-impulss 1,2s kergendus sisse-välja lõpmatu vahelduv; --kf-slide-from: -100px 0; --kf-impulss-skaala-alates: 0,95; --kf-impulss-skaala-to: 1,05; }
Need kombinatsioonid toimivad suurepäraselt, kuna iga animatsioon sihib erinevat omadust: läbipaistmatus, teisendus (tõlgi/mastaapimine) jne. Kuid mõnikord tuleb ette konflikte ja me peame teadma, miks ja kuidas nendega toime tulla. Kui kaks animatsiooni üritavad animeerida sama omadust – näiteks mõlemad animeerivad skaala või mõlemad animeerivad läbipaistmatust –, ei vasta tulemus ootustele. Vaikimisi rakendatakse sellele atribuudile tegelikult ainult ühte animatsiooni, mis on animatsioonide loendis viimane. See piirab seda, kuidas CSS käsitleb mitut animatsiooni samal atribuudil. Näiteks see ei tööta nii nagu ette nähtud, kuna rakendub ainult kf-impulss-animatsioon. .bad-combo { animatsioon: kf-zoom 0,5 s edasi, kf-impulss 1,2s lõpmatu vahelduv; --kf-zoom-from: 0,5; --kf-zoom-to: 1.2; --kf-impulss-skaala-alates: 0,8; --kf-impulss-scale-to: 1.1; }
Animatsiooni lisamine Lihtsaim ja otsesem viis sama omadust mõjutavate animatsioonide käsitlemiseks on kasutada atribuuti animatsioon-koostis. Viimases ülaltoodud näites asendab kf-impulss-animatsioon kf-suumi animatsiooni, nii et me ei näe esialgset suumi ega saavuta oodatud skaalat 1,2-ni. Seades lisatava animatsioonikompositsiooni, käsime brauseril mõlemad animatsioonid kombineerida. See annab meile soovitud tulemuse. .component-two { animatsioon-kompositsioon: lisa; }
Vaadake pliiatsi võtmekaadrite märke – Demo 8 [kahveldatud], autor Amit Sheen. See lähenemisviis toimib hästi enamikul juhtudel, kui soovime kombineerida sama vara mõjusid. See on kasulik ka siis, kui peame kombineerima animatsioone staatiliste omaduste väärtustega. Näiteks kui meil on element, mis kasutab atribuuti translate, et paigutada see täpselt sinna, kus me tahame, ja seejärel tahame seda animeerida kf-slide-in võtmekaadritega, saame ebameeldiva nähtava hüppe ilma animatsioonita. Vaadake pliiatsi võtmekaadrite märke – Demo 9 [kahveldatud], autor Amit Sheen. Animatsiooni-kompositsiooni lisamisega kombineeritakse animatsioon sujuvalt olemasolevagateisendada, nii et element jääb paigale ja animeerub ootuspäraselt. Animatsioon Stagger Teine viis mitme animatsiooni käsitlemiseks on nende "jaotamine" – st alustada teist animatsiooni veidi pärast esimese lõppu. See ei ole lahendus, mis töötab iga juhtumi puhul, kuid see on kasulik, kui meil on sissepääsuanimatsioon, millele järgneb pidev animatsioon. /* tuhmumine + läbipaistmatuse impulss */ .notification { animatsioon: kf-fade-in 2s kergendus, kf-impulss 0,5s 2s kergendus sisse-välja lõpmatu vahelduv; --kf-impulsi läbipaistmatus-to: 0,5; }
Vaadake pliiatsi võtmekaadrite märke – Amit Sheeni demo 10 [kahveldatud]. Tellimus on oluline Suur osa animatsioonidest, millega me töötame, kasutab transformatsiooni omadust. Enamikul juhtudel on see lihtsalt mugavam. Sellel on ka jõudluse eelis, kuna teisendusanimatsioone saab kiirendada GPU-ga. Kuid kui me kasutame teisendusi, peame leppima sellega, et järjekord, milles me oma teisendusi sooritame, on oluline. Palju. Senises võtmekaadris oleme kasutanud individuaalseid teisendusi. Vastavalt spetsifikatsioonidele rakendatakse neid alati kindlas järjekorras: kõigepealt tõlgitakse elementi, seejärel pööratakse ja seejärel skaleeritakse. See on mõistlik ja see on see, mida enamik meist ootab. Kui aga kasutada teisendusomadust, on funktsioonide kirjutamise järjekord nende rakendamise järjekord. Sel juhul, kui me liigutame midagi 100 pikslit X-teljel ja seejärel pöörame seda 45 kraadi võrra, ei ole see sama, kui seda kõigepealt 45 kraadi võrra pöörata ja seejärel 100 pikslit liigutada. /* Roosa ruut: kõigepealt tõlkige, seejärel pöörake */ .example-one { teisendus: translateX(100px) rotate(45deg); }
/* Roheline ruut: kõigepealt pöörake, seejärel tõlkige */ .example-two { teisendus: pööra(45°) translateX(100px); }
Vaadake pliiatsi võtmekaadrite märke – Demo 11 [kahveldatud], autor Amit Sheen. Kuid vastavalt teisendusjärjekorrale toimuvad kõik individuaalsed teisendused – kõik, mida oleme võtmekaadrite märkide jaoks kasutanud – enne teisendusfunktsioone. See tähendab, et kõik, mille määrate teisendusatribuudis, juhtub pärast animatsioone. Aga kui seate näiteks tõlke koos kf-spin võtmekaadritega, toimub tõlge enne animatsiooni. Segaduses veel?! See toob kaasa olukordi, kus staatilised väärtused võivad põhjustada sama animatsiooni jaoks erinevaid tulemusi, näiteks järgmisel juhul:
/* Ühine animatsioon mõlemale spinnerile */ .spinner { animatsioon: kf-spin 1s lineaarne lõpmatu; }
/* Roosa spinner: tõlgi enne pööramist (individuaalne teisendus) */ .spinner-pink { tõlkida: 100% 50%; }
/* Roheline vurr: pööra, siis tõlki (funktsioonide järjekord) */ .spinner-green { teisenda: translate(100%, 50%); }
Vaadake pliiatsi võtmekaadrite märke – Demo 12 [kahveldatud], autor Amit Sheen. Näete, et esimene spinner (roosa) saab tõlke, mis juhtub enne kf-spin pöörlemist, nii et see liigub kõigepealt oma kohale ja seejärel pöörleb. Teine spinner (roheline) saab funktsiooni translate(), mis toimub pärast individuaalset teisendust, nii et element kõigepealt pöörleb, seejärel liigub oma praeguse nurga suhtes ja saame laia orbiidi efekti. Ei, see pole viga. See on vaid üks neist asjadest, mida peame CSS-i kohta teadma ja meeles pidama, kui töötate mitme animatsiooni või mitme teisendusega. Vajadusel saate luua ka täiendava komplekti kf-spin-alt võtmekaadreid, mis pööravad elemente funktsiooni rotate() abil. Vähendatud liikumine Ja kuigi me räägime alternatiivsetest võtmekaadritest, ei saa me ignoreerida valikut "Animatsioon puudub". Võtmekaadrite žetoonide kasutamise üks suurimaid eeliseid on see, et juurdepääsetavuse saab sisse lülitada ja seda on tegelikult üsna lihtne teha. Luues oma võtmekaadrid juurdepääsetavust silmas pidades, saame tagada, et vähendatud liikumist eelistavad kasutajad saavad sujuvama ja vähem häiriva kogemuse ilma lisatöö või koodi dubleerimiseta. Sõna „Vähendatud liikumine” täpne tähendus võib animatsiooni ja projekti lõikes veidi muutuda, kuid siin on mõned olulised punktid, mida meeles pidada. Võtmekaadrite vaigistamine Kuigi mõnda animatsiooni saab pehmendada või aeglustada, on teisi, mis peaksid vähendatud liikumise taotlemisel täielikult kaduma. Pulsanimatsioonid on hea näide. Veendumaks, et neid animatsioone ei töötata vähendatud liikumise režiimis, saame need lihtsalt sobivasse meediumipäringusse mähkida.
@media (prefers-redduced-motion: no-preference) { @keyfrmaes kf-pulse { alates { skaala: var(--kf-impulss-skaala-from, 1); läbipaistmatus: var(--kf-impulss-läbipaistmatus-from, 1); } to { skaala: var(--kf-impulss-scale-to, 1); läbipaistmatus:var(--kf-impulsi-läbipaistmatus-to, 1); } } }
See tagab, et kasutajad, kes on määranud eelistus-vähendatud liikumise, ei näe animatsiooni ja saavad oma eelistustele vastava kogemuse. Instant In On mõningaid võtmekaadreid, mida me lihtsalt eemaldada ei saa, näiteks sissepääsuanimatsioonid. Väärtus peab muutuma, animeerima; vastasel juhul ei ole elemendil õigeid väärtusi. Kuid vähendatud liikumise korral peaks see üleminek algväärtusest toimuma kohe. Selle saavutamiseks määratleme täiendava võtmekaadrite komplekti, mille väärtus hüppab kohe lõppolekusse. Nendest saavad meie vaikevõtmekaadrid. Seejärel lisame meediumipäringusse tavalised võtmekaadrid eelistuste-vähendatud liikumise seadistuse jaoks no-Preference, nagu eelmises näites. /* hüppab liikumise vähendamiseks kohe sisse */ @keyframes kf-zoom { alates, kuni { skaala: var(--kf-zoom-to, 1); } }
@media (prefers-redduced-motion: no-preference) { /* Algsed suumi võtmekaadrid */ @keyframes kf-zoom { alates { skaala: var(--kf-zoom-from, 0,8); } to { skaala: var(--kf-zoom-to, 1); } } }
Nii näevad kasutajad, kes eelistavad vähendatud liikumist, elementi koheselt lõplikus olekus, samas kui kõik teised saavad animeeritud ülemineku. Pehme lähenemine On juhtumeid, kus me tahame küll liikumist säilitada, kuid palju pehmemalt ja rahulikumalt kui algne animatsioon. Näiteks võime põrgatava sissepääsu asendada õrna sissepääsuga.
@keyframes kf-bounce { /* Pehme sissepimendamine liikumise vähendamiseks */ }
@media (prefers-redduced-motion: no-preference) { @keyframes kf-bounce { /* Algsed tagasilöögi võtmekaadrid */ } }
Nüüd saavad kasutajad, kellel on lubatud liikumine lubatud, endiselt välimuse tunde, kuid ilma põrgete või elastse animatsiooni intensiivse liikumiseta. Kui ehitusplokid on paigas, on järgmine küsimus, kuidas muuta need tegeliku töövoo osaks. Paindlike võtmekaadrite kirjutamine on üks asi, kuid nende usaldusväärseks muutmine suures projektis nõuab mõningaid strateegiaid, mida ma pidin kõvasti õppima. Rakendusstrateegiad ja parimad tavad Kui meil on olemas kindel võtmekaadrite žetoonide raamatukogu, on tõeline väljakutse nende igapäevatöösse kaasamine.
Kiusatus on panna kõik võtmekaadrid korraga sisse ja kuulutada probleem lahendatuks, kuid praktikas olen avastanud, et parimad tulemused annavad järkjärgulise kasutuselevõtu. Alustage kõige levinumate animatsioonidega, nagu tuhmumine või libistamine. Need on lihtsad võidud, mis näitavad kohest väärtust, ilma et oleks vaja suuri ümberkirjutusi. Nime panemine on veel üks punkt, mis väärib tähelepanu. Järjepidev eesliide või nimeruum teeb selgeks, millised animatsioonid on märgid ja millised kohalikud ühekordsed. Samuti hoiab see ära juhuslikud kokkupõrked ja aitab uutel meeskonnaliikmetel jagatud süsteemi ühe pilguga ära tunda. Dokumentatsioon on sama oluline kui kood ise. Isegi lühike kommentaar iga võtmekaadri märgi kohal võib hiljem tunde ära arvata. Arendaja peaks suutma avada žetoonide faili, otsida vajalikku efekti ja kopeerida kasutusmustri otse oma komponenti. Paindlikkus muudab selle lähenemisviisi pingutust väärt. Mõistlike kohandatud atribuutide avaldamisega anname meeskondadele ruumi animatsiooni kohandamiseks ilma süsteemi rikkumata. Samal ajal proovige mitte üle komplitseerida. Esitage olulised nupud ja jätke ülejäänud arvamus. Lõpuks pidage meeles juurdepääsetavust. Mitte iga animatsioon ei vaja vähendatud liikumise alternatiivi, kuid paljud seda vajavad. Nende seadistuste varajane sissetöötamine tähendab, et me ei pea neid kunagi hiljem tagantjärele paigaldama ja see näitab hoolitsust, mida meie kasutajad märkavad isegi siis, kui nad seda kunagi ei maini.
Minu kogemuse kohaselt paneb võtmekaadri žetoonide käsitlemine meie kujunduslubade töövoo osana need kinni. Kui need on paigas, ei tunne nad end enam eriefektidena ja muutuvad disainikeele osaks, mis on toote liikumise ja reageerimise loomulik jätk. Pakkimine Animatsioonid võivad olla liideste loomisel üks rõõmustavamaid osi, kuid ilma struktuurita võivad neist saada ka üks suurimaid frustratsiooni allikaid. Võtmekaadreid žetoonidena käsitledes võtate midagi, mis on tavaliselt räpane ja raskesti hallatav, ning muudate selle selgeks ja prognoositavaks süsteemiks. Tegelik väärtus ei seisne ainult mõne koodirea salvestamises. See on kindel, et kui kasutate tuhmumist, libistamist, suumimist või keerutamist, teate täpselt, kuidas see kogu projekti jooksul käitub. See on paindlikkus, mis tuleneb kohandatud omadustest ilma lõputute variatsioonide kaoseta. Ja see on pigem vundamendi sisseehitatud juurdepääsetavuses kui lisatudjärelmõte. Olen näinud, et need ideed töötavad erinevates meeskondades ja erinevates koodibaasides ning muster on alati sama. Kui märgid on paigas, lakkavad võtmekaadrid olemast hajutatud trikkide kogum ja muutuvad kujunduskeele osaks. Need muudavad toote tahtlikumaks, järjepidevamaks ja elavamaks. Kui võtate sellest artiklist ühe asja, siis olgu see järgmine: animatsioonid väärivad sama hoolt ja ülesehitust, mida me juba värvidele, tüpograafiale ja vahedele anname. Väike investeering võtmekaadri märkidesse tasub end ära iga kord, kui teie liides liigub.
