Iedomājieties šo: jūs pievienojaties jaunam projektam, iedziļināties kodu bāzē un dažu pirmo stundu laikā jūs atklājat kaut ko kaitinoši pazīstamu. Stila lapās ir izkaisītas vairākas @keyframes definīcijas tām pašām pamata animācijām. Trīs dažādi izbalēšanas efekti, divi vai trīs slaidu varianti, nedaudz tālummaiņas animācijas un vismaz divas dažādas griešanās animācijas, jo, kāpēc gan ne? @keyframes impulss { no { mērogs: 1; } uz { mērogs: 1,1; } }
@keyframes bigger-impulse { 0%, 20%, 100% { mērogs: 1; } 10%, 40% { mērogs: 1,2; } }
Ja šis scenārijs izklausās pazīstams, jūs neesat viens. Pēc manas pieredzes dažādos projektos, viens no konsekventākajiem ātrajiem panākumiem, ko varu sniegt, ir atslēgu kadru konsolidēšana un standartizēšana. Tas ir kļuvis tik uzticams modelis, ka es tagad gaidu šo tīrīšanu kā vienu no maniem pirmajiem uzdevumiem jebkurā jaunā kodu bāzē. Loģika aiz haosa Šī atlaišana ir pilnīgi saprātīga, ja par to domājat. Mēs visi savā ikdienas darbā izmantojam vienas un tās pašas pamata animācijas: izbalēšanu, slaidus, tālummaiņu, griešanos un citus izplatītus efektus. Šīs animācijas ir diezgan vienkāršas, un, lai paveiktu darbu, ir viegli izveidot ātru @keyframes definīciju. Bez centralizētas animācijas sistēmas izstrādātāji, protams, raksta šos atslēgas kadrus no nulles, nezinot, ka līdzīgas animācijas jau pastāv citur kodu bāzē. Tas ir īpaši izplatīts, strādājot uz komponentiem balstītās arhitektūrās (ko mūsdienās dara lielākā daļa no mums), jo komandas bieži strādā paralēli dažādās lietojumprogrammas daļās. Rezultāts? Animācijas haoss. Mazā problēma Acīmredzamākās problēmas ar atslēgu kadru dublēšanu ir izniekots izstrādes laiks un nevajadzīga koda uzpūšanās. Vairākas atslēgas kadru definīcijas nozīmē vairākas vietas, kuras jāatjaunina, mainoties prasībām. Vai nepieciešams pielāgot izbalēšanas animācijas laiku? Jums būs jāatrod katrs gadījums savā kodu bāzē. Vai vēlaties standartizēt atvieglošanas funkcijas? Lai veicas visu variantu atrašanā. Šis apkopes punktu reizinājums padara pat vienkāršus animācijas atjauninājumus par laikietilpīgu uzdevumu. Lielāka Problēma Šī atslēgkadru dublēšanās rada daudz mānīgāku problēmu, kas slēpjas zem virsmas: globālo tvēruma slazdu. Pat strādājot ar uz komponentiem balstītām arhitektūrām, CSS atslēgkadri vienmēr tiek definēti globālā mērogā. Tas nozīmē, ka visi atslēgas kadri attiecas uz visiem komponentiem. Vienmēr. Jā, jūsu animācijā ne vienmēr tiek izmantoti atslēgas kadri, ko definējāt savā komponentā. Tas izmanto pēdējos atslēgas kadrus, kas atbilst tieši tam pašam nosaukumam, kas tika ielādēti globālajā tvērumā. Kamēr visi atslēgas kadri ir identiski, tā var šķist neliela problēma. Taču brīdī, kad vēlaties pielāgot animāciju konkrētam lietošanas gadījumam, jūs nokļūstat grūtībās vai, vēl ļaunāk, jūs tās izraisīsit. Vai nu jūsu animācija nedarbosies, jo kāds cits komponents tiek ielādēts pēc jūsējā, pārrakstot jūsu atslēgkadrus, vai arī jūsu komponents tiek ielādēts pēdējā laikā un nejauši maina katra cita komponenta, kas izmanto šī atslēgas kadra nosaukumu, animācijas darbību, un jūs, iespējams, pat to nenojaušat. Šeit ir vienkāršs piemērs, kas parāda problēmu: .component-one { /* komponentu stili */ animācija: impulsa 1s vieglums-in-out bezgalīgs alternatīvs; }
/* šī @keyframes definīcija nedarbosies */ @keyframes impulss { no { mērogs: 1; } uz { mērogs: 1,1; } }
/* vēlāk kodā... */
.component-two { /* komponentu stili */ animācija: impulsa 1s vieglums-in-out bezgalīgs; }
/* šie atslēgas kadri attieksies uz abiem komponentiem */ @keyframes impulss { 0%, 20%, 100% { mērogs: 1; } 10%, 40% { mērogs: 1,2; } }
Abos komponentos tiek izmantots viens un tas pats animācijas nosaukums, taču otrā @keyframes definīcija pārraksta pirmo. Tagad gan komponents viens, gan komponents-otrs izmantos otros atslēgkadrus neatkarīgi no tā, kurš komponents ir definējis kādus atslēgkadrus. Skatiet pildspalvas atslēgkadru marķierus — 1. demonstrāciju [forked], ko izveidojis Amits Šīns. Sliktākā daļa? Tas bieži darbojas nevainojami vietējā attīstībā, bet mistiski sabojājas ražošanā, kad veidošanas procesi maina jūsu stila lapu ielādes secību. Jūs iegūstat animācijas, kas darbojas atšķirīgi atkarībā no tā, kuri komponenti tiek ielādēti un kādā secībā. Risinājums: vienoti atslēgas kadri Atbilde uz šo haosu ir pārsteidzoši vienkārša: iepriekš definēti dinamiski atslēgas kadri, kas tiek glabāti koplietotā stila lapā. Tā vietā, lai ļautu katram komponentam definēt savas animācijas, mēs izveidojam centralizētus atslēgkadrus, kas ir labi dokumentēti un viegli lietojami.lietojams, apkopjams un pielāgots jūsu projekta īpašajām vajadzībām. Uztveriet to kā atslēgu kadru marķierus. Tāpat kā mēs izmantojam marķierus krāsām un atstarpēm, un daudzi no mums jau izmanto marķierus animācijas īpašībām, piemēram, ilguma un atvieglošanas funkcijām, kāpēc gan neizmantot marķierus arī atslēgkadriem? Šo pieeju var dabiski integrēt ar jebkuru pašreizējo dizaina pilnvaru darbplūsmu, kuru izmantojat, vienlaikus atrisinot gan nelielu problēmu (koda dublēšanās), gan lielāku problēmu (globāla mēroga konflikti). Ideja ir vienkārša: izveidojiet vienotu patiesības avotu visām mūsu kopīgajām animācijām. Šajā koplietotajā stila lapā ir rūpīgi izstrādāti atslēgas kadri, kas aptver mūsu projektā faktiski izmantotos animācijas modeļus. Vairs nav jāmin, vai mūsu kodu bāzē jau pastāv izbalēšanas animācija. Vairs nekādas nejaušas animācijas pārrakstīšanas no citiem komponentiem. Bet šeit ir galvenais: tās nav tikai statiskas kopēšanas un ielīmēšanas animācijas. Tie ir izstrādāti tā, lai tie būtu dinamiski un pielāgojami, izmantojot CSS pielāgotos rekvizītus, ļaujot mums saglabāt konsekvenci, vienlaikus saglabājot elastību pielāgot animācijas konkrētiem lietošanas gadījumiem, piemēram, ja jums ir nepieciešama nedaudz lielāka impulsa animācija vienuviet. Pirmā atslēgas kadru marķiera izveide Viens no pirmajiem zemu nokarenajiem augļiem, kas mums būtu jārisina, ir “izbalinātā” animācija. Vienā no saviem nesenajiem projektiem es atradu vairāk nekā duci atsevišķu izbalēšanas definīciju, un jā, tās visas vienkārši animēja necaurredzamību no 0 līdz 1. Tātad, izveidosim jaunu stila lapu, nosauksim to par kf-tokens.css, importēsim to mūsu projektā un ievietojiet tajā mūsu atslēgas kadrus ar atbilstošiem komentāriem. /* keyframes-tokens.css */
/* * Fade In — izbalēšanas ieejas animācija * Lietojums: animācija: kf-fade-in 0,3 s atvieglošana; */ @keyframes kf-fade-in { no { necaurredzamība: 0; } uz { necaurredzamība: 1; } }
Šī viena @keyframes deklarācija aizstāj visas mūsu kodu bāzē izkaisītās izbalēšanas animācijas. Tīrs, vienkāršs un globāli piemērojams. Un tagad, kad šis marķieris ir definēts, mēs varam to izmantot no jebkura komponenta visā mūsu projektā: .modal { animācija: kf-fade-in 0.3s atvieglojums; }
.tooltip { animācija: kf-fade-in 0,2s ease-in-out; }
.notification { animācija: kf-fade-in 0,5 s atvieglojums; }
Skatiet pildspalvas atslēgkadru marķierus — Demo 2 [forked], ko izveidojis Amits Šīns. Piezīme. Mēs izmantojam prefiksu kf- visos mūsu @keyframes nosaukumos. Šis prefikss kalpo kā nosaukumvieta, kas novērš nosaukšanas konfliktus ar esošām projektā esošajām animācijām un ļauj nekavējoties saprast, ka šie atslēgas kadri nāk no mūsu atslēgkadru marķieru faila. Dinamiskā slaida veidošana Kf-fade-in atslēgkadri darbojas lieliski, jo tie ir vienkārši un ir maz vietas, lai kaut ko sajauktu. Tomēr citās animācijās mums ir jābūt daudz dinamiskākiem, un šeit mēs varam izmantot CSS pielāgoto rekvizītu milzīgo jaudu. Šeit atslēgkadru marķieri patiešām spīd, salīdzinot ar izkaisītām statiskām animācijām. Ņemsim parastu scenāriju: “iebīdāmās” animācijas. Bet no kurienes slīd iekšā? 100 pikseļi no labās puses? 50% no kreisās puses? Vai tas jāievada no ekrāna augšdaļas? Vai varbūt iepeldēt no apakšas? Tik daudz iespēju, taču tā vietā, lai katram virzienam un katrai variācijai izveidotu atsevišķus atslēgas kadrus, mēs varam izveidot vienu elastīgu marķieri, kas pielāgojas visiem scenārijiem: /* * Slide In — virziena slaidu animācija * Izmantojiet --kf-slide-from, lai kontrolētu virzienu * Noklusējums: slīd no kreisās puses (-100%) *Lietošana: * animācija: kf-slide-in 0,3s atvieglojums; * --kf-slide-from: -100px 0; // slaids no kreisās puses * --kf-slide-from: 100px 0; // slaids no labās puses * --kf-slide-from: 0-50px; // slaids no augšas */
@keyframes kf-slide-in { no { tulkot: var(--kf-slide-from, -100% 0); } uz { tulkot: 0 0; } }
Tagad mēs varam izmantot šo vienu @keyframes marķieri jebkuram slaida virzienam, vienkārši mainot pielāgoto rekvizītu --kf-slide-from: .sidebar { animācija: kf-slide-in 0,3 s atvieglojums; /* Izmanto noklusējuma vērtību: slaidi no kreisās puses */ }
.notification { animācija: kf-slide-in 0,4s atvieglojums; --kf-slide-from: 0-50px; /* slaids no augšas */ }
.modal { animācija: kf-fade-in 0,5 s, kf-slide-in 0,5 s kubikmetrs (0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* slaids no apakšējās labās puses */ }
Šī pieeja sniedz mums neticamu elastību, vienlaikus saglabājot konsekvenci. Viena atslēgas kadra deklarācija, bezgalīgas iespējas. Skatiet pildspalvas atslēgkadru marķierus — Demo 3 [forked], ko izveidojis Amits Šīns. Un, ja mēs vēlamies padarīt mūsu animācijas vēl elastīgākas, pieļaujot arī “izbīdāmos” efektus, mēs varamvienkārši pievienojiet --kf-slide-to pielāgotu rekvizītu, līdzīgi tam, ko redzēsim nākamajā sadaļā. Divvirzienu tālummaiņas atslēgkadri Vēl viena izplatīta animācija, kas tiek dublēta projektos, ir tālummaiņas efekti. Neatkarīgi no tā, vai tā ir smalka mēroga palielināšana tostu ziņojumiem, dramatiska tuvināšana modāliem vai maigas samazināšanas efekts virsrakstiem, tālummaiņas animācijas ir visur. Tā vietā, lai katrai skalas vērtībai izveidotu atsevišķus atslēgkadrus, izveidosim vienu elastīgu kf-zoom atslēgkadru kopu:
/* * Tālummaiņa - mēroga animācija * Izmantojiet --kf-zoom-from un --kf-zoom-to, lai kontrolētu mēroga vērtības * Noklusējums: tālummaiņa no 80% līdz 100% (0,8 līdz 1) *Lietošana: * animācija: kf-zoom 0.2s atvieglojums; * --kf-zoom-from: 0,5; --kf-zoom-to: 1; // tālummaiņa no 50% līdz 100% * --kf-zoom-from: 1; --kf-zoom-to: 0; // tālummaiņa no 100% līdz 0% * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // tālummaiņa no 100% līdz 110% */
@keyframes kf-zoom { no { mērogs: var(--kf-zoom-from, 0,8); } uz { mērogs: var(--kf-zoom-to, 1); } }
Izmantojot vienu definīciju, mēs varam sasniegt jebkuru nepieciešamo tālummaiņas variantu: .toast { animācija: kf-slide-in 0,2 s, kf-zoom 0.4s atvieglojums; --kf-slide-from: 0 100%; /* slaids no augšas */ /* Izmanto noklusējuma tālummaiņu: mērogs no 80% līdz 100% */ }
.modal { animācija: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* dramatiska tālummaiņa no 0% līdz 100% */ }
.heading { animācija: kf-fade-in 2s, kf-zoom 2s atvieglojums; --kf-zoom-from: 1.2; --kf-zoom-to: 0,8; /* maigi samazināt mērogu */ }
Noklusējuma vērtība 0,8 (80%) lieliski darbojas lielākajai daļai lietotāja interfeisa elementu, piemēram, tostu ziņojumiem un kartītēm, taču to joprojām ir viegli pielāgot īpašiem gadījumiem. Skatiet pildspalvas atslēgkadru marķierus — Demo 4 [forked], ko izveidojis Amits Šīns. Iespējams, pēdējos piemēros esat pamanījis kaut ko interesantu: mēs esam apvienojuši animācijas. Viena no galvenajām priekšrocībām, strādājot ar @keyframes marķieriem, ir tā, ka tie ir izstrādāti tā, lai tie nevainojami integrētos viens ar otru. Šis gludais sastāvs ir apzināts, nevis nejaušs. Animācijas kompozīciju sīkāk apspriedīsim vēlāk, tostarp to, kur tās var kļūt problemātiskas, taču lielākā daļa kombināciju ir vienkāršas un viegli īstenojamas. Piezīme. Rakstot šo rakstu un varbūt tieši tāpēc, ka es pārdomāju visu ieejas animāciju ideju. Ņemot vērā visus nesenos CSS sasniegumus, vai mums tie joprojām ir vajadzīgi? Par laimi Ādams Ārgils izpētīja tos pašus jautājumus un lieliski tos izteica savā emuārā. Tas nav pretrunā ar šeit rakstīto, taču tā ir pieeja, kuru ir vērts apsvērt, it īpaši, ja jūsu projekti lielā mērā ir atkarīgi no ieejas animācijām. Nepārtrauktas animācijas Kamēr ieejas animācijas, piemēram, “izbalināt”, “slīdēt” un “tuvināt”, notiek vienu reizi un pēc tam apstājas, nepārtrauktas animācijas tiek cilpas bezgalīgi, lai pievērstu uzmanību vai norādītu uz notiekošo darbību. Divas visizplatītākās nepārtrauktās animācijas, ar kurām saskaros, ir “spin” (ielādēšanas indikatoriem) un “pulse” (svarīgu elementu izcelšanai). Šīs animācijas rada unikālas problēmas, veidojot atslēgas kadru marķierus. Atšķirībā no ieejas animācijām, kas parasti pāriet no viena stāvokļa uz otru, nepārtrauktās animācijas uzvedības modeļiem ir jābūt ļoti pielāgojamiem. Spin Doctor Šķiet, ka katrs projekts izmanto vairākas griešanās animācijas. Daži griežas pulksteņrādītāja virzienā, citi pretēji. Daži veic vienu 360 grādu rotāciju, citi veic vairākus pagriezienus, lai panāktu ātrāku efektu. Tā vietā, lai katram variantam izveidotu atsevišķus atslēgas kadrus, izveidosim vienu elastīgu griezienu, kas apstrādā visus scenārijus.
/* * Spin - rotācijas animācija * Izmantojiet --kf-spin-from un --kf-spin-to, lai kontrolētu rotācijas diapazonu * Izmantojiet --kf-spin-turns, lai kontrolētu rotācijas apjomu * Noklusējums: griežas no 0° līdz 360° (1 pilns apgrieziens) *Lietošana: * animācija: kf-spin 1s lineārs bezgalīgs; * --kf-spin-turns: 2; // 2 pilni apgriezieni * --kf-spin-from: 0deg; --kf-spin-to: 180°; // pusrotācija * --kf-spin-from: 0deg; --kf-spin-to: -360°; // pretēji pulksteņrādītāja virzienam */
@keyframes kf-spin { no { pagriezt: var(--kf-spin-from, 0deg); } uz { pagriezt: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Tagad mēs varam izveidot jebkuru griešanās variantu, kas mums patīk:
.loading-spinner { animācija: kf-spin 1s lineārs bezgalīgs; /* Izmanto noklusējuma: griežas no 0 grādiem līdz 360 grādiem */ }
.fast-loader { animācija: kf-spin 1.2s easy-in-out bezgalīga alternatīva; --kf-spin-turns: 3; /* 3 pilni apgriezieni katrā virzienā ciklā*/ }
.steped-reverse { animācija: kf-spin 1.5s soļi(8) bezgalīgs; --kf-spin-to: -360°; /* pretēji pulksteņrādītāja virzienam */ }
.subtle-wiggle { animācija: kf-spin 2s easy-in-out bezgalīga alternatīva; --kf-spin-no: -16grādi; --kf-spin-to: 32deg; /* kustēties par 36 grādiem: no -18 grādiem līdz +18 grādiem */ }
Skatiet pildspalvas atslēgkadru marķierus — Demo 5 [forked], ko izveidojis Amits Šīns. Šīs pieejas skaistums ir tāds, ka tie paši atslēgas kadri darbojas, lai ielādētu griežņus, rotējošas ikonas, šūpošanās efektus un pat sarežģītas vairāku apgriezienu animācijas. Pulsa paradokss Impulsu animācijas ir sarežģītākas, jo tās var “pulsēt” dažādas īpašības. Daži pulsē skalu, citi pulsē necaurredzamību, un daži pulsē krāsu īpašības, piemēram, spilgtumu vai piesātinājumu. Tā vietā, lai katram īpašumam izveidotu atsevišķus atslēgkadrus, mēs varam izveidot atslēgkadrus, kas darbojas ar jebkuru CSS īpašumu. Tālāk ir sniegts impulsa atslēgas kadra piemērs ar mēroga un necaurredzamības opcijām.
/* * Pulss - pulsējoša animācija * Izmantojiet --kf-pulse-scale-from un --kf-pulse-scale-to, lai kontrolētu skalas diapazonu * Izmantojiet --kf-pulse-opacity-from un --kf-pulse-pacity-to, lai kontrolētu necaurredzamības diapazonu * Noklusējums: nav impulsa (visas vērtības 1) *Lietošana: * animācija: kf-pulse 2s vieglums-in-out bezgalīgs aizstājējs; * --kf-impulsu skala-no: 0,95; --kf-pulse-scale-to: 1,05; // mēroga impulss * --kf-impulsa necaurredzamība-no: 0,7; --kf-impulsa necaurredzamība-līdz: 1; // necaurredzamības impulss */
@keyframes kf-pulse { no { skala: var(--kf-pulse-scale-from, 1); necaurredzamība: var(--kf-impulss-caurredzamība-no, 1); } uz { skala: var(--kf-pulse-scale-to, 1); necaurredzamība: var(--kf-impulss-caurredzamība-to, 1); } }
Tas rada elastīgu impulsu, kas var animēt vairākas īpašības: .call-to-action { animācija: kf-pulse 0.6s bezgalīgs alternate; --kf-impulsa necaurredzamība-no: 0,5; /* necaurredzamības impulss */ }
.notification-dot { animācija: kf-impulss 0.6s easy-in-out infinite alternate; --kf-impulsu skala-no: 0,9; --kf-pulse-scale-to: 1.1; /* mēroga impulss */ }
.text-highlight { animācija: kf-pulse 1,5s easy-out bezgalīgs; --kf-impulsu skala-no: 0,8; --kf-impulsa necaurredzamība-no: 0,2; /* mēroga un necaurredzamības impulss */ }
Skatiet pildspalvas atslēgas kadru marķierus — Demo 6 [forked], ko izveidojis Amits Šīns. Šis viens kf-impulsa atslēgkadrs var tikt galā ar visu, sākot no smalkas uzmanības piesaistīšanas līdz dramatiskām iezīmēm, vienlaikus to viegli pielāgojot. Uzlabotā atvieglošana Viena no lieliskajām atslēgkadru marķieru izmantošanas īpašībām ir tas, cik viegli ir paplašināt mūsu animācijas bibliotēku un nodrošināt tādus efektus, kurus vairums izstrādātāju neapniktu rakstīt no nulles, piemēram, elastīgos vai atlēcienus. Šeit ir piemērs vienkāršai atslēgkadru pilnvarai, kas izmanto --kf-bounce-from pielāgotu rekvizītu, lai kontrolētu lēciena augstumu. /* * Atlekšana — atlēcoša ieejas animācija * Izmantojiet --kf-bounce-from, lai kontrolētu lēciena augstumu * Noklusējums: pārlec no 100vh (ārpus ekrāna) *Lietošana: * animācija: kf-bounce 3s atvieglojums; * --kf-bounce-from: 200px; // lēkt no 200 pikseļu augstuma */
@keyframes kf-bounce { 0% { tulkot: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { tulkot: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { tulkot: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { tulkot: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85% { tulkot: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { tulkot: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { tulkot: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { tulkot: 0 0; animācijas laika funkcija: atvieglošana; } }
Animācijas, piemēram, “elastīgās”, ir nedaudz sarežģītākas, jo tiek veikti aprēķini atslēgu kadros. Mums atsevišķi jādefinē --kf-elastic-from-X un --kf-elastic-from-Y (abi nav obligāti), un kopā tie ļauj izveidot elastīgu ieeju no jebkura ekrāna punkta.
/* * Elastic In - elastīga ieejas animācija * Izmantojiet --kf-elastic-from-X un --kf-elastic-from-Y, lai kontrolētu sākuma pozīciju * Noklusējums: ieiet no augšas centra (0, -100vh) *Lietošana: * animācija: kf-elastic-in 2s easy-in-out abi; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // ievadiet no (-50px, -200px) */
@keyframes kf-elastic-in { 0% { tulkot: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { tulkot: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28% { tulkot: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { tulkot: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { tulkot: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { tulkot: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88% { tulkot: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100% { tulkot: 0 0; } }
Šī pieeja ļauj viegli atkārtoti izmantot un pielāgot uzlabotos atslēgkadrus visā mūsu projektā, vienkārši mainot vienu pielāgotu rekvizītu.
.bounce-and-zoom { animācija: kf-bounce 3s atvieglojums, kf-zoom 3s lineārs; --kf-zoom-from: 0; }
.bounce-and-slide { animācija-kompozīcija: pievienot; /* Abās animācijās tiek izmantots tulkojums */ animācija: kf-bounce 3s atvieglojums, kf-slide-in 3s atvieglojums; --kf-slide-from: -200px; }
.elastic-in { animācija: kf-elastic-in 2s ease-in-out abi; }
Skatiet pildspalvas atslēgas kadru marķierus — Demo 7 [forked], ko izveidojis Amits Šīns. Līdz šim mēs esam redzējuši, kā mēs varam gudri un efektīvi konsolidēt atslēgkadrus. Protams, jūs varētu vēlēties pielāgot lietas, lai tās labāk atbilstu jūsu projekta vajadzībām, taču mēs esam apskatījuši vairāku izplatītu animāciju un ikdienas lietošanas gadījumu piemērus. Izmantojot šos atslēgkadru marķierus, tagad mums ir jaudīgi elementi konsekventu, uzturējamu animāciju izveidei visā projektā. Vairs nav dublētu atslēgas kadru, vairs nav globālu tvēruma konfliktu. Vienkārši tīrs un ērts veids, kā apmierināt visas mūsu animācijas vajadzības. Bet patiesais jautājums ir: kā mēs kopā saliekam šos blokus? Saliekot to visu kopā Mēs esam redzējuši, ka pamata atslēgas kadru marķieru apvienošana ir vienkārša. Mums nevajag neko īpašu, kā tikai definēt pirmo animāciju, definēt otro, iestatīt mainīgos pēc vajadzības, un viss. /* Izgaismot + iebīdīt */ .toast { animācija: kf-fade-in 0,4 s, kf-slide-in 0,4 s kubikmetrs (0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Tuvināt + izgaismot */ .modal { animācija: kf-fade-in 0,3 s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-no: 0,7; --kf-zoom-to: 1; }
/* Iebīdīt + pulss */ .notification { animācija: kf-slide-in 0,5 s, kf-impulss 1.2s vieglums-in-out bezgalīgs alternate; --kf-slide-from: -100px 0; --kf-impulsu skala-no: 0,95; --kf-pulse-scale-to: 1,05; }
Šīs kombinācijas darbojas lieliski, jo katras animācijas mērķauditorija ir atšķirīga īpašība: necaurredzamība, pārveidošana (tulkošana/mērogošana) utt. Taču dažreiz rodas konflikti, un mums ir jāzina, kāpēc un kā ar tiem rīkoties. Ja divas animācijas mēģina animēt vienu un to pašu rekvizītu, piemēram, abas animācijas mērogu vai abas animē necaurredzamību, rezultāts nebūs tas, ko jūs gaidāt. Pēc noklusējuma šim īpašumam faktiski tiek piemērota tikai viena no animācijām, kas ir pēdējā animāciju sarakstā. Tas ir ierobežojums tam, kā CSS apstrādā vairākas animācijas vienā rekvizītā. Piemēram, tas nedarbosies, kā paredzēts, jo tiks piemērota tikai kf-pulse animācija. .bad-combo { animācija: kf-zoom 0,5 s uz priekšu, kf-impulss 1.2s bezgalīgs alternate; --kf-zoom-no: 0,5; --kf-zoom-to: 1.2; --kf-impulsu skala-no: 0,8; --kf-pulse-scale-to: 1.1; }
Animācijas papildinājums Vienkāršākais un vistiešākais veids, kā rīkoties ar vairākām animācijām, kas ietekmē vienu un to pašu rekvizītu, ir izmantot rekvizītu animācijas kompozīcija. Iepriekš minētajā pēdējā piemērā kf-pulse animācija aizstāj kf-zoom animāciju, tāpēc mēs neredzēsim sākotnējo tālummaiņu un nesaņemsim paredzēto mērogu līdz 1,2. Iestatot pievienojamo animācijas kompozīciju, mēs sakām pārlūkprogrammai apvienot abas animācijas. Tas dod mums vēlamo rezultātu. .component-two { animācija-kompozīcija: pievienot; }
Skatiet pildspalvas atslēgkadru marķierus — Demo 8 [forked], ko izveidojis Amits Šīns. Šī pieeja labi darbojas lielākajā daļā gadījumu, kad mēs vēlamies apvienot ietekmi uz vienu un to pašu īpašumu. Tas ir arī noderīgi, ja mums ir jāapvieno animācijas ar statiskām īpašuma vērtībām. Piemēram, ja mums ir elements, kas izmanto translate rekvizītu, lai to novietotu tieši tajā vietā, kur mēs vēlamies, un pēc tam mēs vēlamies to animēt ar kf-slide-in atslēgkadriem, mēs iegūstam nepatīkamu redzamu lēcienu bez animācijas kompozīcijas. Skatiet pildspalvas atslēgas kadru marķierus — Demo 9 [forked], ko izveidojis Amits Šīns. Ja animācijas kompozīcija ir iestatīta pievienošanai, animācija tiek vienmērīgi apvienota ar esošopārveidot, lai elements paliktu vietā un animētu, kā paredzēts. Animācija Stagger Vēl viens veids, kā rīkoties ar vairākām animācijām, ir tās “sakārtot” — tas ir, sāciet otro animāciju nedaudz pēc pirmās. Tas nav risinājums, kas darbojas katrā gadījumā, bet tas ir noderīgi, ja mums ir ieejas animācija, kurai seko nepārtraukta animācija. /* izbalēšana + necaurredzamības impulss */ .notification { animācija: kf-fade-in 2s atvieglojums, kf-impulss 0,5s 2s atvieglojums-in-out bezgalīgs alternate; --kf-impulsa necaurredzamība līdz: 0,5; }
Skatiet pildspalvas atslēgkadru marķierus — Demo 10 [forked], ko izveidojis Amits Šīns. Pasūtījuma jautājumi Liela daļa animāciju, ar kurām mēs strādājam, izmanto transformācijas rekvizītu. Vairumā gadījumu tas ir vienkārši ērtāk. Tam ir arī veiktspējas priekšrocības, jo transformācijas animācijas var paātrināt ar GPU. Bet, ja mēs izmantojam transformācijas, mums ir jāpieņem, ka secībai, kādā mēs veicam pārvērtības, ir nozīme. Daudz. Līdz šim savos atslēgas kadros esam izmantojuši atsevišķas transformācijas. Saskaņā ar specifikācijām tie vienmēr tiek lietoti noteiktā secībā: vispirms elements tiek tulkots, pēc tam pagriezts un pēc tam mērogots. Tam ir jēga, un lielākā daļa no mums to sagaida. Tomēr, ja mēs izmantojam transformācijas rekvizītu, funkciju rakstīšanas secība ir secība, kādā tās tiek lietotas. Šajā gadījumā, ja mēs pārvietojam kaut ko par 100 pikseļiem pa X asi un pēc tam pagriežam par 45 grādiem, tas nav tas pats, kas vispirms to pagriezt par 45 grādiem un pēc tam pārvietot par 100 pikseļiem. /* Rozā kvadrāts: vispirms tulkojiet, pēc tam pagrieziet */ .example-one { pārveidot: translateX(100px) rotate(45deg); }
/* Zaļš kvadrāts: vispirms pagrieziet, pēc tam tulkojiet */ .example-two { pārveidot: pagriezt(45°) translateX(100px); }
Skatiet pildspalvas atslēgkadru marķierus — Demo 11 [forked], ko izveidojis Amits Šīns. Taču saskaņā ar pārveidošanas secību visas atsevišķās transformācijas — viss, ko esam izmantojuši atslēgkadru marķieriem — notiek pirms transformācijas funkcijām. Tas nozīmē, ka viss, ko iestatāt transformācijas rekvizītā, notiks pēc animācijām. Bet, ja iestatāt, piemēram, tulkošanu kopā ar kf-spin atslēgas kadriem, tulkošana notiks pirms animācijas. Vēl apjukusi?! Tas noved pie situācijām, kad statiskās vērtības var radīt atšķirīgus rezultātus vienai un tai pašai animācijai, piemēram, šādā gadījumā:
/* Kopīga animācija abiem vērpējiem */ .spinner { animācija: kf-spin 1s lineārs bezgalīgs; }
/* Rozā vērpējs: tulkot pirms pagriešanas (individuāla pārveidošana) */ .spinner-pink { tulkot: 100% 50%; }
/* Zaļais vērpējs: pagriezt, pēc tam tulkot (funkciju secība) */ .spinner-green { pārveidot: tulkot(100%, 50%); }
Skatiet pildspalvas atslēgkadru marķierus — Demo 12 [forked], ko izveidojis Amits Šīns. Var redzēt, ka pirmais vērpējs (rozā) iegūst translāciju, kas notiek pirms kf-spin rotācijas, tāpēc tas vispirms pārvietojas uz savu vietu un pēc tam griežas. Otrais vērpējs (zaļš) iegūst translate() funkciju, kas notiek pēc individuālās transformācijas, tāpēc elements vispirms griežas, pēc tam pārvietojas attiecībā pret pašreizējo leņķi, un mēs iegūstam plašās orbītas efektu. Nē, tā nav kļūda. Tā ir tikai viena no lietām, kas mums jāzina par CSS un jāpatur prātā, strādājot ar vairākām animācijām vai vairākām transformācijām. Ja nepieciešams, varat arī izveidot papildu kf-spin-alt atslēgkadru kopu, kas pagriež elementus, izmantojot funkciju rotate(). Samazināta kustība Un, kamēr mēs runājam par alternatīviem atslēgas kadriem, mēs nevaram ignorēt opciju “bez animācijas”. Viena no lielākajām atslēgkadru marķieru izmantošanas priekšrocībām ir pieejamība, un to patiesībā ir diezgan viegli izdarīt. Izstrādājot mūsu atslēgas kadrus, ņemot vērā pieejamību, mēs varam nodrošināt, ka lietotāji, kuri dod priekšroku samazinātai kustībai, iegūst vienmērīgāku, mazāk traucējošu pieredzi bez papildu darba vai koda dublēšanas. Precīza “Reduced Motion” nozīme var nedaudz mainīties no vienas animācijas uz otru un no projekta uz projektu, taču šeit ir daži svarīgi punkti, kas jāpatur prātā. Atslēgkadru izslēgšana Lai gan dažas animācijas var mīkstināt vai palēnināt, ir citas, kurām vajadzētu pilnībā pazust, ja tiek pieprasīta samazināta kustība. Pulsa animācijas ir labs piemērs. Lai nodrošinātu, ka šīs animācijas nedarbojas samazinātas kustības režīmā, mēs varam tās vienkārši ietīt atbilstošā multivides vaicājumā.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { no { skala: var(--kf-pulse-scale-from, 1); necaurredzamība: var(--kf-impulss-caurredzamība-no, 1); } uz { skala: var(--kf-pulse-scale-to, 1); necaurredzamība:var(--kf-impulss-caurredzamība-to, 1); } } }
Tas nodrošina, ka lietotāji, kuri ir iestatījuši samazināšanu, dod priekšroku-samazinātai kustībai, neredzēs animāciju un iegūs savām vēlmēm atbilstošu pieredzi. Tūlītēja ienākšana Dažus atslēgas kadrus nevaram vienkārši noņemt, piemēram, ieejas animācijas. Vērtībai ir jāmainās, jāanimējas; pretējā gadījumā elementam nebūs pareizās vērtības. Bet samazinātā kustībā šai pārejai no sākotnējās vērtības jābūt tūlītējai. Lai to panāktu, mēs definēsim papildu atslēgkadru kopu, kurā vērtība nekavējoties pāriet uz beigu stāvokli. Tie kļūst par mūsu noklusējuma atslēgas kadriem. Pēc tam mēs pievienosim parastos atslēgkadrus multivides vaicājumam, lai iestatītu preferences-reduced-motion iestatītu uz No-Preference, tāpat kā iepriekšējā piemērā. /* Tūlītēji ieslēdzieties, lai samazinātu kustību */ @keyframes kf-zoom { no, līdz { mērogs: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Oriģinālie tālummaiņas atslēgkadri */ @keyframes kf-zoom { no { mērogs: var(--kf-zoom-from, 0,8); } uz { mērogs: var(--kf-zoom-to, 1); } } }
Tādā veidā lietotāji, kuri dod priekšroku samazinātai kustībai, redzēs, ka elements uzreiz parādās galīgajā stāvoklī, bet visi pārējie saņems animētu pāreju. Mīkstā pieeja Ir gadījumi, kad mēs vēlamies saglabāt kustību, bet daudz maigāku un mierīgāku nekā sākotnējā animācija. Piemēram, mēs varam aizstāt atlēcošo ieeju ar maigu izbalēšanu.
@keyframes kf-bounce { /* Mīksta izgaismošana, lai samazinātu kustību */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Sākotnējie atlēcienu atslēgkadri */ } }
Tagad lietotāji, kuriem ir iespējota samazināta kustība, joprojām izjūt izskatu, taču bez intensīvas atlēciena vai elastīgas animācijas kustības. Kad celtniecības bloki ir izveidoti, nākamais jautājums ir, kā padarīt tos par daļu no faktiskās darbplūsmas. Elastīgu atslēgkadru rakstīšana ir viena lieta, taču, lai padarītu tos uzticamus lielā projektā, ir vajadzīgas dažas stratēģijas, kuras man bija jāapgūst visgrūtākajā veidā. Īstenošanas stratēģijas un labākās prakses Kad esam izveidojuši pamatīgu atslēgu kadru marķieru bibliotēku, īstais izaicinājums ir tos iekļaut ikdienas darbā.
Kārdinājums ir izmest visus atslēgkadrus uzreiz un paziņot, ka problēma ir atrisināta, taču praksē esmu atklājis, ka vislabākos rezultātus nodrošina pakāpeniska ieviešana. Sāciet ar visizplatītākajām animācijām, piemēram, izbalēšanu vai slīdēšanu. Tie ir vienkārši laimesti, kas parāda tūlītēju vērtību bez lielas pārrakstīšanas. Nosaukuma piešķiršana ir vēl viens punkts, kas ir pelnījis uzmanību. Konsekvents prefikss vai nosaukumvieta ļauj skaidri saprast, kuras animācijas ir marķieri un kuras ir lokālas vienreizējas. Tas arī novērš nejaušas sadursmes un palīdz jaunajiem komandas dalībniekiem vienā mirklī atpazīt koplietoto sistēmu. Dokumentācija ir tikpat svarīga kā pats kods. Pat īss komentārs virs katra atslēgas kadra marķiera vēlāk var ietaupīt stundām ilgi minējumus. Izstrādātājam jāspēj atvērt marķieru failu, skenēt vajadzīgo efektu un kopēt lietošanas modeli tieši savā komponentā. Elastīgums padara šo pieeju pūļu vērtu. Atklājot saprātīgus pielāgotos rekvizītus, mēs dodam komandām iespēju pielāgot animāciju, nepārkāpjot sistēmu. Tajā pašā laikā mēģiniet nesarežģīt. Nodrošiniet svarīgos pogas, bet pārējās atstājiet savu viedokli. Visbeidzot, atcerieties pieejamību. Ne katrai animācijai ir nepieciešama samazinātas kustības alternatīva, bet daudzām tāda ir. Ja šie pielāgojumi tiek veikti agrīnā stadijā, mums tie nekad nav jāmaina vēlāk, un tas liecina par rūpības līmeni, ko mūsu lietotāji pamanīs pat tad, ja viņi to nekad nepieminēs.
Mana pieredze liecina, ka atslēgas kadru marķieru apstrāde kā daļa no mūsu dizaina pilnvaru darbplūsmas ir iemesls, kas liek tiem pielipt. Kad tie ir ievietoti, tie pārstāj justies kā specefekti un kļūst par dizaina valodas daļu, kas ir dabisks produkta kustības un reakcijas paplašinājums. Iesaiņošana Animācijas var būt viena no iepriecinošākajām saskarnes elementu daļām, taču bez struktūras tās var kļūt arī par vienu no lielākajiem neapmierinātības avotiem. Uzskatot atslēgkadrus kā pilnvaras, jūs uztverat kaut ko, kas parasti ir netīrs un grūti pārvaldāms, un pārvēršat to par skaidru, paredzamu sistēmu. Patiesā vērtība nav tikai dažu koda rindiņu saglabāšana. Tā ir pārliecība, ka, izmantojot izbalēšanu, slīdēšanu, tālummaiņu vai pagriešanu, jūs precīzi zināt, kā tas darbosies visā projektā. Tā ir elastība, ko nodrošina pielāgoti rekvizīti bez bezgalīgu variāciju haosa. Un tas ir pieejams pamatos, nevis pievienots kāpēcpārdoma. Esmu redzējis, ka šīs idejas darbojas dažādās komandās un dažādās kodu bāzēs, un modelis vienmēr ir vienāds. Kad marķieri ir ievietoti, atslēgas kadri vairs nav izkaisīti triku krājumi un kļūst par dizaina valodas daļu. Tie padara produktu apzinātāku, konsekventāku un dzīvāku. Ja paņemat vienu lietu no šī raksta, lai tā būtu: animācijas ir pelnījušas tādu pašu aprūpi un struktūru, kādu mēs jau piešķiram krāsām, tipogrāfijai un atstarpēm. Neliels ieguldījums atslēgkadru marķieros atmaksājas ikreiz, kad saskarne tiek pārvietota.
