Şuny göz öňüne getiriň: täze bir taslama goşulýarsyňyz, kod bazasyna çümýärsiňiz we ilkinji birnäçe sagadyň dowamynda göwnüňizden turan bir zady taparsyňyz. Stil tablisalaryna ýaýran, şol bir esasy animasiýa üçin birnäçe @keyframes kesgitlemesini tapyp bilersiňiz. Üç dürli ýitip barýan effekt, iki ýa-da üç slaýd üýtgeşikligi, bir topar kiçeltmek animasiýasy we iň bolmanda iki dürli aýlaw animasiýasy, sebäbi näme üçin beýle däl? @keyframes impuls { { masştab: 1; } { masştab: 1.1; } }
@keyframes has uly impuls { 0%, 20%, 100% { masştab: 1; } 10%, 40% { masştab: 1.2; } }
Bu ssenariýa tanyş ýaly bolsa, ýeke dälsiňiz. Dürli taslamalar boýunça toplan tejribämde, berip biljek iň yzygiderli çalt ýeňişleriň biri, açar çarçuwalaryny birleşdirmek we standartlaşdyrmakdyr. Bu şeýle ygtybarly bir görnüşe öwrüldi welin, indi islendik täze kod bazasyndaky ilkinji wezipelerimiň biri hökmünde bu arassalanmaga sabyrsyzlyk bilen garaşýaryn. Bulam-bujarlygyň aňyrsyndaky logika Bu artykmaçlyk hakda pikirleneniňizde ajaýyp many berýär. Biziň hemmämiz gündelik işimizde şol bir esasy animasiýalary ulanýarys: solýar, slaýdlar, ulaltmalar, aýlawlar we beýleki umumy täsirler. Bu animasiýalar gaty gönümel we işi bitirmek üçin çalt @keyframes kesgitlemesini gysmak aňsat. Merkezleşdirilen animasiýa ulgamy bolmazdan, döredijiler kod kodynyň başga bir ýerinde eýýäm şuňa meňzeş animasiýalaryň bardygyny bilmän, bu açar çarçuwalary noldan ýazýarlar. Bu esasanam komponent esasly arhitekturada işlänimizde has köp bolýar (köpümiz şu günler edýäris), sebäbi toparlar köplenç programmanyň dürli böleklerinde paralel işleýärler. Netije? Animasiýa bulam-bujarlygy. Kiçi mesele Düwmeleriň köpeldilmegi bilen baglanyşykly iň aç-açan meseleler, ösüş wagtyny we gereksiz kodlary ýitirmekdir. Birnäçe açar çarçuwanyň kesgitlemesi, talaplar üýtgese täzelenmeli ýerleri aňladýar. Adeditip barýan animasiýa wagtyňyzy sazlamalymy? Kod koduňyzyň hemme ýerinde aw etmeli bolarsyňyz. Easeňilleşdiriş funksiýalaryny standartlaşdyrmak isleýärsiňizmi? Thehli üýtgeşiklikleri tapmakda üstünlik. Bejeriş nokatlarynyň bu köpeldilmegi hatda ýönekeý animasiýa täzelenmelerini hem köp wagt talap edýär. Uly mesele Bu açar düwmeleriň köpeldilmegi, ýeriň aşagynda gizlenýän has mekir meseläni döredýär: global çäk duzagy. Komponent esasly arhitektura bilen işlenende-de, CSS açar çarçuwalary elmydama dünýä derejesinde kesgitlenýär. Bu, ähli açar çarçuwalaryň ähli komponentlere degişlidigini aňladýar. Elmydama. Hawa, animasiýaňyz komponentiňizde kesgitlän açar çarçuwalaryňyzy hökman ulanmaýar. Global derejä ýüklenen şol bir ada laýyk gelýän iň soňky açar düwmelerini ulanýar. Keyhli açar çarçuwalaryňyz birmeňzeş bolsa, bu kiçijik mesele ýaly bolup biler. Aöne belli bir ulanylyş üçin animasiýa düzmek isleýän pursatyňyzda kynçylyk çekýärsiňiz ýa-da has erbet tarapy, olara sebäp bolarsyňyz. Anima-da animasiýaňyz işlemez, sebäbi özüňizden soň ýüklenen başga bir komponent, açar çarçuwalaryňyzy täzeden ýazmak ýa-da komponentiňiz soňky gezek ýüklenýär we şol açar çarçuwanyň adyny ulanyp beýleki komponentler üçin animasiýa häsiýetini tötänleýin üýtgedýär, hatda özüňizem duýman bilersiňiz. Meseläni görkezýän ýönekeý mysal: .component-one { / * komponent stilleri * / animasiýa: impuls 1s aňsat-aňsat çäksiz alternatiw; }
/ * bu @keyframes kesgitlemesi işlemez * / @keyframes impuls { { masştab: 1; } { masştab: 1.1; } }
/ * soň kodda ... * /
komponent-iki { / * komponent stilleri * / animasiýa: impuls 1s aňsat-aňsat çäksiz; }
/ * bu açar çarçuwalar iki komponente hem degişlidir * / @keyframes impuls { 0%, 20%, 100% { masştab: 1; } 10%, 40% { masştab: 1.2; } }
Iki komponent hem birmeňzeş animasiýa adyny ulanýar, ýöne ikinji @keyframes kesgitlemesi birinjisini ýazýar. Indi komponent-bir we komponent-ikisi ikinji açar çarçuwalaryny ulanarlar, haýsy komponentiň haýsy açar çarçuwalaryny kesgitländigine garamazdan. Amit Şeniň “Galam açar çarçuwalary” - Demo 1-e serediň. Iň erbet tarapy? Bu köplenç ýerli ösüşde ajaýyp işleýär, ýöne gurluşyk prosesleri stil sahypalaryňyzyň ýükleniş tertibini üýtgedende önümçilikde syrly döwülýär. Haýsy komponentleriň ýüklenendigine we haýsy yzygiderliligine baglylykda başgaça hereket edýän animasiýalar bilen gutarsyňyz. Çözgüt: ifiedeke-täk açar çarçuwalar Bu bulam-bujarlygyň jogaby geň galdyryjy ýönekeý: umumy stil sahypasynda saklanylýan öňünden kesgitlenen dinamiki açar çarçuwalar. Her bir komponentiň öz animasiýalaryny kesgitlemegine ýol bermegiň ýerine, gowy resminamalaşdyrylan, aňsatlaşdyrylan merkezleşdirilen açar çarçuwalary döredýäristaslamaňyzyň aýratyn zerurlyklaryny ulanyň, saklap bilersiňiz. Düwmeleriň bellikleri hökmünde pikir ediň. Reňkler we aralyk üçin bellikleri ulanşymyz ýaly, köpümiz eýýäm dowamlylygy we ýeňilleşdiriş funksiýalary ýaly animasiýa häsiýetleri üçin bellikleri ulanýarys, näme üçin açar çarçuwalar üçin bellikleri ulanmaly däl? Bu çemeleşme, kiçijik meseläni (kod köpeltmek) we has uly meseläni (global çäklerdäki gapma-garşylyklary) bir gezekde çözmek bilen, ulanýan häzirki dizaýn nyşanlaryňyzyň iş prosesi bilen tebigy birleşip biler. Bu pikir gönümel: ähli umumy animasiýalarymyz üçin ýeke-täk hakykat çeşmesini dörediň. Bu umumy stil tablisasynda taslamamyzyň hakykatdanam ulanýan animasiýa nagyşlaryny öz içine alýan seresaplylyk bilen döredilen açar çarçuwalary bar. Indi kod bazamyzyň bir ýerinde öçürilen animasiýanyň bardygyny ýa-da ýokdugyny çaklap bolmaz. Beýleki komponentlerden tötänleýin animasiýalary ýazyp bolmaz. Hereöne şu ýerde açar: bular diňe statiki göçürmek animasiýalary däl. Olar CSS adaty häsiýetleri arkaly dinamiki we özleşdirilip bilinjek görnüşde döredildi, bu bolsa bir ýerde birneme ulurak “impuls” animasiýasy gerek bolsa, animasiýalary belli bir ulanylyş ýagdaýlaryna uýgunlaşdyrmak üçin çeýeligi saklamaga mümkinçilik berýär. Ilkinji açar çarçuwalaryny gurmak Ilki bilen çözülmeli pes asma miweleriň biri “solup giden” animasiýa. Recentaňy-ýakynda amala aşyran taslamalarymyň birinde on-dan gowrak aýry-aýry kesgitlemeleri tapdym, hawa, bularyň hemmesi diňe 0-dan 1-e çenli aç-açanlygy janlandyrdy. Şeýlelik bilen, täze stil tablisasyny döredeliň, oňa kf-tokens.css diýeliň, ony taslamamyza import edeliň we açar çarçuwalarymyzy içerde dogry düşündirişler bilen goýalyň. / * keyframes-tokens.css * /
/ * * Fade In - solýan giriş animasiýasy * Ulanylyşy: animasiýa: kf-fade-in 0.3s ýeňillik; * / @keyframes kf-fade-in { { düşnüksizlik: 0; } { düşnüksizlik: 1; } }
Bu ýekeje @keyframes jarnamasy, kod bazamyzdaky dargap giden animasiýalaryň hemmesini çalyşýar. Arassa, ýönekeý we dünýä derejesinde ulanylýar. Indi bu belligi kesgitlänimizden soň, ony taslamamyzyň islendik böleginden ulanyp bileris: .modal { animasiýa: kf-fade-in 0.3s ýeňillik; }
.tooltip { animasiýa: kf-fade-in 0.2s ýeňillik; }
bildiriş { animasiýa: kf-fade-in 0.5s ýeňillik; }
Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens - Demo 2” -e serediň. Bellik: @keyframes atlarymyzyň hemmesinde kf-prefiksi ulanýarys. Bu prefiks, taslamadaky bar bolan animasiýalar bilen gapma-garşylyklaryň atlandyrylmagynyň öňüni alýan at giňişligi bolup hyzmat edýär we bu açar çarçuwalaryň açar çarçuwalar bellikler faýlymyzdan gelip çykýandygyny derrew açyk görkezýär. Dinamiki slaýd etmek “Kf-fade-in” açar çarçuwalary gaty gowy işleýär, sebäbi ýönekeý we zatlary bulaşdyrmak üçin az ýer bar. Beýleki animasiýalarda bolsa has dinamik bolmaly we bu ýerde CSS adaty häsiýetleriniň ägirt güýjüni ulanyp bileris. Bu ýerde dargadylan statiki animasiýalar bilen deňeşdirilende açar çarçuwaly bellikler hakykatdanam şöhle saçýar. Geliň umumy bir ssenariýa alalyň: “slaýd” animasiýalary. Emma nireden süýşmeli? Sagdan 100px? Çepden 50%? Ekranyň ýokarsyndan girmelimi? Ora-da aşakdan ýüzüp biler? Mümkinçilikler köp, ýöne her ugur we her üýtgeşiklik üçin aýratyn açar çarçuwalary döretmegiň ýerine, ähli ssenariýalara uýgunlaşýan bir çeýe belgi gurup bileris: / * * Slaýd In - ugrukdyryjy slaýd animasiýasy * Dolandyryş ugruna --kf-slaýd-dan ulanyň * Bellenen: çepden slaýdlar (-100%) * Ulanylyşy: * animasiýa: kf-slaýd-0.3s ýeňil; * --kf-slaýd-dan: -100px 0; // çepden süýşmek * --kf-slaýd-dan: 100px 0; // sagdan süýşmek * --kf-slaýd-dan: 0 -50px; // ýokardan süýşmek * /
@keyframes kf-slaýd-in { { terjime: var (- kf-slaýd-dan, -100% 0); } { terjime: 0 0; } }
Indi bu ýeke-täk @keyframes belligini islendik slaýd ugry üçin diňe --kf-slaýd-adaty emläkden üýtgedip ulanyp bileris: .sidebar { animasiýa: kf-slaýd-in 0.3s ýeňil; / * Bellenen bahany ulanýar: çepden slaýdlar * / }
bildiriş { animasiýa: kf-slaýd-0.4s ýeňil; --kf-slaýd-dan: 0 -50px; / * ýokardan slaýd * / }
.modal { animasiýa: kf-fade-in 0,5s, kf-slaýd-in 0,5s kub-bezier (0.34, 1.56, 0.64, 1); --kf-slaýd-dan: 50px 50px; / * aşaky sagdan slaýd * / }
Bu çemeleşme, yzygiderliligi saklamak bilen bize ajaýyp çeýeligi berýär. Bir açar çarçuwaly beýannama, çäksiz mümkinçilikler. Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens - Demo 3” -e serediň. Animasiýalarymyzy has çeýe etmek islesek, “çykmak” effektlerine-de ýol bererisindiki bölümde görşümiz ýaly, adaty emläk üçin --kf-slaýd goşuň. Iki taraplaýyn ýakynlaşdyrma açarlary Taslamalarda köpeldilýän başga bir umumy animasiýa “ulaltmak” effektleri. Tost habarlary üçin inçe masştab bolsun, modallary dramatiki ulaltmak ýa-da sözbaşylar üçin ýumşak peseltmek effekti bolsun, animasiýa animasiýalary hemme ýerde. Her masştab bahasy üçin aýratyn açar çarçuwalaryny döretmegiň ýerine, kf-zoom açar çarçuwalarynyň bir çeýe toplumyny guralyň:
/ * * Ulaltmak - göwrümli animasiýa * Ölçeg bahalaryna gözegçilik etmek üçin --kf-zoom-from we --kf-zoom-ulanyň * Bellenilen: 80% -den 100% -e çenli ulaldýar (0.8-den 1-e çenli) * Ulanylyşy: * animasiýa: kf-zoom 0.2s ýeňil; * --kf-zoom-dan: 0,5; --kf-zoom-to: 1; // 50% -den 100% -e çenli ulaltmak * --kf-zoom-dan: 1; --kf-zoom-to: 0; // 100% -den 0% -e ýakynlaşdyryň * --kf-zoom-dan: 1; --kf-zoom-to: 1.1; // 100% -den 110% -e ýakynlaşdyryň * /
@keyframes kf-zoom { { masştab: var (- kf-zoom-dan, 0.8); } { masştab: var (- kf-zoom-to, 1); } }
Bir kesgitleme bilen, zerur bolan islendik ulaltma üýtgemegine ýetip bileris: .toast { animasiýa: kf-slaýd-0.2s, kf-zoom 0.4s ýeňillik; --kf-slaýd-dan: 0 100%; / * ýokardan slaýd * / / * Adaty ulaltmagy ulanýar: terezisi 80% -den 100% -e çenli / / }
.modal { animasiýa: kf-zoom 0.3s kub-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-dan: 0; / * 0% -den 100% -e çenli ulaltmak * / }
.heading { animasiýa: kf-fade-in 2s, kf-zoom 2s ýeňillik; --kf-zoom-dan: 1.2; --kf-zoom-to: 0.8; / * mylaýym masştab * / }
Dymmaklyk 0.8 (80%), tost habarlary we kartoçkalar ýaly UI elementleriniň köpüsi üçin ajaýyp işleýär, şol bir wagtyň özünde-de ýörite ýagdaýlarda sazlamak aňsat. Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens - Demo 4” -e serediň. Soňky mysallarda gyzykly bir zady gören bolmagyňyz mümkin: animasiýalary birleşdirýäris. @ Keyframes bellikleri bilen işlemegiň esasy artykmaçlyklaryndan biri, olaryň biri-biri bilen üznüksiz birleşmegi üçin döredilendigi. Bu tekiz kompozisiýa tötänleýin däl. Animasiýa kompozisiýasyny soňundan has jikme-jik ara alyp maslahatlaşarys, nirede problema bolup biljekdigini, ýöne kombinasiýalaryň köpüsi gönümel we durmuşa geçirmek aňsat. Bellik: Bu makalany ýazanymda, belki-de ýazanym sebäpli, giriş animasiýalary baradaky ähli pikirimi täzeden gözden geçirdim. CSS-de soňky gazanylan üstünlikler bilen bize henizem zerurlyk barmy? Bagtymyza, Adam Argyle şol soraglary öwrenip, blogynda ajaýyp beýan etdi. Bu ýerde ýazylanlara ters gelmeýär, ýöne esasanam taslamalaryňyz giriş animasiýalaryna bil baglaýan bolsa, göz öňünde tutmaly çemeleşmäni hödürleýär. Üznüksiz animasiýa Giriş animasiýalary, “solýar”, “slaýd” we “ulaltmak” ýaly bir gezek bolup, soň bolsa, dowamly animasiýalar ünsi çekmek ýa-da dowam edýän işjeňligi görkezmek üçin belli bir wagtlap aýlanýar. Iň köp duş gelýän üznüksiz animasiýalar “aýlanmak” (görkezijileri ýüklemek üçin) we “impuls” (möhüm elementleri bellemek üçin). Bu animasiýalar açar çarçuwaly bellikleri döretmek meselesinde özboluşly kynçylyklary döredýär. Adatça bir ştatdan beýlekisine gidýän giriş animasiýalaryndan tapawutlylykda, üznüksiz animasiýalar özlerini alyp barş usullarynda ýokary derejede özleşdirilmeli. Aýlaw lukmany Her taslama birnäçe aýlaw animasiýalaryny ulanýan ýaly. Käbirleri sagat ugruna aýlanýar, käbirleri sagat tersine aýlanýar. Käbirleri 360 dereje bir gezek aýlanýarlar, käbirleri has çalt täsir etmek üçin birnäçe öwrüm edýärler. Her üýtgeşiklik üçin aýratyn açar çarçuwalary döretmegiň ýerine, ähli ssenariýalary dolandyrýan bir çeýe aýlaw guralyň:
/ * * Aýlanmak - aýlanma animasiýasy * Aýlanma aralygyny dolandyrmak üçin --kf-spin-from we --kf-spin-ulanyň * Aýlanma mukdaryny dolandyrmak üçin --kf-spin-öwrümleri ulanyň * Bellenilen: 0deg-den 360deg-a aýlanýar (1 doly aýlanma) * Ulanylyşy: * animasiýa: kf-spin 1s çyzykly çäksiz; * --kf-aýlaw: 2; // 2 doly aýlaw * --kf-spin-dan: 0deg; --kf-spin-to: 180deg; // ýarym aýlanma * --kf-spin-dan: 0deg; --kf-spin-to: -360deg; // sagat tersine * /
@keyframes kf-spin { { aýlanmak: var (- kf-spin-from, 0deg); } { aýlanmak: hasaplamak (var (- kf-spin-dan, 0deg) + var (- kf-spin-to, 360deg) * var (- kf-spin-turn, 1)); } }
Indi islän aýlaw görnüşimizi döredip bileris:
ýükleýji egiriji { animasiýa: kf-spin 1s çyzykly çäksiz; / * Dymmaklygy ulanýar: 0deg-den 360deg-e aýlanýar * / }
.fast-loader { animasiýa: kf-spin 1.2s aňsatlyk bilen çykýan çäksiz alternatiw; --kf-aýlaw: 3; / * Her sikl üçin her ugur üçin 3 doly aýlaw* / }
.steped-ters { animasiýa: kf-spin 1.5s ädim (8) çäksiz; --kf-spin-to: -360deg; / * sagat tersine * / }
.subtle-wiggle { animasiýa: kf-spin 2s aňsatlyk bilen çykýan çäksiz alternatiw; --kf-spin-dan: -16deg; --kf-spin-to: 32deg; / * 36 degirme: -18deg bilen + 18deg arasynda / / }
Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens - Demo 5” -e serediň. Bu çemeleşmäniň gözelligi, şol bir düwmeleriň çarçuwalary ýüklemek, aýlanýan nyşanlary, wilk effektlerini we hatda çylşyrymly köp öwrümli animasiýalary işlemek üçin işlemegidir. Pulse paradoksy Impuls animasiýalary has çylşyrymly, sebäbi dürli häsiýetleri “impuls” edip bilýär. Käbirleri şkalany impuls edýär, käbirleri aç-açanlygy, käbirleri bolsa ýagtylyk ýa-da doýmak ýaly impuls reňk aýratynlyklaryny güýçlendirýär. Her bir emläk üçin aýratyn açar çarçuwalaryny döretmegiň ýerine, islendik CSS emlägi bilen işleýän açar çarçuwalaryny döredip bileris. Ine, masştab we açyklyk opsiýalary bilen impuls açar çarçuwasynyň mysaly:
/ * * Impuls - impulsly animasiýa * Masştab aralygyny dolandyrmak üçin --kf-impuls-masştabdan we --kf-impuls-masştabdan ulanyň * Açlyk diapazonyna gözegçilik etmek üçin --kf-impuls-opacity-dan we --kf-impuls-opacity-den peýdalanyň * Bellenen: impuls ýok (ähli bahalar 1) * Ulanylyşy: * animasiýa: kf-impuls 2s aňsatlyk bilen çykýan çäksiz alternatiw; * --kf-impuls-masştab-dan: 0.95; --kf-impuls-masştab-dan: 1.05; // masştably impuls * --kf-impuls-açyklyk-dan: 0.7; --kf-impuls-açyklyk: 1; // açyklyk impulsy * /
@keyframes kf-impuls { { masştab: var (- kf-impuls-masştab-dan, 1); düşnüksizlik: var (- kf-impuls-açyklyk-dan, 1); } { masştab: var (- kf-impuls-masştab-to, 1); düşnüksizlik: var (- kf-impuls-açyklyk, 1); } }
Bu köp häsiýeti janlandyryp bilýän çeýe impuls döredýär: Çagyryş-hereket { animasiýa: kf-impuls 0,6s çäksiz alternatiw; --kf-impuls-açyklyk-dan: 0,5; / * açyklyk impulsy * / }
.notification-nokat { animasiýa: kf-impuls 0.6s aňsatlyk bilen çykýan çäksiz alternatiw; --kf-impuls-masştab-dan: 0.9; --kf-impuls-masştab-dan: 1.1; / * masştably impuls * / }
.text-highlight { animasiýa: kf-impuls 1.5s ýeňilliksiz; --kf-impuls-masştab-dan: 0.8; --kf-impuls-açyklyk-dan: 0,2; / * masştab we açyklyk impulsy * / }
Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens” - Demo 6-a serediň. Singleeke-täk kf-impuls açar çarçuwasy, inçe düzmekden başlap, ajaýyp pursatlara çenli hemme zady dolandyryp bilýär. Giňişleýin ýeňillik Düwmeleriň belliklerini ulanmagyň ajaýyp zatlarynyň biri, animasiýa kitaphanamyzy giňeltmegiň we döredijileriň köpüsiniň elastik ýa-da bökmek ýaly başdan başlap ýazmakdan çekinmejek täsirlerini üpjün etmegiň aňsatlygydyr. Ine, bökmek beýikligini gözegçilikde saklamak üçin adaty emläkden --kf-bounce-den peýdalanýan ýönekeý “bounce” açar çarçuwalarynyň nyşanyna mysal. / * * Bounce - girelge animasiýasy * Böküş beýikligini dolandyrmak üçin --kf-bounce-from ulanyň * Bellenilen: 100vh-den bökýär (ekrandan) * Ulanylyşy: * animasiýa: kf-bounce 3s ýeňillik; * --kf-bounce-dan: 200px; // 200px beýiklikden bökmek * /
@keyframes kf-bounce { 0% { terjime: 0 hasap (var (- kf-bounce-den, 100vh) * -1); }
34% { terjime: 0 hasap (var (- kf-bounce-dan, 100vh) * -0.4); }
55% { terjime: 0 hasap (var (- kf-bounce-dan, 100vh) * -0.2); }
72% { terjime: 0 hasap (var (- kf-bounce-dan, 100vh) * -0.1); }
85% { terjime: 0 hasap (var (- kf-bounce-den, 100vh) * -0.05); }
94% { terjime: 0 hasap (var (- kf-bounce-den, 100vh) * -0.025); }
99% { terjime: 0 hasap (var (- kf-bounce-dan, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { terjime: 0 0; animasiýa-wagt-funksiýa: ýeňillik; } }
“Elastik” ýaly animasiýalar, düwmeleriň içindäki hasaplamalar sebäpli birneme kynrak. --Kf-elastik-X-dan we --kf-elastik-Y-dan aýratyn kesgitlemeli (ikisi hem islege bagly) we bilelikde ekranyň islendik nokadyndan elastik girelge döretmäge mümkinçilik berýär.
/ * * Elastik In - elastik giriş animasiýasy * Başlangyç ýagdaýyna gözegçilik etmek üçin --kf-elastik-dan-X we --kf-elastik-dan-Y ulanyň * Bellenen: ýokarky merkezden girýär (0, -100vh) * Ulanylyşy: * animasiýa: kf-elastik-2s ikisinde-de ýeňil; * --kf-elastik-X-dan: -50px; * --kf-elastik-dan-Y: -200px; // giriň (-50px, -200px) * /
@keyframes kf-elastik-in { 0% { terjime: hasap (var (- kf-elastik-X-dan, -50vw) * 1) hasap (var (- kf-elastik-dan-Y, 0px) * 1); }
16% { terjime: hasap (var (- kf-elastik-dan-X, -50vw) * -0.3227) hasap (var (- kf-elastik-dan-Y, 0px) * -0.3227); }
28% { terjime: hasap (var (- kf-elastik-X-dan, -50vw) * 0.1312)hasaplamak (var (- kf-elastik-dan-Y, 0px) * 0.1312); }
44% { terjime: hasap (var (- kf-elastik-X-dan, -50vw) * -0.0463) hasap (var (- kf-elastik-dan-Y, 0px) * -0.0463); }
59% { terjime: hasap (var (- kf-elastik-dan-X, -50vw) * 0.0164) hasap (var (- kf-elastik-dan-Y, 0px) * 0.0164); }
73% { terjime: hasap (var (- kf-elastik-dan-X, -50vw) * -0.0058) hasap (var (- kf-elastik-dan-Y, 0px) * -0.0058); }
88% { terjime: hasap (var (- kf-elastik-dan-X, -50vw) * 0,0020) hasap (var (- kf-elastik-dan-Y, 0px) * 0,0020); }
100% { terjime: 0 0; } }
Bu çemeleşme, diňe bir aýratyn emlägi üýtgedip, taslamamyzdaky ösen açar çarçuwalary gaýtadan ulanmagy we özleşdirmegi aňsatlaşdyrýar.
.bounce-and-zoom { animasiýa: kf-bounce 3s ýeňillik, kf-zoom 3s çyzykly; --kf-zoom-dan: 0; }
.bounce-and-slide { animasiýa-kompozisiýa: goşmak; / * Iki animasiýa hem terjime edýär * / animasiýa: kf-bounce 3s ýeňillik, kf-slaýd-3s ýeňil; --kf-slaýd-dan: -200px; }
elastik animasiýa: kf-elastik-2s ikisinde-de ýeňil; }
Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens - Demo 7” -e serediň. Şu wagta çenli açar çarçuwalary akylly we täsirli usulda nädip birleşdirip boljakdygyny gördük. Elbetde, taslamaňyzyň isleglerine has laýyk gelmek üçin zatlary düzetmek isläp bilersiňiz, ýöne birnäçe umumy animasiýa we gündelik ulanylyş mysallaryny öz içine aldyk. Bu açar çarçuwaly bellikler bilen, häzirki wagtda tutuş taslama boýunça yzygiderli, dowam etdirip boljak animasiýalary döretmek üçin güýçli gurluş bloklarymyz bar. Mundan beýläk köpeldilen açar çarçuwalar ýok, global çäklerdäki gapma-garşylyklar ýok. Anhli animasiýa zerurlyklarymyzy çözmegiň arassa, amatly usuly. Realöne asyl sorag: Bu gurluşyk bloklaryny nädip düzmeli? Hemmesini bir ýere jemlemek Esasy açar çarçuwaly bellikleri birleşdirmegiň ýönekeýdigini gördük. Bize aýratyn bir zat gerek däl, ýöne birinji animasiýany kesgitlemek, ikinjisini kesgitlemek, üýtgeýänleri zerur bolanda bellemek we hut şu. / * Süýşmek + / slaýd * / .toast { animasiýa: kf-fade-in 0.4s, kf-slaýd-in 0,4 kub-bezier (0.34, 1.56, 0.64, 1); --kf-slaýd-dan: 0 40px; }
/ * Ulaltmak + öçmek * / .modal { animasiýa: kf-fade-in 0.3s, kf-zoom 0.3s kub-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-dan: 0.7; --kf-zoom-to: 1; }
/ * Süýşmek + impuls * / bildiriş { animasiýa: kf-slaýd-0,5-ler, kf-impuls 1,2s aňsatlyk bilen çykýan çäksiz alternatiw; --kf-slaýd-dan: -100px 0; --kf-impuls-masştab-dan: 0.95; --kf-impuls-masştab-dan: 1.05; }
Bu kombinasiýalar ajaýyp işleýär, sebäbi her animasiýa başga bir emlägi nyşana alýar: aç-açanlyk, üýtgetmek (terjime / masştab) we ş.m. sometimesöne käwagt gapma-garşylyklar bolýar we biz munuň sebäbini we nädip çözülmelidigini bilmelidiris. Iki animasiýa şol bir emlägi janlandyrjak bolanda - mysal üçin janlandyryjy masştab ýa-da janlandyryjy aç-açanlyk - netije garaşýan zadyňyz bolmaz. Düzgüne görä, animasiýa sanawynyň iň soňkusy bolan şol emläge diňe animasiýa ulanylýar. Bu, CSS-iň şol bir emläkde birnäçe animasiýa işlemeginiň çäklendirmesi. Mysal üçin, bu niýetlenilişi ýaly işlemez, sebäbi diňe kf-impuls animasiýasy ulanylar. .bad-combo { animasiýa: kf-zoom 0,5 öňe, kf-impuls 1,2s çäksiz alternatiw; --kf-zoom-dan: 0,5; --kf-zoom-to: 1.2; --kf-impuls-masştab-dan: 0.8; --kf-impuls-masştab-dan: 1.1; }
Animasiýa goşmaçasy Bir emläge täsir edýän birnäçe animasiýany dolandyrmagyň iň ýönekeý we iň göni usuly, animasiýa-kompozisiýa häsiýetini ulanmakdyr. Aboveokardaky iň soňky mysalda, kf-impuls animasiýasy kf-zoom animasiýasynyň ornuny tutýar, şonuň üçin başlangyç ýakynlaşdyrmany görmeris we garaşylýan masştabyň 1,2 derejesine ýetmeris. Goşmak üçin animasiýa-kompozisiýany düzmek bilen, brauzere iki animasiýany birleşdirmegi aýdýarys. Bu bize isleýän netijämizi berýär. komponent-iki { animasiýa-kompozisiýa: goşmak; }
Amit Şeniň “Galam açar düwmeleri” - Demo 8-e serediň. Bu çemeleşme, şol bir emläge täsirleri birleşdirmek isleýän ýagdaýlarymyzyň köpüsi üçin gowy işleýär. Şeýle hem animasiýalary statiki emläk bahalary bilen birleşdirmeli bolanymyzda peýdalydyr. Mysal üçin, terjime emlägini islän ýerimizde ýerleşdirmek üçin ulanýan bir elementimiz bar bolsa, ony kf-slaýd-açar düwmeleri bilen janlandyrmak islesek, animasiýa-kompozisiýasyz erbet görünýän böküş alarys. Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens - Demo 9” -a serediň. Goşuljak animasiýa-kompozisiýa bilen, animasiýa bar bolanlar bilen rahat birleşdirilýärüýtgediň, şonuň üçin element ýerinde galar we garaşylyşy ýaly janlandyrýar. Animasiýa Stagger Birnäçe animasiýany dolandyrmagyň başga bir usuly, olary “sarsdyrmak”, ýagny birinjisi gutarandan soň ikinji animasiýany başlamakdyr. Bu her bir iş üçin işleýän çözgüt däl, ýöne giriş animasiýasy, yzygiderli animasiýa bar bolsa peýdalydyr. / * açyklyk impulsynda ýitýär * / bildiriş { animasiýa: kf-fade-in 2s ýeňillik, kf-impuls 0,5s 2s aňsatlyk bilen çykýan çäksiz alternatiw; --kf-impuls-açyklyk: 0,5; }
Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens” - Demo 10-a serediň. Sargyt meselesi Üýtgeýän häsiýeti ulanmak bilen işleýän animasiýalarymyzyň uly bölegi. Köp halatlarda bu has amatlydyr. Şeýle hem, öndürijilik artykmaçlygy bar, sebäbi animasiýalary GPU çaltlaşdyryp bolýar. Transöne özgerişleri ulanýan bolsak, özgerişlerimiziň tertibiniň möhümdigini kabul etmelidiris. Köp. Şu wagta çenli açar çarçuwalarymyzda aýratyn üýtgeşmeleri ulandyk. Aýratynlyklara görä, bular hemişe kesgitli tertipde ulanylýar: ilki element terjime edilýär, soň aýlanýar, soňra masştablanýar. Munuň manysy bar we köpümiziň garaşýan zadymyz. Şeýle-de bolsa, üýtgeýän emlägi ulansak, funksiýalaryň ýazylyş tertibi olaryň ulanylýan tertibi. Bu ýagdaýda, X okunda 100 piksel bir zat süýşürip, soň bolsa 45 dereje aýlasak, ilki ony 45 dereje aýlap, soň bolsa 100 piksel bilen hereket eden ýaly däldir. / * Gülgüne kwadrat: Ilki terjime ediň, soňra aýlaň * / .example-one { öwürmek: translateX (100px) aýlanmak (45deg); }
/ * Greenaşyl kwadrat: Ilki aýlaň, soňra terjime ediň / / .example-two { öwürmek: aýlanmak (45deg) translateX (100px); }
Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens - Demo 11” -e serediň. Transformöne üýtgetmek tertibine görä, ähli aýratyn üýtgeşmeler - açar çarçuwaly bellikler üçin ulanan zatlarymyzyň hemmesi özgeriş funksiýalaryndan öň bolup geçýär. Diýmek, üýtgedilen emläkde goýan zatlaryňyz animasiýalardan soň bolar. Emma, meselem, kf-spin açar düwmeleri bilen bilelikde terjime etseňiz, terjime animasiýadan öň bolar. Bulaşykmy ?! Bu, statiki bahalaryň aşakdaky animasiýa ýaly bir animasiýa üçin dürli netijelere sebäp bolup biljek ýagdaýlara getirýär:
/ * Iki aýlawçy üçin umumy animasiýa * / .spinner { animasiýa: kf-spin 1s çyzykly çäksiz; }
/ * Gülgüne egiriji: aýlanmazdan ozal terjime ediň (aýratyn öwrülişik) * / .spinner-gülgüne { terjime: 100% 50%; }
/ * Greenaşyl egiriji: aýlaň, soňra terjime ediň (funksiýa tertibi) * / .spinner-green { öwürmek: terjime etmek (100%, 50%); }
Amit Şin tarapyndan ýazylan “Pen Keyframes Tokens - Demo 12” -e serediň. Ilkinji egirijiniň (gülgüne) kf-aýlanmazdan ozal bolup geçýän terjimesini alýandygyny görüp bilersiňiz, şonuň üçin ilki öz ýerine geçýär we soň aýlanýar. Ikinji egiriji (ýaşyl) aýratyn öwrülişikden soň bolup geçýän terjime () funksiýasyny alýar, şonuň üçin element ilki aýlanýar, soňra häzirki burçuna görä hereket edýär we biz bu giň orbitanyň täsirini alýarys. .Ok, bu ýalňyşlyk däl. CSS hakda bilmeli we birnäçe animasiýa ýa-da köp üýtgeşiklik bilen işlän wagtyňyz ýadyňyzdan çykarmaly däl zatlaryň diňe biri. Gerek bolsa, rotate () funksiýasyny ulanyp elementleri aýlaýan kf-spin-alt açar çarçuwalarynyň goşmaça toplumyny döredip bilersiňiz. Hereketiň azalmagy Alternatiw açar çarçuwalar hakda aýdanymyzda, “animasiýa ýok” opsiýasyny äsgermezlik edip bilmeris. Düwmeleriň belliklerini ulanmagyň iň uly artykmaçlyklaryndan biri, elýeterliligi bişirip bolýar we aslynda muny etmek gaty aňsat. Elýeterliligi göz öňünde tutup, açar çarçuwalarymyzy dizaýn etmek bilen, azaldylan hereketi makul bilýän ulanyjylaryň goşmaça iş ýa-da kod köpeltmezden has ýumşak, az üns berýän tejribe almagyny üpjün edip bileris. “Azaldylan hereket” -iň takyk manysy bir animasiýadan beýlekisine we taslamadan taslama üýtgäp biler, ýöne ýatda saklamaly birnäçe möhüm nokatlar bar: Düwmeleriň öçürilmegi Käbir animasiýalary ýumşadyp ýa-da haýalladyp bolýan bolsa-da, hereketi azaltmak talap edilende düýbünden ýok bolmaly käbirleri bar. Impuls animasiýalary gowy mysal. Bu animasiýalaryň pes hereket re modeiminde işlemeýändigine göz ýetirmek üçin olary degişli media talaplaryna ýazyp bileris.
@media (peseldilen hereketi: ileri tutmaýar) { @keyfrmaes kf-impuls { { masştab: var (- kf-impuls-masştab-dan, 1); düşnüksizlik: var (- kf-impuls-açyklyk-dan, 1); } { masştab: var (- kf-impuls-masştab-to, 1); düşnüksizlik:var (- kf-impuls-açyklyk-to, 1); } } }
Bu, azaltmak üçin ileri tutulýan hereketleri kesgitlän ulanyjylaryň animasiýany görmezligini we isleglerine laýyk gelýän tejribe almagyny üpjün edýär. Derrew Simplyönekeý aýyryp bilmeýän käbir açar çarçuwalarymyz bar, meselem giriş animasiýalary. Gymmat üýtgemeli, janlandyrmaly; bolmasa, elementiň dogry bahalary bolmaz. Emma peseldilen hereketde başlangyç bahadan bu geçiş derrew bolmaly. Muňa ýetmek üçin bahanyň derrew ahyrky ýagdaýyna geçýän goşmaça açar çarçuwalarynyň toplumyny kesgitläris. Bular esasy düwmelerimize öwrülýär. Soň bolsa, öňki mysaldaky ýaly, ileri tutulýan-peseldilen hereketi saýlamak üçin media talaplarynyň içindäki adaty açar çarçuwalary goşarys. / * peseldilen hereket üçin derrew açyň * / @keyframes kf-zoom { , { masştab: var (- kf-zoom-to, 1); } }
@media (peseldilen hereketi: ileri tutmaýar) { / * Asyl kiçeltmek düwmeleri * / @keyframes kf-zoom { { masştab: var (- kf-zoom-dan, 0.8); } { masştab: var (- kf-zoom-to, 1); } } }
Şeýlelik bilen, azaldylan hereketi makul bilýän ulanyjylar elementiň dessine soňky ýagdaýynda peýda boljakdygyny görerler, beýleki adamlar bolsa animasiýa geçişini alarlar. Softumşak çemeleşme Käbir hereketi saklamak isleýän ýagdaýlarymyz bar, ýöne asyl animasiýadan has ýumşak we köşeşýär. Mysal üçin, duralga girelgesini ýumşaklyk bilen çalşyp bileris.
@keyframes kf-bounce { / * Peseldilen hereket üçin ýumşak öçmek * / }
@media (peseldilen hereketi: ileri tutmaýar) { @keyframes kf-bounce { / * Asyl dyzma düwmeleri * / } }
Indi hereketi peseldilen ulanyjylar henizem daşky görnüşi duýýarlar, ýöne güýçli hereket etmezden ýa-da elastik animasiýa bolmazdan. Gurluşyk bloklary ýerleşdirilensoň, indiki sorag olary nädip hakyky iş prosesine öwürmeli. Çeýe açar çarçuwalaryny ýazmak bir zat, ýöne uly taslama boýunça ygtybarly etmek, kyn ýoly öwrenmeli birnäçe strategiýany talap edýär. Durmuşa geçirmegiň strategiýalary we iň oňat tejribe Düwmeleriň bellikleriniň berk kitaphanasy bolansoň, hakyky kynçylyk olary gündelik işe nädip girizmeli.
Synag, ähli açar çarçuwalary birbada taşlamak we meseläniň çözülendigini yglan etmek, ýöne iş ýüzünde iň gowy netijeleriň kem-kemden ogullyga alynmagyndan gelip çykýandygyny gördüm. Fade ýa-da slaýd ýaly iň köp ýaýran animasiýalardan başlaň. Bular uly täzeden ýazmagy talap etmän derrew gymmaty görkezýän aňsat ýeňişler. At dakmak ünsi çekmeli ýene bir nokat. Yzygiderli prefiks ýa-da at giňişligi haýsy animasiýalaryň nyşanydygyny we haýsysynyň ýerli bir gezeklikdigini açyk görkezýär. Şeýle hem tötänleýin çaknyşyklaryň öňüni alýar we täze toparyň agzalaryna umumy ulgamy bir göz bilen tanamaga kömek edýär. Resminamalar koduň özi ýaly möhümdir. Hatda her açar çarçuwasynyň nyşanynyň üstündäki gysga teswir hem birnäçe sagatlap çaklamagy tygşytlap biler. Dörediji bellikler faýlyny açyp, zerur effekti gözden geçirip, ulanyş nusgasyny göni öz komponentine göçürip bilmeli. Çeýeligi, bu çemeleşmäni tagalla etmäge mynasyp edýär. Düşünjeli adaty häsiýetleri paş etmek bilen, topara ulgamy bozmazdan animasiýa uýgunlaşmak üçin ýer berýäris. Şol bir wagtyň özünde, çylşyrymlaşdyrmajak boluň. Möhüm düwünleri üpjün ediň we galanlaryny pikirde saklaň. Ahyrynda elýeterliligi ýadyňyzdan çykarmaň. Her animasiýa peseldilen hereket alternatiwasyna mätäç däl, ýöne köpüsi zerur. Bu düzedişleri ir bişirmek, soňundan täzeden işlemeli däldigimizi aňladýar we ulanyjylarymyzyň hiç haçan ýatlamasa-da üns berjek derejesini görkezýär.
Meniň tejribämde, dizaýn belgileriniň iş akymynyň bir bölegi hökmünde açar çarçuwaly bellikleri bejermek, olary ýapyşdyrýar. Inerinde bolansoň, aýratyn effektler ýaly duýmagy bes edýärler we önümiň hereketiniň we reaksiýasynyň tebigy giňelmesi bolan dizaýn diliniň bir bölegi bolýar. Upapmak Animasiýalar interfeýsleri gurmagyň iň şatlykly böleklerinden biri bolup biler, ýöne gurluşy bolmazdan, olar lapykeçligiň iň uly çeşmelerinden birine öwrülip biler. Düwmeleriň çarçuwalaryna bellik hökmünde garamak bilen, adatça bulaşyk we dolandyrmak kyn we ony aýdyň, öňünden aýdylýan ulgama öwürýärsiňiz. Asyl bahasy diňe birnäçe setir kod tygşytlamakda däl. Adeditip, slaýd, ulaltmak ýa-da aýlanmak ulananyňyzda, onuň taslama boýunça özüni nähili alyp barjakdygyny anyk bilýärsiňiz. Tükeniksiz üýtgeşiklikleriň bulam-bujarlygy bolmazdan, adaty häsiýetlerden gelip çykýan çeýeligi. Munuň ýaly goşulman, binýadyň içinde gurlan elýeterlilikdebir pikir. Bu pikirleriň dürli toparlarda we dürli kod bazalarynda işleýändigini gördüm we nagyş hemişe birmeňzeş. Bellikler ýerleşdirilenden soň, açar düwmeler dargadylan hileler ýygyndysyny bes edýär we dizaýn diliniň bir bölegi bolýar. Önümi has bilgeşleýin, has yzygiderli we has janly duýýarlar. Bu makaladan bir zat alsaňyz, şeýle bolsun: animasiýalar reňklere, tipografiýa we aralyklara berlen aladalara we gurluşa mynasyp. Düwmeleriň belliklerine az mukdarda maýa goýum, interfeýs her gezek hereket edende öwezini dolýar.
