Irudikatu hau: proiektu berri batean sartzen zara, kode-oinarrian murgiltzen zara eta lehen orduetan, zerbait zapuzgarri ezagutzen duzu. Estilo-orrietan zehar sakabanatuta, oinarrizko animazio berdinetarako @keyframes definizio anitz aurkituko dituzu. Hiru desagertze-efektu desberdin, bizpahiru diapositiba-aldaera, zoom-animazio gutxi batzuk eta gutxienez bi biraketa-animazio ezberdin, zeren eta, zergatik ez? @keyframes pultsua { {tik eskala: 1; } {ari eskala: 1,1; } }
@keyframes bigger-pulse { % 0, % 20, % 100 { eskala: 1; } %10, %40 { eskala: 1,2; } }
Eszenatoki hau ezaguna bada, ez zaude bakarrik. Hainbat proiektutan zehar dudan esperientziaren arabera, eman dezakedan garaipen azkar koherenteenetako bat gako-fotogramak finkatzea eta estandarizatzea da. Hain eredu fidagarria bihurtu da, orain garbiketa hau edozein kode-oinarri berritan nire lehen zereginetako bat dela espero dudala. Kaosaren atzean dagoen logika Erredundantzia honek zentzu osoa du pentsatzen duzunean. Guztiok oinarrizko animazio berberak erabiltzen ditugu gure eguneroko lanean: desagertzeak, diapositibak, zoomak, birakak eta ohiko beste efektu batzuk. Animazio hauek nahiko sinpleak dira, eta erraza da @keyframes definizio azkar bat sortzea lana burutzeko. Animazio-sistema zentralizaturik gabe, garatzaileek modu naturalean idazten dituzte gako-fotograma hauek hutsetik, kode-basean antzeko animazioak dagoeneko existitzen direla jakin gabe. Hau bereziki ohikoa da osagaietan oinarritutako arkitekturan lan egiten denean (gaur egun gehienok egiten duguna), taldeek askotan paraleloan lan egiten baitute aplikazioaren atal ezberdinetan. Emaitza? Animazio kaosa. Arazo Txikia Gako-fotograma bikoiztearen arazo agerikoenak garapen-denbora alferrik galtzea eta alferrikako kodearen puzketak dira. Gako-fotograma anitzek eskakizunak aldatzen direnean eguneratzeko hainbat leku esan nahi dituzte. Desagertzeko animazioaren denbora egokitu behar al duzu? Zure kode-baseko instantzia guztiak bilatu beharko dituzu. Erraztasun-funtzioak estandarizatu nahi dituzu? Zorte on aldaera guztiak aurkitzeko. Mantentze-puntuen biderketa honek animazio-eguneratze sinpleak ere denbora asko eskatzen du. Arazo Handiagoa Gako-fotograma bikoiztu honek azalaren azpian ezkutuan dagoen arazo askoz maltzuragoa sortzen du: esparru globalaren tranpa. Osagaietan oinarritutako arkitekturekin lan egiten denean ere, CSS gako-fotogramak esparru globalean definitzen dira beti. Horrek esan nahi du gako-fotograma guztiak osagai guztiei aplikatzen zaizkiela. Beti. Bai, zure animazioak ez ditu zertan zure osagaian definitu dituzun gako-fotogramak erabili behar. Esparru globalean kargatu ziren izen bera zehatz horrekin bat datozen azken gako-fotogramak erabiltzen ditu. Zure gako-fotograma guztiak berdinak diren bitartean, arazo txiki bat dirudi. Baina erabilera-kasu zehatz baterako animazio bat pertsonalizatu nahi duzun momentuan arazoak dituzu, edo okerrago, zu izango zara horiek eragiten dituena. Edo zure animazioak ez du funtzionatuko zurearen ondoren beste osagai bat kargatu delako, zure gako-fotogramak gainidatziz, edo zure osagaiak azkenekoz kargatzen duelako eta ustekabean beste osagai guztien animazio-portaera aldatzen duelako gako-fotograma horren izena erabiliz, eta baliteke horretaz konturatu ere ez egitea. Hona hemen arazoa erakusten duen adibide sinple bat: .osagai bat { /* osagaien estiloak */ animazioa: pultsu 1s ease-in-out infinitua alternantzia; }
/* @keyframes definizio honek ez du funtzionatuko */ @keyframes pultsua { {tik eskala: 1; } {ari eskala: 1,1; } }
/* geroago kodean... */
.osagai-bi { /* osagaien estiloak */ animazioa: pultsu 1s ease-in-out infinitua; }
/* gako-fotograma hauek bi osagaiei aplikatuko zaizkie */ @keyframes pultsua { % 0, % 20, % 100 { eskala: 1; } %10, %40 { eskala: 1,2; } }
Bi osagaiek animazio-izen bera erabiltzen dute, baina bigarren @keyframes definizioak lehena gainidazten du. Orain, bi osagaiak eta osagaiak bigarren gako-fotogramak erabiliko dituzte, zein osagai definitu den zein gako-fotograma. Ikusi Pen Keyframes Tokens - Demo 1 [forked] Amit Sheen-ek. Okerrena? Honek sarritan ezin hobeto funtzionatzen du tokiko garapenean, baina ekoizpenean modu misteriotsuan hausten da eraikuntza-prozesuek zure estilo-orrien karga-ordena aldatzen dutenean. Osagai kargatzen diren eta zein sekuentziaren arabera portaera desberdina duten animazioak lortzen dituzu. Irtenbidea: Gako-fotograma bateratuak Kaos honen erantzuna harrigarriro sinplea da: aurrez definitutako gako-fotograma dinamikoak estilo-orri partekatu batean gordeta daude. Osagai bakoitzari bere animazioak definitzen utzi beharrean, ondo dokumentatuta dauden eta errazak diren gako-fotograma zentralizatuak sortzen ditugu.erabili, mantendu daiteke eta zure proiektuaren behar zehatzetara egokituta. Pentsa ezazu gako-fotograma token gisa. Koloreetarako eta tarterako tokenak erabiltzen ditugun bezala, eta gutako askok animazio-propietateetarako tokenak erabiltzen ditugun bezala, iraupena eta arintze-funtzioetarako, zergatik ez erabili tokenak gako-fotogrametarako ere? Ikuspegi hau modu naturalean integra daiteke erabiltzen ari zaren diseinu-token lan-fluxuarekin, arazo txikia (kodeen bikoizketa) eta arazo handiagoa (esparru globalaren gatazkak) bakarrean konpontzen dituen bitartean. Ideia zuzena da: gure animazio komun guztietarako egia iturri bakarra sortzea. Partekatutako estilo-orri honek arretaz landutako gako-fotogramak ditu, gure proiektuak benetan erabiltzen dituen animazio-ereduak estaltzen dituztenak. Ez da gehiago asmatzen gure kode-basean desagertzeko animaziorik dagoen ala ez. Ez da beste osagai batzuen animazioak nahi gabe gainidatzi. Baina hona hemen gakoa: hauek ez dira kopiatu-itsatsi animazio estatikoak soilik. CSS propietate pertsonalizatuen bidez dinamikoak eta pertsonalizagarriak izateko diseinatuta daude, eta koherentzia mantentzea ahalbidetzen digu, animazioak erabilera kasu zehatzetara egokitzeko malgutasuna izan arren, leku bakarrean "pultsu" animazio apur bat handiagoa behar baduzu. Lehen Keyframes Token eraikitzea Landu beharko genukeen lehen fruitu baxuetako bat "fade-in" animazioa da. Nire azken proiektuetako batean, dozena bat desagertze-definizio bereizi baino gehiago aurkitu nituen, eta bai, guztiek 0tik 1era opakutasuna animatu zuten. Beraz, sor ditzagun estilo-orri berri bat, deitu kf-tokens.css, inporta dezagun gure proiektuan eta jar ditzagun gure gako-fotogramak iruzkin egokiekin barruan. /* keyframes-tokens.css */
/* * Fade In - desagerrarazi sarrerako animazioa * Erabilera: animazioa: kf-fade-in 0,3s-ko erraztasuna; */ @keyframes kf-fade-in { {tik opakutasuna: 0; } {ari opakutasuna: 1; } }
@keyframes deklarazio bakar honek gure kode-basean barreiatuta dauden desagertze-animazio guztiak ordezkatzen ditu. Garbia, sinplea eta mundu osoan aplikagarria. Eta orain token hau definitu dugunean, edozein osagaitatik erabil dezakegu gure proiektuan zehar: .modala { animazioa: kf-fade-in 0,3s-ko erraztasuna; }
.tooltip { animazioa: kf-fade-in 0.2s-en erraztasuna; }
.jakinarazpena { animazioa: kf-fade-in 0,5 s ease-out; }
Ikusi Pen Keyframes Tokens - Demo 2 [forked] Amit Sheen-ek. Oharra: kf- aurrizkia erabiltzen ari gara gure @keyframes izen guztietan. Aurrizki honek izen-espazio gisa balio du, proiektuan dauden animazioekin izendatzeko gatazkak saihesten dituena eta berehala argi uzten du gako-fotograma hauek gure gako-fotograma-token fitxategitik datozela. Diapositiba dinamiko bat egitea Kf-fade-in gako-fotogramak oso ondo funtzionatzen du, erraza delako eta gauzak nahasteko leku gutxi dagoelako. Beste animazio batzuetan, ordea, askoz dinamikoagoak izan behar dugu, eta hemen CSS propietate pertsonalizatuen botere izugarria aprobetxatu dezakegu. Hau da gako-fotograma-tokenek benetan distira egiten duten animazio estatiko sakabanatuen aldean. Har dezagun eszenatoki komun bat: "slide-in" animazioak. Baina irristatu nondik? 100 px eskuinetik? %50 ezkerretik? Pantailaren goialdetik sartu behar al da? Edo agian behetik flotatzen? Hainbeste aukera, baina norabide bakoitzerako eta aldaera bakoitzerako gako-fotograma bereiziak sortu beharrean, eszenatoki guztietara egokitzen den token malgu bat eraiki dezakegu: /* * Slide In - norabideko diapositiba animazioa * Erabili --kf-slide-from norabidea kontrolatzeko * Lehenetsia: ezkerretik sartzen da (-%100) * Erabilera: * animazioa: kf-slide-in 0,3s-ko erraztasuna; * --kf-slide-from: -100px 0; // irristatu ezkerretik * --kf-slide-from: 100px 0; // irristatu eskuinetik * --kf-slide-from: 0 -50px; // goitik irristatu */
@keyframes kf-slide-in { {tik itzuli: var(--kf-slide-from, -100% 0); } {ari itzuli: 0 0; } }
Orain @keyframes token bakar hau erabil dezakegu edozein diapositiba norabiderako --kf-slide-from propietate pertsonalizatua aldatuz: .alboko barra { animazioa: kf-slide-in 0,3 s ease-out; /* Balio lehenetsia erabiltzen du: diapositibak ezkerretik */ }
.jakinarazpena { animazioa: kf-slide-in 0.4s erraz-out; --kf-slide-from: 0 -50px; /* irristatu goitik */ }
.modala { animazioa: kf-fade-in 0,5 s, kf-slide-in 0.5s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* irristatu behetik eskuinetik */ }
Ikuspegi honek malgutasun izugarria ematen digu koherentzia mantenduz. Gako-fotograma baten adierazpena, aukera infinituak. Ikusi Pen Keyframes Tokens - Demo 3 [forked] Amit Sheen-ek. Eta gure animazioak are malguagoak egin nahi baditugu, "irteera ateratzeko" efektuak ere ahalbidetuz,besterik gabe gehitu --kf-slide-to propietate pertsonalizatua, hurrengo atalean ikusiko dugunaren antzera. Bi norabideko zoom gako-fotogramak Proiektuetan bikoiztu egiten den beste animazio arrunt bat "zoom" efektuak dira. Tostada mezuetarako eskala sotila, modalentzako zoom ikaragarria edo goiburuetarako eskala efektu leuna den, zoom animazioak nonahi daude. Eskala-balio bakoitzerako gako-fotograma bereiziak sortu beharrean, eraiki dezagun kf-zoom gako-fotograma multzo malgu bat:
/* * Zoom - eskala animazioa * Erabili --kf-zoom-from eta --kf-zoom-to eskala-balioak kontrolatzeko * Lehenetsia: %80tik %100era (0,8tik 1era) zooma egiten du * Erabilera: * animazioa: kf-zoom 0.2s-ko erraztasuna; * --kf-zoom-tik: 0,5; --kf-zoom-to: 1; // zooma %50etik %100era * --kf-zoom-tik: 1; --kf-zoom-to: 0; // zooma % 100etik % 0ra * --kf-zoom-tik: 1; --kf-zoom-to: 1.1; // zooma %100etik %110era */
@keyframes kf-zoom { {tik eskala: var(--kf-zoom-from, 0,8); } {ari eskala: var(--kf-zoom-to, 1); } }
Definizio batekin, behar dugun zoom aldakuntza lor dezakegu: .tosta { animazioa: kf-sartzea 0,2 s, kf-zoom 0.4s-ko erraztasuna; --kf-slide-from: % 0 100; /* irristatu goitik */ /* Zoom lehenetsia erabiltzen du: % 80tik % 100era eskalatzen du */ }
.modala { animazioa: kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-tik: 0; /* zoom ikaragarria % 0tik % 100era */ }
.heading { animazioa: kf-fade-in 2s, kf-zoom 2s erraztasuna; --kf-zoom-tik: 1.2; --kf-zoom-to: 0,8; /* eskala leuna behera */ }
0,8 (% 80) lehenetsiak ezin hobeto funtzionatzen du UI elementu gehienentzat, hala nola toast mezuak eta txartelak, kasu berezietarako pertsonalizatzeko erraza den arren. Ikusi Pen Keyframes Tokens - Demo 4 [forked] Amit Sheen-ek. Azken adibideetan zerbait interesgarria nabarituko zenuten agian: animazioak konbinatzen aritu gara. @keyframes tokenekin lan egitearen abantail nagusietako bat elkarren artean ezin hobeto integratzeko diseinatuta daudela da. Konposizio leun hau nahita da, ez ustekabekoa. Animazio-konposizioa zehatzago eztabaidatuko dugu geroago, problematikoak non bihur daitezkeen barne, baina konbinazio gehienak errazak eta inplementatzeko errazak dira. Oharra: Artikulu hau idaztean, eta agian idazteagatik, sarrerako animazioen ideia osoa birpentsatzen ikusi nuen. CSSren azken aurrerapen guztiekin, behar al ditugu oraindik? Zorionez, Adam Argylek galdera berdinak aztertu zituen eta bikain adierazi zituen bere blogean. Honek ez du kontraesanean hemen idatzitakoarekin, baina kontuan hartzeko moduko ikuspegi bat aurkezten du, batez ere zure proiektuak sarrerako animazioetan oinarritzen badira. Etengabeko animazioak Sarrerako animazioak, hala nola, "desagertu", "irristikatu" eta "zoom" gertatzen dira behin eta gero gelditzen diren bitartean, etengabeko animazioak begiztatzen dira mugagabean arreta erakartzeko edo etengabeko jarduera adierazteko. Topatzen ditudan etengabeko bi animazio ohikoenak "spin" (adierazleak kargatzeko) eta "pultsa" (elementu garrantzitsuak nabarmentzeko) dira. Animazio hauek erronka paregabeak aurkezten dituzte gako-fotograma-tokenak sortzeko orduan. Egoera batetik bestera joan ohi diren sarrerako animazioek ez bezala, etengabeko animazioek oso pertsonalizagarriak izan behar dute portaera-ereduetan. Spin Doctor Proiektu bakoitzak hainbat bira-animazio erabiltzen dituela dirudi. Batzuk erlojuaren orratzen noranzkoan biratzen dute, beste batzuk erlojuaren orratzen noranzkoan. Batzuek 360 graduko biraketa bakarra egiten dute, beste batzuek bira anitz egiten dute efektu azkarrago lortzeko. Aldaera bakoitzerako gako-fotograma bereiziak sortu beharrean, agertoki guztiak kudeatzen dituen bira malgu bat eraiki dezagun:
/* * Spin - biraketa animazioa * Erabili --kf-spin-from eta --kf-spin-to biraketa-barrutia kontrolatzeko * Erabili --kf-spin-turns biraketa kopurua kontrolatzeko * Lehenetsia: 0 gradutik 360 gradura biratzen du (biratu osoa) * Erabilera: * animazioa: kf-spin 1s lineal infinitua; * --kf-bira-biraka: 2; // 2 bira oso * --kf-spin-from: 0deg; --kf-spin-to: 180o; // erdi biraketa * --kf-spin-from: 0deg; --kf-spin-to: -360o; // erlojuaren orratzen kontrakoa */
@keyframes kf-spin { {tik biratu: var(--kf-spin-from, 0deg); } {ari biratu: calc(var(--kf-spin-from, 0deg) + var (--kf-spin-to, 360deg) * var (--kf-spin-turns, 1)); } }
Orain nahi dugun bira aldakuntza sor dezakegu:
.loading-spinner { animazioa: kf-spin 1s lineal infinitua; /* Lehenetsia erabiltzen du: 0 gradutik 360 gradura biratzen du */ }
.fast-loader { animazioa: kf-spin 1.2s ease-in-out infinitu alternatiboa; --kf-bira-birak: 3; /* 3 biraketa osoko norabide bakoitzeko ziklo bakoitzeko*/ }
.urrats-alderantziz { animazioa: kf-spin 1.5s urratsak (8) infinitua; --kf-spin-to: -360o; /* erlojuaren orratzen kontrakoa */ }
.subtle-wiggle { animazioa: kf-spin 2s ease-in-out infinitu alternatiboa; --kf-spin-from: -16deg; --kf-spin-to: 32°; /* 36 gradu mugitu: -18 eta +18 gradu artean */ }
Ikusi Pen Keyframes Tokens - Demo 5 [forked] Amit Sheen-ek. Planteamendu honen edertasuna da gako-fotograma berdinek biragailuak kargatzeko, biratzeko ikonoak, mugitzeko efektuak eta baita bira anitzeko animazio konplexuak ere. Pultsuaren paradoxa Pultsu-animazioak zailagoak dira propietate desberdinak "pultsatu" ditzaketelako. Batzuek eskala pultsatzen dute, beste batzuek opakutasuna eta pultsu kolorearen propietate batzuk distira edo saturazioa, esaterako. Propietate bakoitzerako gako-fotograma bereiziak sortu beharrean, CSS edozein propietaterekin funtzionatzen duten gako-fotogramak sor ditzakegu. Hona hemen eskala eta opakutasun aukerak dituen pultsu-gako-fotograma baten adibidea:
/* * Pultsu - animazio pultsatua * Erabili --kf-pulse-scale-from eta --kf-pulse-scale-to eskala-barrutia kontrolatzeko * Erabili --kf-pulse-opacity-from eta --kf-pulse-opacity-to opakutasun-barrutia kontrolatzeko * Lehenetsia: pultsurik ez (balio guztiak 1) * Erabilera: * animazioa: kf-pulse 2s ease-in-out infinitu alternatiboa; * --kf-pultsu-eskala-tik: 0,95; --kf-pultso-eskala: 1,05; // pultsu eskalatu * --kf-pultsu-opakotasuna-tik: 0,7; --kf-pultsu-opakotasuna: 1; // opakutasun pultsu */
@keyframes kf-pulse { {tik eskala: var(--kf-pulse-eskala-from, 1); opakotasuna: var(--kf-pulse-opakotasuna-tik, 1); } {ari eskala: var(--kf-pulse-eskala-to, 1); opakutasuna: var(--kf-pulse-opakotasuna-to, 1); } }
Horrek propietate anitz anima ditzakeen pultsu malgua sortzen du: .ekintzarako deia { animazioa: kf-pulse 0.6s infinitua txandakatua; --kf-pultsu-opakotasuna-tik: 0,5; /* opakutasun pultsua */ }
.jakinarazpen-puntua { animazioa: kf-pulse 0.6s ease-in-out infinitua alternantzia; --kf-pultsu-eskala-tik: 0,9; --kf-pulse-scale-to: 1,1; /* eskala pultsua */ }
.text-highlight { animazioa: kf-pulse 1.5s ease-out infinitua; --kf-pultsu-eskala-tik: 0,8; --kf-pultsu-opakotasuna-tik: 0,2; /* eskala eta opakutasun pultsua */ }
Ikusi Pen Keyframes Tokens - Demo 6 [forked] Amit Sheen-ek. Kf-pulse gako-fotograma bakar honek dena kudeatu dezake arreta sotiletatik hasi eta aipagarritasun nabarmenetaraino, pertsonalizatzeko erraza den bitartean. Erraztasun aurreratua Gako-fotograma-tokenak erabiltzearen gauza handietako bat gure animazio-liburutegia zabaltzea eta garatzaile gehienek hutsetik idazten trabatuko ez luketen efektuak ematea da, elastikoa edo errebotea bezalako efektuak eskaintzea. Hona hemen jauziaren altuera kontrolatzeko --kf-bounce-from propietate pertsonalizatua erabiltzen duen "errebote" gako-fotograma soil baten adibide bat. /* * Errebotea - errebote sarrerako animazioa * Erabili --kf-bounce-from jauziaren altuera kontrolatzeko * Lehenetsia: 100vh-tik jauzi egiten da (pantailatik kanpo) * Erabilera: * animazioa: kf-bounce 3s erraztasuna; * --kf-bounce-from: 200px; // 200px altueratik salto egin */
@keyframes kf-bounce { % 0 { itzuli: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
% 34 { itzuli: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
% 55 { itzuli: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
% 72 { itzuli: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
%85 { itzuli: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
% 94 { itzuli: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
% 99 { itzuli: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
% 22, % 45, % 64, % 79, % 90, % 97, % 100 { itzuli: 0 0; animazio-denboratze-funtzioa: erraztasun; } }
"Elastikoa" bezalako animazioak pixka bat zailagoak dira gako-fotogramen barruan dauden kalkuluak direla eta. --kf-elastic-from-X eta --kf-elastic-from-Y bereizita definitu behar ditugu (biak aukerakoak dira), eta elkarrekin pantailako edozein puntutatik sarrera elastiko bat sortzen uzten digute.
/* * Elastic In - sarrerako animazioa elastikoa * Erabili --kf-elastic-from-X eta --kf-elastic-from-Y hasierako posizioa kontrolatzeko * Lehenetsia: goiko erditik sartzen da (0, -100vh) * Erabilera: * animazioa: kf-elastic-in 2s ease-in-out biak; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // sartu hemendik (-50px, -200px) */
@keyframes kf-elastic-in { % 0 { itzuli: calc(var(--kf-elastic-tik-tik, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
% 16 { itzuli: calc(var(--kf-elastic-tik-tik, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
% 28 { itzuli: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
% 44 { itzuli: calc(var(--kf-elastic-tik-tik, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
% 59 { itzuli: calc(var(--kf-elastic-tik-tik, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
% 73 { itzuli: calc(var(--kf-elastic-tik-tik, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
% 88 { itzuli: calc(var(--kf-elastic-tik-tik, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
% 100 { itzuli: 0 0; } }
Ikuspegi honek gure proiektu osoan gako-fotograma aurreratuak berrerabiltzea eta pertsonalizatzea errazten du, pertsonalizatutako propietate bakarra aldatuz.
.bonce-and-zoom { animazioa: kf-bounce 3s erraztasuna, kf-zoom 3s lineala; --kf-zoom-tik: 0; }
.errebote eta irristatu { animazio-konposizio: gehitu; /* Bi animazioek itzulpena erabiltzen dute */ animazioa: kf-bounce 3s erraztasuna, kf-slide-in 3s ease-out; --kf-diapositiba-tik: -200px; }
.elastic-in { animazioa: kf-elastic-in 2s ease-in-out biak; }
Ikusi Pen Keyframes Tokens - Demo 7 [forked] Amit Sheen-ek. Orain arte, gako-fotogramak modu adimentsu eta eraginkor batean nola finkatu ditzakegun ikusi dugu. Jakina, baliteke gauzak moldatu nahi izatea zure proiektuaren beharretara hobeto egokitzeko, baina ohiko animazio eta eguneroko erabilera-kasu batzuen adibideak estali ditugu. Eta gako-fotograma-token hauek jarrita, proiektu osoan animazio koherenteak eta mantendugarriak sortzeko bloke indartsuak ditugu orain. Ez dago bikoiztutako gako-fotograma gehiago, ez dago esparru globalaren gatazkarik. Gure animazio-behar guztiak kudeatzeko modu garbi eta erosoa besterik ez. Baina benetako galdera hau da: nola osatuko ditugu eraikuntza-bloke hauek elkarrekin? Guztia Bateratuz Ikusi dugu oinarrizko gako-fotograma-tokenak konbinatzea erraza dela. Ez dugu ezer berezirik behar baina lehen animazioa definitzea, bigarrena definitu, aldagaiak behar bezala ezarri, eta kitto. /* Desagertzea + irristatu */ .tosta { animazioa: kf-fade-in 0,4 s, kf-slide-in 0.4s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-diapositiba-tik: 0 40px; }
/* Handiagotu + lausotu */ .modala { animazioa: kf-fade-in 0,3 s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-tik: 0,7; --kf-zoom-to: 1; }
/* Sartu + pultsua */ .jakinarazpena { animazioa: kf-sartzea 0,5 s, kf-pulse 1.2s ease-in-out infinitu alternatiboa; --kf-slide-from: -100px 0; --kf-pultsu-eskala-tik: 0,95; --kf-pultso-eskala: 1,05; }
Konbinazio hauek ederki funtzionatzen dute, animazio bakoitzak propietate ezberdin bat du helburu: opakutasuna, transformazioa (itzultzea/eskala), etab. Baina batzuetan gatazkak egoten dira, eta horiei zergatik eta nola aurre egin jakin behar dugu. Bi animazio propietate bera animatzen saiatzen direnean, adibidez, biak eskala animatzen edo biak opakutasuna animatzen saiatzen direnean, emaitza ez da espero duzuna izango. Lehenespenez, animazioetako bat bakarrik aplikatzen zaio propietate horri, hau da, animazio zerrendako azkena. Hau CSS-k propietate berean hainbat animazio kudeatzen dituenaren muga da. Adibidez, honek ez du nahi bezala funtzionatuko kf-pulse animazioa soilik aplikatuko delako. .bad-combo { animazioa: kf-zoom 0.5s aurrera, kf-pultsu 1,2s infinitua txandakatua; --kf-zoom-tik: 0,5; --kf-zoom-to: 1.2; --kf-pultsu-eskala-tik: 0,8; --kf-pulse-scale-to: 1,1; }
Animazio gehigarria Propietate berean eragina duten hainbat animazio kudeatzeko modurik errazena eta zuzenena animazio-konposizio propietatea erabiltzea da. Goiko azken adibidean, kf-pulse animazioak kf-zoom animazioa ordezkatzen du, beraz, ez dugu hasierako zooma ikusiko eta ez dugu espero den eskala lortuko 1.2. Gehitzeko animazio-konposizioa ezarriz, nabigatzaileari bi animazioak konbinatzeko esaten diogu. Horrek nahi dugun emaitza ematen digu. .osagai-bi { animazio-konposizio: gehitu; }
Ikusi Pen Keyframes Tokens - Demo 8 [forked] Amit Sheen-ek. Ikuspegi honek ondo funtzionatzen du propietate berean efektuak konbinatu nahi ditugun kasu gehienetarako. Era berean, erabilgarria da animazioak propietate estatikoen balioekin konbinatu behar ditugunean. Esate baterako, translate propietatea nahi dugun tokian kokatzeko erabiltzen duen elementu bat badugu eta, ondoren, kf-slide-in gako-fotogramarekin animatu nahi badugu, animazio-konposiziorik gabeko jauzi ikusgarri gaizto bat lortuko dugu. Ikusi Pen Keyframes Tokens - Demo 9 [forked] Amit Sheen-ek. Animazio-konposizioa gehitzeko ezarrita dagoenarekin, animazioa lehendik dagoenarekin leunki konbinatzen daeraldatu, beraz, elementua lekuan geratzen da eta espero bezala animatzen da. Animazio Stagger Animazio anitz kudeatzeko beste modu bat horiek "kalekatu" egitea da, hau da, bigarren animazioa apur bat abiarazi lehenengoa amaitu eta gero. Ez da kasu guztietan funtzionatzen duen irtenbidea, baina erabilgarria da sarrerako animazioa eta jarraian animazio jarraitua dugunean. /* desagertzea + opakotasun pultsua */ .jakinarazpena { animazioa: kf-fade-in 2s ease-out, kf-pultsoa 0,5s 2s ease-in-out infinitua alternatiba; --kf-pultsu-opakotasuna: 0,5; }
Ikusi Pen Keyframes Tokens - Demo 10 [forked] Amit Sheen-ek. Ordena Gaiak Lan egiten ditugun animazioen zati handi batek transform propietatea erabiltzen du. Kasu gehienetan, hau erosoagoa da. Errendimendu abantaila bat ere badu transformazio animazioak GPU bidez bizkortu daitezkeelako. Baina transformazioak erabiltzen baditugu, gure eraldaketak egiten ditugun ordenak garrantzia duela onartu behar dugu. Asko. Orain arte gure gako-fotogrametan, banakako transformazioak erabili ditugu. Zehaztapenen arabera, hauek beti ordena finko batean aplikatzen dira: lehenik, elementua itzultzen da, gero biratu eta gero eskalatzen du. Horrek zentzua du eta gehienok espero duguna da. Hala ere, eraldatzeko propietatea erabiltzen badugu, funtzioak idazten diren ordena aplikatzen diren ordena da. Kasu honetan, zerbait X ardatzean 100 pixel mugitzen badugu eta gero 45 gradu biratzen badugu, ez da berdina lehenengo 45 gradu biratzea eta gero 100 pixel mugitzea. /* Karratu arrosa: lehenik itzuli, gero biratu */ .adibide bat { transformatu: translateX(100px) biratu(45deg); }
/* Karratu berdea: lehenengo biratu, gero itzuli */ .adibidea-bi { transformatu: biratu(45deg) translateX(100px); }
Ikusi Pen Keyframes Tokens - Demo 11 [forked] Amit Sheen-ek. Baina eraldatze-ordenaren arabera, banakako transformazio guztiak - gako-fotogramen tokenetarako erabili dugun guztia - transformazio funtzioen aurretik gertatzen dira. Horrek esan nahi du transformazio propietatean ezartzen duzun guztia animazioen ondoren gertatuko dela. Baina, adibidez, kf-spin gako-fotogramarekin batera itzultzea ezartzen baduzu, itzulpena animazioaren aurretik gertatuko da. Nahastuta oraindik?! Horrek balio estatikoek animazio beraren emaitza desberdinak eragin ditzaketen egoerak eragiten ditu, kasu honetan bezala:
/* Bi spinnerentzako animazio komuna */ .spinner { animazioa: kf-spin 1s lineal infinitua; }
/* Spinner arrosa: itzuli aurretik (eraldaketa indibiduala) */ .spinner-pink { itzuli: %100 %50; }
/* Bira berdea: biratu eta itzuli (funtzio-ordena) */ .spinner-green { transformatu: itzuli(%100,%50); }
Ikusi Pen Keyframes Tokens - Demo 12 [forked] Amit Sheen-ek. Ikus dezakezu lehen biratzaileak (arrosa) kf-spin-aren biratu baino lehen gertatzen den translazio bat lortzen duela, beraz, lehenik bere lekura mugitzen da eta gero bira egiten du. Bigarren biragailuak (berdeak) banakako transformazioaren ondoren gertatzen den translate() funtzioa lortzen du, beraz, elementuak lehenik bira egiten du, gero bere uneko angeluarekiko mugitzen da eta orbita zabaleko efektu hori lortzen dugu. Ez, hau ez da akats bat. CSS-ri buruz jakin behar dugun gauza horietako bat besterik ez da eta gogoan izan hainbat animazio edo transformazio anitzekin lan egitean. Beharrezkoa izanez gero, elementuak biratzen dituzten kf-spin-alt gako-fotograma multzo gehigarri bat ere sor dezakezu biratu() funtzioa erabiliz. Mugimendu murriztua Eta gako-fotograma alternatiboez hitz egiten ari garen bitartean, ezin dugu baztertu "animaziorik ez" aukera. Gako-fotograma-tokenak erabiltzearen abantaila handienetako bat irisgarritasuna labean egon daitekeela da, eta egia esan nahiko erraza da. Gure gako-fotogramak erabilerraztasuna kontuan hartuta diseinatuz gero, mugimendu murriztua nahiago duten erabiltzaileek esperientzia leunagoa eta distraigarriagoa izango dutela ziurta dezakegu, aparteko lanik edo kodea bikoiztu gabe. "Mugimendu murriztua"-ren esanahi zehatza pixka bat alda daiteke animazio batetik bestera, eta proiektu batetik bestera, baina hona hemen kontuan hartu beharreko puntu garrantzitsu batzuk: Gako-fotogramak isiltzea Animazio batzuk leundu edo moteldu daitezkeen arren, badira beste batzuk guztiz desagertu beharko liratekeenak mugimendu murriztua eskatzen denean. Pultsu animazioak adibide ona dira. Animazio hauek mugimendu murriztuko moduan exekutatzen ez daitezen ziurtatzeko, multimedia kontsulta egokian bil ditzakegu.
@media (lehentasun-mugimendu murriztua: hobespenik gabe) { @keyfrmaes kf-pulse { {tik eskala: var(--kf-pulse-eskala-from, 1); opakotasuna: var(--kf-pulse-opakotasuna-tik, 1); } {ari eskala: var(--kf-pulse-eskala-to, 1); opakutasuna:var(--kf-pultsu-opakotasuna-to, 1); } } }
Horrek bermatzen du murrizteko hobespen-mugimendu murriztua ezarri duten erabiltzaileek ez dutela animazioa ikusiko eta beren hobespenarekin bat datorren esperientzia bat jasoko dutela. Instant In Besterik gabe kendu ezin ditugun gako-fotograma batzuk daude, esate baterako, sarrerako animazioak. Balioa aldatu behar da, animatu egin behar da; bestela, elementuak ez ditu balio zuzenak izango. Baina mugimendu murriztuan, hasierako baliotik trantsizio honek berehalakoa izan behar du. Hori lortzeko, gako-fotograma sorta gehigarri bat definituko dugu, non balioa berehala amaierako egoerara jauzi egiten duen. Hauek gure gako-fotograma lehenetsiak bihurtzen dira. Ondoren, gako-fotograma arruntak gehituko ditugu multimedia-kontsulta baten barruan hobespenik gabeko mugimendu-murrizketetarako, aurreko adibidean bezala. /* berehala sartu mugimendua murrizteko */ @keyframes kf-zoom { tik, {{ eskala: var(--kf-zoom-to, 1); } }
@media (lehentasun-mugimendu murriztua: hobespenik gabe) { /* Jatorrizko zoom gako-fotogramak */ @keyframes kf-zoom { {tik eskala: var(--kf-zoom-from, 0,8); } {ari eskala: var(--kf-zoom-to, 1); } } }
Modu honetan, mugimendu murriztua nahiago duten erabiltzaileek elementua berehala ikusiko dute bere azken egoeran, eta gainerako guztiek trantsizio animatua lortzen duten bitartean. Ikuspegi leuna Badaude mugimendu batzuk mantendu nahi ditugun kasuak, baina jatorrizko animazioa baino askoz leunagoak eta lasaiagoak. Adibidez, errebote-sarrera bat desagertze leun batekin ordezka dezakegu.
@keyframes kf-bounce { /* Desagertze leuna mugimendua murrizteko */ }
@media (lehentasun-mugimendu murriztua: hobespenik gabe) { @keyframes kf-bounce { /* Jatorrizko errebote gako-fotogramak */ } }
Orain, mugimendu murriztua gaituta duten erabiltzaileek itxura sentsazioa dute oraindik, baina errebote edo animazio elastiko baten mugimendu bizirik gabe. Eraikuntza-blokeak jarrita, hurrengo galdera da nola egin benetako lan-fluxuaren parte. Gako-fotograma malguak idaztea gauza bat da, baina proiektu handi batean fidagarriak izateak estrategia batzuk behar ditu gogor ikasi behar izan ditudanak. Ezarpen-estrategiak eta praktika onak Gako-fotograma-token liburutegi sendoa dugunean, benetako erronka eguneroko lanera nola ekartzea da.
Tentazioa da gako-fotograma guztiak batera botatzea eta arazoa konponduta deklaratzea, baina praktikan emaitzarik onenak pixkanaka-pixkanaka hartzen direla ikusi dut. Hasi animazio ohikoenekin, hala nola desagertzea edo diapositiba. Garaipen errazak dira, berehalako balioa erakusten dutenak berridazketa handirik behar izan gabe. Izena ematea arreta merezi duen beste puntu bat da. Aurrizki edo izen-espazio koherente batek argi uzten du zein animazio diren token eta zein tokiko bakarrekoak. Gainera, ustekabeko talkak saihesten ditu eta taldekide berriei partekatutako sistema begirada batean ezagutzen laguntzen die. Dokumentazioa kodea bera bezain garrantzitsua da. Gako-fotograma-token bakoitzaren gainean iruzkin labur batek ere gero asmatzeko orduak aurreztu ditzake. Garatzaile batek token fitxategia ireki, behar duen efektua eskaneatu eta erabilera eredua zuzenean bere osagaian kopiatu ahal izan beharko luke. Malgutasuna da ikuspegi honek ahalegina merezi duena. Zentzuzko propietate pertsonalizatuak agerian utziz, taldeei animazioa egokitzeko aukera ematen diegu sistema hautsi gabe. Aldi berean, saiatu gehiegi konplikatzen ez. Eman garrantzia duten botoiak eta mantendu gainerakoak iritzia. Azkenik, gogoratu irisgarritasuna. Animazio guztiek ez dute mugimendu murriztuko alternatibarik behar, baina askok bai. Egokitzapen hauek goiz egiteak esan nahi du inoiz ez ditugula berritu behar geroago, eta gure erabiltzaileek inoiz aipatu ez badute ere nabarituko duten arreta maila erakusten du.
Nire esperientziaren arabera, gako-fotograma-tokenak gure diseinu-tokenen lan-fluxuaren parte gisa tratatzea da itsatsi egiten dituena. Behin lekuan jarrita, efektu berezi sentitzeari utzi eta diseinu-lengoaiaren parte bihurtzen dira, produktuak mugitzen eta erantzuten duenaren luzapen naturala. Biltzea Animazioak interfazeak eraikitzeko atal alaienetako bat izan daitezke, baina egiturarik gabe, frustrazio iturri handienetako bat ere bihur daitezke. Gako-fotogramak token gisa tratatuz, normalean nahasia eta kudeatzeko zaila den zerbait hartzen duzu eta sistema argi eta aurreikusgarri batean bihurtzen duzu. Benetako balioa ez da soilik kode lerro batzuk gordetzea. Desagertzea, diapositiba, zooma edo bira bat erabiltzen dituzunean, proiektuan nola jokatuko duen zehatz-mehatz jakitea ziur dago. Propietate pertsonalizatuetatik datorren malgutasunean dago aldakuntza amaigabeen kaosarik gabe. Eta fundazioan eraikitako irisgarritasunean dago gehitu beharreanpentsamendu bat. Ideia hauek talde ezberdinetan eta kode-oinarri ezberdinetan funtzionatzen ikusi ditut, eta eredua beti berdina da. Behin tokenak jarrita, gako-fotogramak trikimailu bilduma sakabanatua izateari utzi eta diseinu-lengoaiaren parte bihurtzen dira. Produktua intentzionalagoa, koherenteagoa eta biziagoa sentiarazten dute. Artikulu honetatik gauza bat hartzen baduzu, hau izan dadila: animazioek koloreei, tipografiari eta tarteari ematen diegun arreta eta egitura bera merezi dute. Gako-fotograma-tokenetan inbertsio txiki batek zure interfazea mugitzen den bakoitzean etekina ematen du.
