Cabanga ngalokhu: ujoyina iphrojekthi entsha, ungene ku-codebase, futhi emahoreni ambalwa okuqala, uthola okuthile okwaziyo ngokukhungathekisayo. Kusabalele kuwo wonke amashidi esitayela, uthola izincazelo eziningi ze-@keyframes zokugqwayiza okufanayo okuyisisekelo. Imiphumela emithathu ehlukene ye-fade-in, ukuhluka kwamaslayidi amabili noma amathathu, izithombe ezimbalwa zokusondeza, kanye nokugqwayiza okungenani okubili okuhlukene ngenxa yokuthi, kungani kungenjalo? @keyframes pulse { kusuka ku-{ isikali: 1; } ku-{ isikali: 1.1; } }
@keyframes ishayela elikhulu { 0%, 20%, 100% { isikali: 1; } 10%, 40% { isikali: 1.2; } }
Uma lesi simo sizwakala sijwayelekile, awuwedwa. Ngokuhlangenwe nakho kwami kuwo wonke amaphrojekthi ahlukahlukene, enye yezinzuzo ezisheshayo ezingaguquki engingakwazi ukukuletha ukuhlanganisa nokumisa ozimele abangukhiye. Sekuyiphethini ethembekile kangangokuthi manje ngibheke phambili kulokhu kuhlanzwa njengomunye wemisebenzi yami yokuqala kunoma iyiphi i-codebase entsha. I-Logic Behind The Chaos Lokhu kuphelelwa umsebenzi kwenza umqondo ophelele uma ucabanga ngakho. Sonke sisebenzisa ukugqwayiza okufanayo okuyisisekelo emsebenzini wethu wansuku zonke: ukufiphala, amaslayidi, ukusondeza, ukuphotha, neminye imiphumela evamile. Lezi zithombe ezinyakazayo ziqonde ngqo, futhi kulula ukuhlanganisa incazelo esheshayo ye-@keyframes ukuze wenze umsebenzi wenziwe. Ngaphandle kwesistimu yokugqwayiza emaphakathi, onjiniyela babhala ngokwemvelo lawa ozimele abangukhiye kusukela ekuqaleni, bengazi ukuthi ukugqwayiza okufanayo kakade sekukhona kwenye indawo ku-codebase. Lokhu kuvame kakhulu uma usebenza kuma-architecture asekelwe esakhiweni (okwenziwa iningi lethu kulezi zinsuku), njengoba amathimba evamise ukusebenza ngokufana ezingxenyeni ezahlukene zohlelo lokusebenza. Umphumela? Izinxushunxushu zezithombe. Inkinga Encane Izinkinga ezisobala kakhulu ngokuphindaphinda kozimele abangukhiye zimosha isikhathi sokuthuthukisa kanye nokuvimba kwekhodi okungadingekile. Izincazelo zozimele abangukhiye abaningi zisho izindawo eziningi ezizobuyekezwa lapho izidingo zishintsha. Udinga ukulungisa isikhathi sokugqwayiza kwakho kwe-fade? Uzodinga ukuzingela zonke izenzakalo ku-codebase yakho. Ingabe ufuna ukumisa imisebenzi elula? Inhlanhla yokuthola zonke izinhlobo. Lokhu kuphindwaphindwa kwamaphoyinti okulungisa kwenza ngisho nokugqwayiza okulula kubuyekeze umsebenzi odla isikhathi. Inkinga Enkulu Lokhu kuphindaphinda kozimele abangukhiye kudala inkinga ecashile kakhulu ecashe ngaphansi: isicupho sobubanzi bomhlaba. Ngisho noma usebenza ngezakhiwo ezisuselwe engxenyeni, ozimele abangukhiye be-CSS bahlala bechazwa kububanzi bomhlaba. Lokhu kusho ukuthi wonke ozimele abangukhiye basebenza kuzo zonke izingxenye. Njalo. Yebo, ukugqwayiza kwakho akusebenzisi ozimele abangukhiye obachaze engxenyeni yakho. Isebenzisa ozimele abangukhiye bokugcina abafana negama elifanayo ncamashi elilayishwe kububanzi bomhlaba. Inqobo nje uma bonke ozimele bakho abangukhiye befana, lokhu kungase kubonakale kuyindaba encane. Kodwa lapho ufuna ukwenza ngokwezifiso ukugqwayiza kwecala elithile lokusetshenziswa, usenkingeni, noma okubi nakakhulu, nguwena ozibangelayo. Kungenzeka ukuthi ukugqwayiza kwakho ngeke kusebenze ngenxa yokuthi enye ingxenye elayishwa ngemva kwakho, ibhala ngaphezulu ozimele bakho abangukhiye, noma ingxenye yakho ilayisha okokugcina futhi ngephutha iguqule ukuziphatha kokugqwayiza kwayo yonke enye ingxenye isebenzisa lolo gama elingukhiye, futhi ungase ungakuqapheli. Nasi isibonelo esilula esibonisa inkinga: .ingxenye-yokuqala { /* izitayela zengxenye */ upopayi: i-pulse 1s lula-in-out enye engapheli; }
/* le ncazelo ye-@keyframes ngeke isebenze */ @keyframes ishayela { kusuka ku-{ isikali: 1; } ku-{ isikali: 1.1; } }
/* kamuva kukhodi... */
.ingxenye-yesibili { /* izitayela zengxenye */ i-animation: i-pulse 1s i-ease-in-out engapheli; }
/* laba ozimele abangukhiye bazosebenza kuzo zombili izingxenye */ @keyframes ishayela { 0%, 20%, 100% { isikali: 1; } 10%, 40% { isikali: 1.2; } }
Zombili izingxenye zisebenzisa igama elifanayo lokugqwayiza, kodwa incazelo yesibili ethi @keyframes ivala eyokuqala. Manje kokubili ingxenye-eyodwa kanye nengxenye-yesibili kuzosebenzisa ozimele abangukhiye besibili, kungakhathaliseki ukuthi iyiphi ingxenye echaza ukuthi yibaphi ozimele abangukhiye. Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 1 [efakwe ngemfoloko] ngu-Amit Sheen. Ingxenye embi kakhulu? Lokhu kuvame ukusebenza kahle ekuthuthukisweni kwendawo kodwa kuphuka ngendlela engaqondakali ekukhiqizeni lapho izinqubo zokwakha zishintsha ukuhleleka kokulayisha kwamashidi akho esitayela. Ugcina ngokugqwayiza oziphatha ngendlela ehlukile kuye ngokuthi yiziphi izingxenye ezilayishwayo nokuthi yiziphi ngokulandelana. Isixazululo: Ozimele abangukhiye Abahlanganisiwe Impendulo yalesi siphithiphithi ilula ngendlela emangalisayo: ozimele abangukhiye abaguquguqukayo abachazwe ngaphambilini abagcinwe eshidini lesitayela okwabelwana ngalo. Esikhundleni sokuvumela yonke ingxenye ichaze ukugqwayiza kwayo, sakha ozimele abangukhiye abamaphakathi abhalwe kahle, okulula ukuwenza.ukusetshenziswa, ukugcinwa, futhi kuhambisana nezidingo ezithile zephrojekthi yakho. Kucabange njengamathokheni ozimele abangukhiye. Njengoba nje sisebenzisa amathokheni emibala nesikhala, futhi abaningi bethu sebevele besebenzisa amathokheni ezindawo zokugqwayiza, njengobude besikhathi nokusebenza okulula, kungani ungasebenzisi amathokheni ozimele abangukhiye futhi? Le ndlela ingahlanganisa ngokwemvelo nanoma yikuphi ukugeleza komsebenzi wethokheni yamanje oyisebenzisayo, kuyilapho uxazulula kokubili inkinga encane (ukuphindaphinda ikhodi) kanye nenkinga enkulu (ukungqubuzana kobubanzi bomhlaba) ngesikhathi esisodwa. Umbono uqondile: dala umthombo owodwa weqiniso wabo bonke opopayi bethu abavamile. Leli shidi lesitayela esabiwe liqukethe ozimele abangukhiye abaklanywe ngokucophelela abamboza amaphethini wokugqwayiza esetshenziswa yiphrojekthi yethu. Akusekho ukuqagela ukuthi ingabe ukugqwayiza okufiphalayo sekukhona kakade ndawana thize ku-codebase yethu. Akusekho ukugqwayiza ngephutha okubhalwe kwezinye izingxenye. Kodwa nansi ukhiye: lezi akuzona nje izithombe ezinyakazayo zokukopisha nokunamathisela. Ziklanyelwe ukuba zibe namandla futhi zenziwe ngendlela oyifisayo ngezakhiwo zangokwezifiso ze-CSS, ezisivumela ukuthi silondoloze ukungaguquguquki ngenkathi sisenamandla okushintsha ukugqwayiza ezimweni ezithile zokusetshenziswa, njengokuthi uma udinga ukugqwayiza “kokushaya kwenhliziyo” okukhudlwana endaweni eyodwa. Ukwakha Ithokheni Yozimele abangukhiye Wokuqala Esinye sezithelo zokuqala ezilenga phansi okufanele sibhekane nazo ukugqwayiza "kwe-fade-in". Kwenye yamaphrojekthi ami akamuva, ngithole izincazelo ezingaphezu kweshumi nambili ezihlukene ezihlukene, futhi yebo, zonke zivele zagqwayiza ukukhanya kusuka ku-0 kuye ku-1. Ngakho-ke, masidale ishidi lesitayela elisha, silibize ngokuthi kf-tokens.css, silingenise kuphrojekthi yethu, futhi sibeke ozimele bethu abangukhiye ngamazwana afanelekile ngaphakathi kwalo. /* keyframes-tokens.css */
/* * Fade In - fade ukungena opopayi * Ukusetshenziswa: ukugqwayiza: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { kusuka ku-{ ukukhanya: 0; } ku-{ ukufiphala: 1; } }
Lesi simemezelo esisodwa se-@keyframes sithatha indawo yabo bonke opopayi abahlakazekile kuyo yonke i-codebase yethu. Ihlanzekile, ilula, futhi iyasebenza emhlabeni jikelele. Futhi njengoba sesichaze le tokheni, singayisebenzisa kunoma iyiphi ingxenye kuyo yonke iphrojekthi yethu: .imodeli { upopayi: kf-fade-in 0.3s ease-out; }
.ithiphu { upopayi: kf-fade-in 0.2s lula-in-out; }
.isaziso { upopayi: kf-fade-in 0.5s ease-out; }
Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 2 [efakwe ngemfoloko] ngu-Amit Sheen. Qaphela: Sisebenzisa isiqalo se-kf- kuwo wonke amagama wethu we-@keyframes. Lesi siqalo sisebenza njengendawo yamagama evimbela ukuqanjwa kwamagama okungqubuzana nokugqwayiza okukhona kuphrojekthi futhi sikwenza kucace ngokushesha ukuthi lawa ozimele abangukhiye bavela efayeleni lethu lamathokheni wozimele abangukhiye. Ukwenza Isilayidi Esinamandla Ozimele abangukhiye be-kf-fade-in basebenza kahle ngoba kulula futhi kunendawo encane yokumosha izinto. Kokunye ukugqwayiza, nokho, sidinga ukuguquguquka okukhulu, futhi lapha singasebenzisa amandla amakhulu wezakhiwo zangokwezifiso ze-CSS. Yilapho amathokheni wozimele abangukhiye ekhanya khona ngempela uma kuqhathaniswa nokugqwayiza okusabalale. Ake sithathe isimo esivamile: izithombe ezinyakazayo "ze-slide-in". Kodwa ngena usuka kuphi? 100px ukusuka kwesokudla? 50% ukusuka kwesokunxele? Ingabe kufanele ingene kusukela phezulu kwesikrini? Noma mhlawumbe ukuntanta kusuka phansi? Maningi kakhulu amathuba, kodwa esikhundleni sokudala ozimele abangukhiye abahlukene bendlela ngayinye nokuhluka ngakunye, singakha ithokheni eyodwa eguquguqukayo evumelana nazo zonke izimo: /* * Slayida Ngaphakathi - izithombe eziqondisayo zesilayidi * Sebenzisa --kf-slide-from ukuze ulawule inkombandlela * Okuzenzakalelayo: amaslayidi ukusuka kwesokunxele (-100%) * Ukusetshenziswa: * opopayi: kf-slide-in 0.3s lula-out; * --kf-slide-from: -100px 0; // shelela ukusuka kwesokunxele * --kf-slide-kusuka: 100px 0; // shelela ukusuka kwesokudla * --kf-slide-kusuka: 0 -50px; // shelela ukusuka phezulu */
@keyframes kf-slide-in { kusuka ku-{ translate: var(--kf-slide-from, -100% 0); } ku-{ humusha: 0 0; } }
Manje singasebenzisa leli thokheni elilodwa elithi @keyframes kunoma iyiphi indlela yesilayidi ngokushintsha --kf-slide-kusuka esakhiweni sangokwezifiso: .ibha eseceleni { upopayi: kf-slide-in 0.3s ease-out; /* Isebenzisa inani elimisiwe: amaslayidi ukusuka kwesokunxele */ }
.isaziso { upopayi: kf-slide-in 0.4s ease-out; --kf-slide-kusuka: 0 -50px; /* slayida ukusuka phezulu */ }
.imodeli { ukugqwayiza: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-kusuka: 50px 50px; /* shelela ukusuka phansi-kwesokudla */ }
Le ndlela isinika ukuguquguquka okumangalisayo ngenkathi sigcina ukungaguquguquki. Isimemezelo sozimele ongukhiye esisodwa, amathuba angapheli. Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 3 [efakwe ngemfoloko] ngu-Amit Sheen. Futhi uma sifuna ukwenza opopayi bethu bavumelane nezimo nakakhulu, okuvumela imiphumela "ye-slide-out" futhi, singakwazivele wengeze i- --kf-slide-ekufeni ngokwezifiso, okufana nalokho esizokubona esigabeni esilandelayo. Ozimele abangukhiye bokusondeza kwezinhlangothi ezimbili Okunye ukugqwayiza okuvamile okuphindwaphindwa kuwo wonke amaphrojekthi imiphumela "zoom". Kungakhathaliseki ukuthi ukulinganisa okucashile kwemilayezo ye-toast, ukusondeza okumangalisayo kwamamodeli, noma umphumela omnene wokwehlisa izihloko, ukugqwayiza kokusondeza kukhona yonke indawo. Esikhundleni sokudala ozimele abangukhiye abahlukene bevelu yesikali ngasinye, masakhe isethi eyodwa eguquguqukayo yozimele bokhiye be-kf-zoom:
/* * Sondeza - ukugqwayiza kwesikali * Sebenzisa --kf-zoom-from kanye --kf-zoom-to ukuze ulawule amanani esikali * Okuzenzakalelayo: ukusondeza kusuka ku-80% kuya ku-100% (0.8 kuya ku-1) * Ukusetshenziswa: * upopayi: kf-zoom 0.2s kalula-out; * --kf-zoom-kusuka: 0.5; --kf-sondeza-ku: 1; // sondeza kusuka ku-50% kuya ku-100% * --kf-zoom-from: 1; --kf-sondeza-kuya: 0; // sondeza kusuka ku-100% kuya ku-0% * --kf-zoom-from: 1; --kf-sondeza-kuya: 1.1; // sondeza kusuka ku-100% kuya ku-110% */
@keyframes kf-zoom { kusuka ku-{ isikali: var(--kf-zoom-from, 0.8); } ku-{ isikali: var(--kf-zoom-to, 1); } }
Ngencazelo eyodwa, singakwazi ukufeza noma yikuphi ukuhluka kokusondeza esikudingayo: .uthoso{ ukugqwayiza: kf-slide-in 0.2s, kf-zoom 0.4s ukuphuma kalula; --kf-slide-kusuka: 0 100%; /* slayida ukusuka phezulu */ /* Isebenzisa ukusondeza okuzenzakalelayo: izikali zisuka ku-80% ziye ku-100% */ }
.imodeli { upopayi: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-kusuka: 0; /* ukusondeza okumangalisayo kusuka ku-0% kuya ku-100% */ }
.isihloko { ukugqwayiza: kf-fade-in 2s, kf-zoom 2s ukungena kalula; --kf-zoom-kusuka: 1.2; --kf-sondeza-kuya: 0.8; /* yehlisa kancane */ }
Okuzenzakalelayo kokuthi 0.8 (80%) kusebenza kahle ezintweni eziningi ze-UI, njengemilayezo yethosti namakhadi, kuyilapho kuselula ukwenza ngendlela oyifisayo ezimweni ezikhethekile. Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 4 [efakwe ngemfoloko] ngu-Amit Sheen. Kungenzeka ukuthi uqaphele okuthile okuthakazelisayo ezibonelweni zakamuva: besihlanganisa ukugqwayiza. Enye yezinzuzo ezibalulekile zokusebenza namathokheni we-@keyframes ukuthi aklanyelwe ukuhlanganisa ngaphandle komthungo. Lokhu kwakheka okubushelelezi kwenziwa ngamabomu, hhayi ngephutha. Sizoxoxa ngokubunjwa kopopayi ngokuningiliziwe kamuva, okuhlanganisa lapho kungaba yinkinga khona, kodwa izinhlanganisela eziningi ziqondile futhi kulula ukuzisebenzisa. Qaphela: Ngenkathi ngibhala lesi sihloko, futhi mhlawumbe ngenxa yokusibhala, ngizithole sengicabanga kabusha wonke umqondo wokugqwayiza kokungena. Ngayo yonke intuthuko yakamuva ku-CSS, ingabe sisayidinga nhlobo? Ngenhlanhla, u-Adam Argyle uhlole imibuzo efanayo futhi wayiveza kahle kubhulogi yakhe. Lokhu akuphikisani nokulotshwe lapha, kodwa kwethula indlela okufanele icatshangelwe, ikakhulukazi uma amaphrojekthi akho ethembele kakhulu ezithombeni zokungena. Izithombe Ezinyakazayo Ngenkathi ukugqwayiza kokungena, njengokuthi “fiphalisa”, “slayida”, “sondeza” kwenzeka kanye bese kuma, ukugqwayiza okuqhubekayo kuyahamba ngokungenamkhawulo ukuze kudonswe ukunaka noma ukukhombisa umsebenzi oqhubekayo. Izithombe ezimbili eziqhubekayo ezivame kakhulu engihlangabezana nazo “i-spin” (yezinkomba zokulayisha) kanye “ne-pulse” (yokugqamisa izici ezibalulekile). Lezi zithombe ezinyakazayo ziletha izinselele ezihlukile uma kuziwa ekudaleni amathokheni ozimele abangukhiye. Ngokungafani nokugqwayiza kokungena okuvamise ukusuka kwesinye isifunda ukuya kwesinye, ukugqwayiza okuqhubekayo kumele kwenziwe ngendlela oyifisayo kakhulu kumaphethini abo okuziphatha. Udokotela we-Spin Yonke iphrojekthi ibonakala isebenzisa ama-spin animation amaningi. Ezinye ziphenduka ngokulandela iwashi, ezinye ziphikisana newashi. Abanye benza ukuzungezisa okukodwa okungu-360-degree, abanye benza izikhathi eziningi ukuze kube nomphumela osheshayo. Esikhundleni sokudala ozimele abangukhiye abahlukene bokuhluka ngakunye, masakhe i-spin eyodwa eguquguqukayo ephatha zonke izimo:
/* * Spin - ukugqwayiza kokuzungezisa * Sebenzisa --kf-spin-from kanye --kf-spin-to ukuze ulawule ububanzi bokuzungezisa * Sebenzisa --kf-spin-turns ukuze ulawule inani lokuzungezisa * Okuzenzakalelayo: izungeza isuka ku-0deg iye ku-360deg (1 ukuzungezisa okugcwele) * Ukusetshenziswa: * opopayi: i-kf-spin 1s engapheli yomugqa; * --kf-spin-turn: 2; // 2 ukuzungezisa okugcwele * --kf-spin-kusuka: 0deg; --kf-spin-kuya: 180deg; // ukuzungeza kwesigamu * --kf-spin-kusuka: 0deg; --kf-spin-kuya: -360deg; // ngokuphambene newashi */
@keyframes kf-spin { kusuka ku-{ zungezisa: var(--kf-spin-from, 0deg); } ku-{ zungezisa: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Manje singakwazi ukudala noma yikuphi ukuhlukahluka kwe-spin esikuthandayo:
.isipina sokulayisha { upopayi: kf-spin 1s linear infinite; /* Isebenzisa okuzenzakalelayo: izungeza isuka ku-0deg iye ku-360deg */ }
.isilayishi esisheshayo { upopayi: kf-spin 1.2s infinite-out infinite alternate; --kf-spin-turn: 3; /* 3 ukuzungezisa okugcwele kokuqondisa ngakunye ngomjikelezo*/ }
.inyathelwe ukuhlehla { upopayi: kf-spin 1.5s izinyathelo(8) ezingapheli; --kf-spin-kuya: -360deg; /* ngokuphambene newashi */ }
.i-subtle-wiggle { upopayi: kf-spin 2s lula-in-out enye engapheli; --kf-spin-kusuka: -16deg; --kf-spin-kuya: 32deg; /* wiggle 36 deg: phakathi -18deg kanye +18deg */ }
Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 5 [efakwe ngemfoloko] ngu-Amit Sheen. Ubuhle bale ndlela ukuthi ozimele abangukhiye abafanayo basebenzela ukulayisha izipina, izithonjana ezizungezisayo, imiphumela ye-wiggle, kanye nokugqwayiza okuyinkimbinkimbi kokujika okuningi. I-Pulse Paradox Opopayi be-Pulse banzima kakhulu ngoba bangakwazi "ukushaya" izici ezihlukile. Ezinye zishaya isikali, ezinye zicindezela ukukhanya, nezinye izici zombala we-pulse njengokukhanya noma ukugcwaliswa kwesikhala. Kunokuba sidale ozimele abangukhiye abahlukene besakhiwo ngasinye, singakha ozimele abangukhiye abasebenza nanoma iyiphi impahla ye-CSS. Nasi isibonelo sozimele we-pulse keyframe enezinketho zesikali ne-opacity:
/* * I-Pulse - izithombe ezinyakazayo * Sebenzisa --kf-pulse-scale-ukusuka kanye --kf-pulse-scale-kuya ukuze ulawule ububanzi besikali * Sebenzisa --kf-pulse-opacity-from and --kf-pulse-opacity-kuya ukuze ulawule ububanzi bokufiphala * Okuzenzakalelayo: akukho ukushaya kwenhliziyo (wonke amanani 1) * Ukusetshenziswa: * opopayi: kf-pulse 2s lula-in-out enye engapheli; * --kf-pulse-scale-kusuka: 0.95; --kf-pulse-scale-to: 1.05; // ukushaya kwesilinganiso * --kf-pulse-opacity-kusuka: 0.7; --kf-pulse-opacity-kuya: 1; // i-opacity pulse */
@keyframes kf-pulse { kusuka ku-{ isikali: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } ku-{ isikali: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
Lokhu kudala i-pulse eguquguqukayo engaphilisa izici eziningi: .ukubizelwa esenzweni { upopayi: kf-pulse 0.6s okunye okungapheli; --kf-pulse-opacity-kusuka: 0.5; /* i-opacity pulse */ }
.ichashazi-isaziso { upopayi: kf-pulse 0.6s lula-in-out enye engapheli; --kf-pulse-scale-kusuka: 0.9; --kf-pulse-scale-to: 1.1; /* ukushaya kwesilinganiso */ }
.gqamisa umbhalo { upopayi: kf-pulse 1.5s lula-out okungapheli; --kf-pulse-scale-kusuka: 0.8; --kf-pulse-opacity-kusuka: 0.2; /* isikali kanye ne-opacity pulse */ }
Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 6 [efakwe ngemfoloko] ngu-Amit Sheen. Lolu hlaka olulodwa lwe-kf-pulse keyframe lungaphatha yonke into kusukela ekubambeni ukunakwa okucashile kuya ezithombeni ezinhle kakhulu ezimangalisayo, konke kube lula ukwenza ngendlela oyifisayo. Ukwelula Okuthuthukile Enye yezinto ezinhle mayelana nokusebenzisa amathokheni ozimele abangukhiye ukuthi kulula kangakanani ukwandisa ilabhulali yethu yokupopayi nokuhlinzeka ngemiphumela onjiniyela abaningi abangeke bazihluphe ngokuyibhala kusukela ekuqaleni, njengokunwebeka noma ukugxuma. Nasi isibonelo sethokheni yozimele abangukhiye elula "egxuma" esebenzisa i- --kf-bounce-kusuka endaweni yangokwezifiso ukulawula ukuphakama kokweqa. /* * Bounce - ukugqwayiza kokungena okugxumayo * Sebenzisa --kf-bounce-from ukulawula ukuphakama kwe-jump * Okuzenzakalelayo: gxuma kusuka ku-100vh (ngaphandle kwesikrini) * Ukusetshenziswa: * opopayi: kf-bounce 3s ukungena kalula; * --kf-bounce-from: 200px; // gxuma ukusuka ku-200px ubude */
@keyframes kf-bounce { 0% { humusha: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { humusha: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { humusha: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { humusha: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { humusha: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { humusha: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { humusha: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { humusha: 0 0; i-animation-timing-function: ukuphuma kalula; } }
Ama-animation afana nokuthi "elastic" anobuqili kancane ngenxa yezibalo ezingaphakathi kozimele abangukhiye. Kudingeka sichaze --kf-elastic-from-X kanye --kf-elastic-from-Y ngokuhlukana (zombili ziyazikhethela), futhi ndawonye zisivumela ukuthi sakhe indawo yokungena enwebekayo kunoma iyiphi indawo esikrinini.
/* * I-Elastic In - ukugqwayiza kokungena okunwebekayo * Sebenzisa --kf-elastic-from-X kanye --kf-elastic-from-Y ukuze ulawule indawo yokuqala * Okuzenzakalelayo: kungena kusuka phezulu maphakathi (0, -100vh) * Ukusetshenziswa: * opopayi: kf-elastic-in 2s lula-in-out kokubili; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // faka kusuka ku-(-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% { humusha: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)i-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% { humusha: 0 0; } }
Le ndlela yokwenza kube lula ukuphinda usebenzise futhi wenze ngendlela oyifisayo ozimele abangukhiye abathuthukile kuyo yonke iphrojekthi yethu, ngokushintsha nje indawo eyodwa yangokwezifiso.
.bounce-and-zoom { ukugqwayiza: kf-bounce 3s ukungena kalula, kf-zoom 3s umugqa; --kf-zoom-kusuka: 0; }
.gxumela-futhi-slide { ukwakheka kwe-animation: engeza; /* Zombili izithombe ezinyakazayo zisebenzisa ukuhumusha */ ukugqwayiza: kf-bounce 3s ukungena kalula, kf-slide-in 3s ukuphuma kalula; --kf-slide-from: -200px; }
.i-elastic-ngaphakathi { upopayi: kf-elastic-in 2s lula-in-out kokubili; }
Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 7 [efakwe ngemfoloko] ngu-Amit Sheen. Kuze kube manje, sesibonile ukuthi singahlanganisa kanjani ozimele abangukhiye ngendlela ehlakaniphile nephumelelayo. Yebo, ungase ufune ukulungisa izinto ukuze zivumelane kangcono nezidingo zephrojekthi yakho, kodwa sihlanganise izibonelo zokugqwayiza ezimbalwa ezivamile nezimo zokusetshenziswa kwansuku zonke. Futhi ngalawa mathokheni ozimele abangukhiye akhona, manje sesinamabhulokhi wokwakha anamandla okudala ukugqwayiza okungaguquki, okulondolozekayo kuyo yonke iphrojekthi. Abasekho ozimele abangukhiye abayimpinda, ngeke kusaba nokungqubuzana kobubanzi bomhlaba. Indlela ehlanzekile, elula yokusingatha zonke izidingo zethu zopopayi. Kodwa umbuzo wangempela uwukuthi: Sizihlanganisa kanjani lezi zakhiwo? Ukuhlanganisa Konke Sibonile ukuthi ukuhlanganisa amathokheni wozimele abangukhiye kulula. Asidingi lutho olukhethekile kodwa ukuchaza ukugqwayiza kokuqala, ukuchaza okwesibili, ukusetha okuguquguqukayo njengoba kudingeka, futhi yilokho. /* Fade ku + slayida kokuthi */ .uthoso{ ukugqwayiza: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-kusuka: 0 40px; }
/* Sondeza + fade ku */ .imodeli { ukugqwayiza: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-kusuka: 0.7; --kf-sondeza-ku: 1; }
/* Shelelezisa ku + shayela */ .isaziso { ukugqwayiza: kf-slide-in 0.5s, kf-pulse 1.2s ukukhululeka-in-out okunye okungenamkhawulo; --kf-slide-kusuka: -100px 0; --kf-pulse-scale-kusuka: 0.95; --kf-pulse-scale-to: 1.05; }
Lezi zinhlanganisela zisebenza kahle ngoba ukugqwayiza ngakunye kuqondise endaweni ehlukile: ukungafihli, ukuguqula (humusha/isikali), njll. Kodwa ngezinye izikhathi kuba nokungqubuzana, futhi sidinga ukwazi ukuthi kungani futhi kanjani ukubhekana nakho. Uma ukugqwayiza okubili kuzama ukugqwayiza isakhiwo esifanayo - isibonelo, kokubili isikali esigqwayizayo noma kokubili ukukhanya okugqwayizayo - umphumela ngeke ube yilokho okulindele. Ngokuzenzakalelayo, okukodwa kuphela kokugqwayiza okusetshenziswa kuleso sakhiwo, okungesokugcina ohlwini lokugqwayiza. Lona umkhawulo wokuthi i-CSS iphatha kanjani ukugqwayiza okuningi endaweni efanayo. Isibonelo, lokhu ngeke kusebenze njengoba kuhlosiwe ngoba kuzosebenza kuphela ukugqwayiza kwe-kf-pulse. .i-bad-combo { ukugqwayiza: kf-zoom 0.5s phambili, kf-pulse 1.2s okunye okungapheli; --kf-zoom-kusuka: 0.5; --kf-sondeza-kuya: 1.2; --kf-pulse-scale-kusuka: 0.8; --kf-pulse-scale-to: 1.1; }
Ukwengezwa Kwezithombe Ezinyakazayo Indlela elula neqondile yokuphatha ukugqwayiza okuningi okuthinta isakhiwo esifanayo ukusebenzisa isici sokwakheka kopopayi. Esibonelweni sokugcina esingenhla, ukugqwayiza kwe-kf-pulse kuthatha indawo yokugqwayiza kwe-kf-zoom, ngakho-ke ngeke sibone ukusondeza kwasekuqaleni futhi ngeke sithole isikali esilindelekile sibe ngu-1.2. Ngokusetha ukwakheka kwe-animation ukuze kwengezwe, sitshela isiphequluli ukuthi sihlanganise kokubili ukugqwayiza. Lokhu kusinika umphumela esiwufunayo. .ingxenye-yesibili { ukwakheka kwe-animation: engeza; }
Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 8 [efakwe ngemfoloko] ngu-Amit Sheen. Le ndlela isebenza kahle ezimweni eziningi lapho sifuna ukuhlanganisa imiphumela esakhiweni esifanayo. Kuwusizo futhi uma sidinga ukuhlanganisa ukugqwayiza namanani esakhiwo amile. Isibonelo, uma sine-elementi esebenzisa isici sokuhumusha ukuze siyimise lapho sifuna khona, bese sifuna ukuyiphila ngozimele abangukhiye be-kf-slide-in, sithola ukweqa okubi okubonakala ngaphandle kokwakheka kwe-animation. Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 9 [efakwe ngemfoloko] ngu-Amit Sheen. Ngokwakhiwa kopopayi okusethiwe ukuze kwengezwe, ukugqwayiza kuhlanganiswe kahle nokukhonaguqula, ukuze i-elementi ihlale endaweni futhi igqwayize njengoba kulindelekile. I-animation Stagger Enye indlela yokuphatha ukugqwayiza okuningi “ukunyakazisa” - okungukuthi, qala ukugqwayiza kwesibili kancane ngemva kokuqeda eyokuqala. Akusona isixazululo esisebenza kuzo zonke izimo, kodwa siwusizo uma sinopopayi wokungena olandelwa ukugqwayiza okuqhubekayo. /* fade ku + opacity pulse */ .isaziso { ukugqwayiza: I-kf-fade-in 2s ukuphuma kalula, kf-pulse 0.5s 2s lula-in-out okunye okungenamkhawulo; --kf-pulse-opacity-to: 0.5; }
Bona Amathokheni Ozimele Ozimele Bepeni - Idemo engu-10 [ifakwe ngemfoloko] ngu-Amit Sheen. Oda Izinto Ingxenye enkulu yokugqwayiza esisebenza nayo isebenzisa isakhiwo sokuguqula. Ezimweni eziningi, lokhu kulula kakhulu. Iphinde ibe nenzuzo yokusebenza njengoba ukuguqulwa kwezithombe kungasheshiswa yi-GPU. Kodwa uma sisebenzisa uguquko, sidinga ukwamukela ukuthi indlela esenza ngayo izinguquko ibalulekile. Kuningi. Kozimele bethu abangokhiye kuze kube manje, sisebenzise ukuguqulwa ngakunye. Ngokusho kwama-specs, lezi zihlale zisetshenziswa ngokulandelana okungaguquki: okokuqala, i-elementi ithola ukuhumusha, bese iyajikeleza, bese iyakala. Lokhu kunengqondo futhi yilokho iningi lethu elikulindele. Kodwa-ke, uma sisebenzisa isakhiwo soguquko, ukuhleleka okubhalwe ngalo imisebenzi yindlela esetshenziswa ngayo. Kulokhu, uma sihambisa into engamaphikseli angu-100 ku-X-eksisi bese siyizungezisa ngamadigri angu-45, akufani nokuqala siyizungezisa ngamadigri angu-45 bese siyihambisa ngamaphikseli angu-100. /* Isikwele esiphinki: Okokuqala humusha, bese uzungezisa */ .isibonelo-sinye { guqula: translateX(100px) zungezisa(45deg); }
/* Isikwele esiluhlaza: Okokuqala zungezisa, bese uhumusha */ .isibonelo-sesibili { guqula: zungezisa(45deg) translateX(100px); }
Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 11 [efakwe ngemfoloko] ngu-Amit Sheen. Kepha ngokuya ngohlelo loguquko, wonke umuntu uyashintsha - yonke into esiyisebenzisile kumathokheni wozimele abangukhiye - kwenzeka ngaphambi kokuthi imisebenzi yokuguqula. Lokho kusho ukuthi noma yini oyibeka esakhiweni soguquko izokwenzeka ngemuva kokugqwayiza. Kodwa uma usetha, ngokwesibonelo, ukuhumusha kanye nozimele bokhiye be-kf-spin, ukuhumusha kuzokwenzeka ngaphambi kokugqwayiza. Udidekile kodwa?! Lokhu kuholela ezimeni lapho amanani amile angabangela imiphumela ehlukene yokugqwayiza okufanayo, njengakusimo esilandelayo:
/* Izithombe ezinyakazayo zazo zombili izipina */ .isipina { upopayi: kf-spin 1s linear infinite; }
/* Isipina esiphinki: humusha ngaphambi kokuzungezisa (ukuguqula umuntu ngamunye) */ .spinner-pink { humusha: 100% 50%; }
/* Isipina esiluhlaza: zungezisa bese uhumusha (ukuhleleka komsebenzi) */ .spinner-green { guqula: humusha (100%, 50%); }
Bona Amathokheni Ozimele Ozimele Bepeni - Idemo 12 [efakwe ngemfoloko] ngu-Amit Sheen. Ungabona ukuthi isipina sokuqala (esiphinki) sithola ukuhumusha okwenzeka ngaphambi kokuzungezisa kwe-kf-spin, ngakho siqale sihambe siye endaweni yaso bese siyaphotha. Isipina sesibili (esiluhlaza) sithola umsebenzi we-translate() okwenzeka ngemva kokuguqulwa komuntu ngamunye, ngakho isici siqala ukuphotha, bese sihamba ngokuhlobene ne-engeli yamanje, futhi sithola lowo mphumela obanzi we-orbit. Cha, akusona isiphazamisi lesi. Kungenye yalezo zinto okudingeka sizazi nge-CSS futhi sizikhumbule lapho sisebenza ngokugqwayiza okuningi noma izinguquko eziningi. Uma kudingeka, ungaphinda udale isethi eyengeziwe yozimele abangukhiye be-kf-spin-alt abazungezisa izakhi usebenzisa umsebenzi we-rotate(). Ukunyakaza Okuncishisiwe Futhi ngenkathi sikhuluma ngamanye ozimele abangukhiye, asikwazi ukuziba inketho "yokungabikho opopayi". Enye yezinzuzo ezinkulu zokusebenzisa amathokheni ozimele abangukhiye ukuthi ukufinyeleleka kungabhakwa, futhi empeleni kulula kakhulu ukukwenza. Ngokuklama ozimele bethu abangukhiye sicabanga ngokufinyeleleka, singaqinisekisa ukuthi abasebenzisi abancamela ukunyakaza okuncishisiwe bathola okuhlangenwe nakho okushelelayo, okungaphazamisi, ngaphandle komsebenzi owengeziwe noma ukuphindwaphindwa kwekhodi. Incazelo eqondile yokuthi "Ukunyakaza Okuncishisiwe" ingashintsha kancane isuke kopopayi iye kwenye, futhi isuke kuphrojekthi iye kuphrojekthi, kodwa nanka amaphuzu ambalwa abalulekile okufanele uwakhumbule: Ithulisa Ozimele abangukhiye Ngenkathi okunye ukugqwayiza kungathanjiswa noma kwehliswe ijubane, kukhona okunye okufanele kunyamalale ngokuphelele lapho ukunyakaza okuncishisiwe kucelwa. Izithombe ze-Pulse ziyisibonelo esihle. Ukuqinisekisa ukuthi lezi zithombe ezinyakazayo azisebenzisi kumodi yokunyakaza encishisiwe, singavele sizisonge embuzweni ofanelekile wemidiya.
@media (incamela-yehlisiwe-ukunyakaza: akukho-okuncanyelwayo) { @keyfrmaes kf-pulse { kusuka ku-{ isikali: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } ku-{ isikali: var(--kf-pulse-scale-to, 1); ukukhanya:var(--kf-pulse-opacity-to, 1); } } }
Lokhu kuqinisekisa ukuthi abasebenzisi abasethe ukunyakaza okuncamelayo-okuncishisiwe ukuze kuncishiswe ngeke bakubone ukugqwayiza futhi bazothola ukuzizwisa okufana nokuthandayo. I-Instant In Kukhona ozimele abangukhiye esingeke sikwazi ukuvele sibasuse, njengokugqwayiza kokungena. Inani kufanele lishintshe, kufanele liphile; uma kungenjalo, isici ngeke sibe namanani alungile. Kodwa ngokunyakaza okuncishisiwe, lokhu kuguqulwa kusuka kunani lokuqala kufanele kube khona manjalo. Ukuze sifinyelele lokhu, sizochaza isethi eyengeziwe yozimele abangukhiye lapho inani leqela khona ngokushesha lifinyelele esimeni sokugcina. Laba kuba ozimele bethu abangukhiye abazenzakalelayo. Bese, sizokwengeza ozimele abangukhiye abavamile ngaphakathi kombuzo wemidiya ukuze uthole ukunyakaza okuncamelayo okuncishisiwe okusethwe kokungathandwayo, njengasesibonelweni sangaphambilini. /* ngena ngokushesha ukuze uthole ukunyakaza okuncishisiwe */ @keyframes kf-zoom { kusuka, kuya ku-{ isikali: var(--kf-zoom-to, 1); } }
@media (incamela-yehlisiwe-ukunyakaza: akukho-okuncanyelwayo) { /* Ozimele bokhiye bokusondeza boqobo */ @keyframes kf-zoom { kusuka ku-{ isikali: var(--kf-zoom-from, 0.8); } ku-{ isikali: var(--kf-zoom-to, 1); } } }
Ngale ndlela, abasebenzisi abancamela ukunyakaza okuncishisiwe bazobona isici sivela khona manjalo esimeni saso sokugcina, kuyilapho wonke umuntu ethola uguquko olugqwayizayo. Indlela Ethambile Kunezimo lapho sifuna ukugcina ukunyakaza okuthile, kodwa kuthambile futhi kuzolile kunopopayi wasekuqaleni. Isibonelo, singashintsha indawo yokungena ebhampa ngokufaka i-fade-in emnene.
@keyframes kf-bounce { /* Ukufiphala okuthambile kokunyakaza okuncishisiwe */ }
@media (incamela-yehlisiwe-ukunyakaza: akukho-okuncanyelwayo) { @keyframes kf-bounce { /* Ozimele abangukhiye bangempela */ } }
Manje, abasebenzisi abanokunyakaza okuncishisiwe okunikwe amandla basathola umuzwa wokubukeka, kodwa ngaphandle kokunyakaza okunamandla kwe-bounce noma ukugqwayiza okunwebekayo. Njengoba amabhlogo wokwakha ekhona, umbuzo olandelayo ngowokuthi ungenziwa kanjani ube yingxenye yokuhamba komsebenzi wangempela. Ukubhala ozimele abangukhiye abavumelana nezimo kuyinto eyodwa, kodwa ukubenza bathembeke kuyo yonke iphrojekthi enkulu kudinga amasu ambalwa obekufanele ngiwafunde kabuhlungu. Amasu Okusebenzisa Nemikhuba Engcono Kakhulu Uma sesinomtapo wolwazi oqinile wamathokheni ozimele abangukhiye, inselele yangempela ukuthi uwaletha kanjani emsebenzini wansuku zonke.
Isilingo siwukuba uphonsa wonke ama-keyframes ngesikhathi esisodwa futhi umemezele inkinga exazululiwe, kodwa ngokwenza ngithole ukuthi imiphumela engcono kakhulu ivela ekuthathweni kancane kancane. Qala ngokugqwayiza okujwayeleke kakhulu, njengokufiphala noma islayidi. Lokhu ukunqoba okulula okubonisa inani elisheshayo ngaphandle kokudinga ukubhalwa kabusha okukhulu. Ukuqamba igama kungenye iphuzu elidinga ukunakwa. Isiqalo esingaguquki noma indawo yamagama yenza kube sobala ukuthi iziphi izithombe ezinyakazayo ezingamathokheni nokuthi iziphi izinto eziphuma endaweni eyodwa. Kuphinde kuvimbele ukungqubuzana kwengozi futhi kusize amalungu eqembu amasha abone isistimu eyabiwe ngokubuka nje. Amadokhumenti abaluleke njengekhodi ngokwayo. Ngisho namazwana amafushane ngaphezu kwethokheni yozimele abangukhiye ingalondoloza amahora wokuqagela kamuva. Unjiniyela kufanele akwazi ukuvula ifayela lamathokheni, askene umphumela awudingayo, futhi akopishe iphethini yokusetshenziswa ngokuqondile engxenyeni yawo. Ukuvumelana nezimo yikho okwenza le ndlela iwufanele umzamo. Ngokudalula izakhiwo zangokwezifiso ezinengqondo, sinikeza amaqembu indawo yokujwayela ukugqwayiza ngaphandle kokuphula isistimu. Ngesikhathi esifanayo, zama ukungabambisi ngokweqile. Nikeza amafindo abalulekile futhi ugcine abanye benemibono. Okokugcina, khumbula ukufinyeleleka. Akuwona wonke ama-animation adinga enye indlela encishisiwe yokunyakaza, kodwa abaningi bayayidinga. Ukubhaka kulokhu kulungiswa kusenesikhathi kusho ukuthi ngeke kudingeke ukuthi sikubuyisele emuva kwesikhathi, futhi kubonisa izinga lokunakekela abasebenzisi bethu abazoliqaphela ngisho noma bengalisho.
Ngokuhlangenwe nakho kwami, ukuphatha amathokheni ozimele abangukhiye njengengxenye yokuhamba komsebenzi wethu wamathokheni edizayini yikho okuwenza anamathele. Uma sezisendaweni, ziyayeka ukuzizwa njengemiphumela ekhethekile futhi zibe yingxenye yolimi lokuklama, isandiso semvelo sokuthi umkhiqizo uhamba kanjani futhi uphendule. Esonga Opopayi bangaba enye yezingxenye ezijabulisa kakhulu zokusebenzelana kwesakhiwo, kodwa ngaphandle kwesakhiwo, bangaba omunye wemithombo emikhulu yokukhungatheka. Ngokuphatha ozimele abangukhiye njengamathokheni, uthatha into evamise ukuxaka futhi okunzima ukuyiphatha futhi uyiguqule ibe uhlelo olucacile, olubikezelwayo. Inani langempela alikho nje ekugcineni imigqa embalwa yekhodi. Kusekwethembeni ukuthi uma usebenzisa i-fade, islayidi, ukusondeza, noma i-spin, wazi kahle ukuthi kuzoziphatha kanjani kuyo yonke iphrojekthi. Kusekuguquguqukeni okuvela ezakhiweni zangokwezifiso ngaphandle kwesiphithiphithi sokuhlukahluka okungapheli. Futhi isekufinyeleleni okwakhelwe esisekelweni kunokuba yengezwe njengeumcabango olandelayo. Ngibone le mibono isebenza emaqenjini ahlukene nasezisekelweni zekhodi ezahlukene, futhi iphethini ihlale ifana. Uma amathokheni ekhona, ozimele abangukhiye bayayeka ukuba iqoqo lamaqhinga ahlakazekile futhi babe yingxenye yolimi lokuklama. Benza umkhiqizo uzizwe unenhloso, ungaguquguquki, futhi uphila. Uma uthatha into eyodwa kulesi sihloko, makube yilokhu: opopayi bafanelwe ukunakekelwa okufanayo kanye nesakhiwo esivele sisinika imibala, i-typography, nesikhala. Ukutshalwa kwezimali okuncane kumathokheni wozimele abangukhiye kuyakhokha njalo lapho isixhumi esibonakalayo sakho sihamba.
