Põhjalik juhend veebiarendajatele CSS-i kerimispõhiste animatsioonide voo juhtimiseks. Õppige kasutama animation-direction'it koos animation-timeline'iga, et luua dünaamilisi ja suunatundlikke kasutajakogemusi.
CSS-i kerimispõhiste animatsioonide suuna valdamine: põhjalik ülevaade voo juhtimisest
Aastaid oli kasutaja kerimisasendile reageerivate animatsioonide loomine JavaScripti pärusmaa. Teegid nagu GSAP ja ScrollMagic muutusid olulisteks tööriistadeks, kuid nendega kaasnes sageli jõudluskulu, kuna need jooksid põhilõimes ja võisid mõnikord põhjustada katkendlikke kogemusi. Veebiplatvorm on arenenud ja täna on meil revolutsiooniline, jõudlusvõimeline ja deklaratiivne lahendus otse veebilehitsejasse sisse ehitatud: CSS-i kerimispõhised animatsioonid.
See võimas uus moodul võimaldab meil siduda animatsiooni edenemise otse konteineri kerimisasendi või elemendi nähtavusega vaateaknas. Kuigi see on monumentaalne samm edasi, tutvustab see uut mõttemudelit. Üks kõige kriitilisemaid aspekte, mida tuleb vallata, on see, kuidas kontrollida animatsiooni käitumist, kui kasutaja kerib edasi versus tagasi. Kuidas panna element alla kerides sisse animeeruma ja tagasi üles kerides välja animeeruma? Vastus peitub tuttavas CSS-i omaduses, mis on saanud uue ja võimsa eesmärgi: animation-direction.
See põhjalik juhend viib teid sügavuti kerimispõhiste animatsioonide voo ja suuna juhtimisse. Uurime, kuidas animation-direction on ümber kohandatud, avame selle käitumise praktiliste näidete abil ja varustame teid teadmistega, et ehitada keerukaid, suunatundlikke kasutajaliideseid, mis tunduvad intuitiivsed ja näevad vapustavad välja.
Kerimispõhiste animatsioonide alused
Enne kui saame oma animatsioonide suunda kontrollida, peame kõigepealt mõistma nende aluseks olevaid põhilisi mehaanikaid. Kui olete selle teemaga uus, on see jaotis ülioluline sissejuhatus. Kui olete juba tuttav, on see suurepärane meeldetuletus mängus olevatest võtmeomadustest.
Mis on kerimispõhised animatsioonid?
Oma olemuselt on kerimispõhine animatsioon animatsioon, mille edenemine ei ole seotud kellaga (st ajaga), vaid kerimise ajajoone edenemisega. Selle asemel, et animatsioon kestaks näiteks 2 sekundit, kestab see kerimistoimingu aja.
Kujutage ette edenemisriba blogipostituse ülaosas. Traditsiooniliselt kasutaksite JavaScripti, et kuulata kerimissündmusi ja uuendada riba laiust. Kerimispõhiste animatsioonidega saate lihtsalt veebilehitsejale öelda: "Seo selle edenemisriba laius kogu lehe kerimisasendiga." Seejärel tegeleb veebilehitseja kõigi keerukate arvutuste ja uuendustega väga optimeeritud viisil, sageli põhilõimest eemal, mille tulemuseks on täiesti sujuv animatsioon.
Peamised eelised on:
- Jõudlus: Töö põhilõimest eemale suunamisega väldime konflikte teiste JavaScripti ülesannetega, mis toob kaasa sujuvamad ja katkestusteta animatsioonid.
- Lihtsus: See, mis kunagi nõudis kümneid ridu JavaScripti, on nüüd saavutatav mõne rea deklaratiivse CSS-iga.
- Parem kasutajakogemus: Animatsioonid, mida kasutaja sisend otse manipuleerib, tunduvad reageerivamad ja kaasahaaravamad, luues tihedama sideme kasutaja ja liidese vahel.
Võtmetegijad: `animation-timeline` ja ajajooned
Maagia orkestreerib animation-timeline omadus, mis käsib animatsioonil jälgida kella asemel kerimise edenemist. On kaks peamist tüüpi ajajooni, millega kokku puutute:
1. Kerimise edenemise ajajoon (Scroll Progress Timeline): See ajajoon on seotud kerimisasendiga kerimiskonteineris. See jälgib edenemist kerimisvahemiku algusest (0%) kuni lõpuni (100%).
See defineeritakse scroll() funktsiooni abil:
animation-timeline: scroll(root); — Jälgib dokumendi vaateakna (vaikimisi kerija) kerimisasendit.
animation-timeline: scroll(nearest); — Jälgib lähima eellase kerimiskonteineri kerimisasendit.
Näide: Lihtne lugemise edenemisriba.
.progress-bar {
transform-origin: 0 50%;
transform: scaleX(0);
animation: fill-progress auto linear;
animation-timeline: scroll(root);
}
@keyframes fill-progress {
to { transform: scaleX(1); }
}
Siin juhib fill-progress animatsiooni lehe ĂĽldine kerimine. Ăślevalt alla kerides edeneb animatsioon 0%-st 100%-ni, skaleerides riba 0-st 1-ni.
2. Vaate edenemise ajajoon (View Progress Timeline): See ajajoon on seotud elemendi nähtavusega kerimiskonteineris (sageli nimetatakse seda vaateaknaks). See jälgib elemendi teekonda, kui see siseneb, läbib ja väljub vaateaknast.
See defineeritakse view() funktsiooni abil:
animation-timeline: view();
Näide: Element, mis ilmub nähtavale muutudes sujuvalt esile.
.reveal-on-scroll {
opacity: 0;
animation: fade-in auto linear;
animation-timeline: view();
}
@keyframes fade-in {
to { opacity: 1; }
}
Sel juhul algab fade-in animatsioon, kui element hakkab vaateaknasse sisenema ja lõpeb, kui see on täielikult nähtav. Ajajoone edenemine on otseselt seotud selle nähtavusega.
Põhikontseptsioon: animatsiooni suuna juhtimine
Nüüd, kui me mõistame põhitõdesid, käsitleme keskset küsimust: kuidas panna need animatsioonid reageerima kerimissuunale? Kasutaja kerib alla ja element ilmub sujuvalt. Ta kerib tagasi üles ja element peaks sujuvalt kaduma. See kahesuunaline käitumine on intuitiivsete liideste loomiseks hädavajalik. Siin teeb animation-direction oma suurejoonelise tagasituleku.
`animation-direction` uuesti vaatluse all
Traditsioonilistes, ajapõhistes CSS-animatsioonides kontrollib animation-direction, kuidas animatsioon edeneb oma võtmekaadrite kaudu mitme iteratsiooni jooksul. Võite olla tuttav selle väärtustega:
normal: Mängib igas tsüklis edasi 0%-st 100%-ni. (Vaikimisi)reverse: Mängib igas tsüklis tagasi 100%-st 0%-ni.alternate: Mängib esimeses tsüklis edasi, teises tagasi ja nii edasi.alternate-reverse: Mängib esimeses tsüklis tagasi, teises edasi ja nii edasi.
Kui rakendate kerimise ajajoont, kaob "iteratsioonide" ja "tsüklite" mõiste suures osas, sest animatsiooni edenemine on otseselt seotud ühe, pideva ajajoonega (nt ülevalt alla kerimine). Veebilehitseja kohandab geniaalselt animation-direction'i, et määratleda seos ajajoone edenemise ja animatsiooni edenemise vahel.
Uus mõttemudel: ajajoone edenemine vs. animatsiooni edenemine
Selle tõeliseks mõistmiseks peate lõpetama ajas mõtlemise ja hakkama mõtlema ajajoone edenemise terminites. Kerimise ajajoon kulgeb 0%-st (kerimisala ülaosa) kuni 100%-ni (kerimisala alaosa).
- Alla/edasi kerimine: Suurendab ajajoone edenemist (nt 10%-lt 50%-le).
- Üles/tagasi kerimine: Vähendab ajajoone edenemist (nt 50%-lt 10%-le).
animation-direction dikteerib nĂĽĂĽd, kuidas teie @keyframes vastavad sellele ajajoone edenemisele.
animation-direction: normal; (Vaikimisi)
See loob otsese, 1-le-1 vastavuse.
- Kui ajajoone edenemine on 0%, on animatsioon oma 0% võtmekaadris.
- Kui ajajoone edenemine on 100%, on animatsioon oma 100% võtmekaadris.
Seega, kui kerite alla, mängib animatsioon edasi. Kui kerite üles, väheneb ajajoone edenemine, seega mängib animatsioon tegelikult tagurpidi. See ongi maagia! Kahesuunaline käitumine on sisse ehitatud. Te ei pea midagi lisaks tegema.
animation-direction: reverse;
See loob pööratud vastavuse.
- Kui ajajoone edenemine on 0%, on animatsioon oma 100% võtmekaadris.
- Kui ajajoone edenemine on 100%, on animatsioon oma 0% võtmekaadris.
See tähendab, et kui kerite alla, mängib animatsioon tagurpidi (oma lõppolekust algolekusse). Kui kerite üles, väheneb ajajoone edenemine, mis paneb animatsiooni mängima edasi (oma algolekust lõppoleku suunas).
See lihtne lüliti on uskumatult võimas. Vaatame seda tegevuses.
Praktiline rakendamine ja näited
Teooria on suurepärane, kuid ehitagem mõned reaalse maailma näited, et neid kontseptsioone kinnistada. Enamiku neist jaoks kasutame view() ajajoont, kuna see on levinud kasutajaliidese elementide puhul, mis animeeruvad ekraanile ilmudes.
Stsenaarium 1: Klassikaline "kerimisel ilmumise" efekt
Eesmärk: Element ilmub sujuvalt ja libiseb üles, kui kerite selle vaatesse. Tagasi üles kerides peaks see sujuvalt kaduma ja alla tagasi libisema.
See on kõige levinum kasutusjuht ja see töötab ideaalselt vaikimisi normal suunaga.
HTML:
<div class="content-box reveal">
<h3>Kerige alla</h3>
<p>See kast animeerub vaatesse.</p>
</div>
CSS:
@keyframes fade-and-slide-in {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal {
/* Alusta animatsiooni 'from' olekus */
opacity: 0;
animation: fade-and-slide-in linear forwards;
animation-timeline: view();
/* animation-direction: normal; on vaikimisi, seega pole seda vaja lisada */
}
Kuidas see töötab:
- Me defineerime võtmekaadrid nimega
fade-and-slide-in, mis viivad elemendi läbipaistvast ja madalamast asendist (translateY(50px)) täielikult läbipaistmatuks ja oma algasendisse (translateY(0)). - Me rakendame selle animatsiooni oma
.revealelemendile ja, mis on ülioluline, seome selleview()ajajoonega. Kasutame kaanimation-fill-mode: forwards;, et tagada elemendi püsimine oma lõppolekus pärast ajajoone lõppemist. - Kuna suund on
normal, hakkab animatsioon edasi mängima, kui element hakkab vaateaknasse sisenema (ajajoone edenemine > 0%). - Alla kerides muutub element nähtavamaks, ajajoone edenemine suureneb ja animatsioon liigub oma `to` oleku suunas.
- Kui kerite tagasi üles, muutub element vähem nähtavaks, ajajoone edenemine *väheneb* ja veebilehitseja pöörab animatsiooni automaatselt tagasi, pannes selle sujuvalt kaduma ja alla libisema. Saate kahesuunalise juhtimise tasuta kaasa!
Stsenaarium 2: "Tagasikerimise" või "uuesti kokkupanemise" efekt
Eesmärk: Element alustab lahtivõetud või lõppolekus ja animeerub alla kerides oma esialgsesse, kokkupandud olekusse.
See on ideaalne kasutusjuht animation-direction: reverse; jaoks. Kujutage ette pealkirja, kus tähed on alguses laiali ja tulevad kerides kokku.
HTML:
<h1 class="title-reassemble">
<span>T</span><span>E</span><span>R</span><span>E</span>
</h1>
CSS:
@keyframes scatter-letters {
from {
/* Kokkupandud olek */
transform: translate(0, 0) rotate(0);
opacity: 1;
}
to {
/* Laialipillutatud olek */
transform: translate(var(--x), var(--y)) rotate(360deg);
opacity: 0;
}
}
.title-reassemble span {
display: inline-block;
animation: scatter-letters linear forwards;
animation-timeline: view(block);
animation-direction: reverse; /* Võtmekomponent! */
}
/* Määra igale tähele juhuslikud lõpp-positsioonid */
.title-reassemble span:nth-child(1) { --x: -150px; --y: 50px; }
.title-reassemble span:nth-child(2) { --x: 80px; --y: -40px; }
/* ... ja nii edasi teiste tähtede jaoks */
Kuidas see töötab:
- Meie võtmekaadrid,
scatter-letters, defineerivad animatsiooni kokkupandud olekust (`from`) laialipillutatud olekusse (`to`). - Me rakendame selle animatsiooni igale tähe span-elemendile ja seome selle
view()ajajoonega. - Me määrame
animation-direction: reverse;. See pöörab vastavuse ümber. - Kui pealkiri on ekraanilt väljas (ajajoone edenemine on 0%), sunnitakse animatsioon oma 100% olekusse (`to` võtmekaader), seega on tähed laiali ja nähtamatud.
- Alla kerides ja pealkirja vaateaknasse sisenedes edeneb ajajoon 100% suunas. Kuna suund on vastupidine, mängib animatsioon oma 100% võtmekaadrist *tagurpidi* oma 0% võtmekaadrini.
- Tulemus: tähed lendavad sisse ja koonduvad, kui kerite vaatesse. Tagasi üles kerimine saadab nad uuesti laiali.
Stsenaarium 3: Kahesuunaline pööramine
Eesmärk: Hammasratta ikoon pöörleb alla kerides päripäeva ja üles kerides vastupäeva.
See on veel ĂĽks otsene rakendus vaikimisi normal suunale.
HTML:
<div class="icon-container">
<img src="gear.svg" class="spinning-gear" alt="Pöörlev hammasratta ikoon" />
</div>
CSS:
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinning-gear {
animation: spin linear;
/* Seo kogu dokumendi kerimisega pideva efekti saavutamiseks */
animation-timeline: scroll(root);
}
Kuidas see töötab:
Lehel alla kerides edeneb juur-kerimise ajajoon 0%-st 100%-ni. normal animatsiooni suunaga vastab see otse `spin` võtmekaadritele, pannes hammasratta pöörlema 0 kuni 360 kraadi (päripäeva). Tagasi üles kerides väheneb ajajoone edenemine ja animatsiooni mängitakse tagurpidi, pannes hammasratta pöörlema 360-st tagasi 0 kraadini (vastupäeva). See on elegantselt lihtne.
Täiustatud voo juhtimise tehnikad
normal ja reverse valdamine on 90% lahingust. Kuid loomingulise potentsiaali tõeliseks avamiseks peate kombineerima suuna juhtimise ajajoone vahemiku juhtimisega.
Ajajoone juhtimine: `animation-range`
Vaikimisi algab view() ajajoon siis, kui element ("subjekt") siseneb kerimisaknasse ja lõpeb, kui see on täielikult läbinud. animation-range-* omadused võimaldavad teil selle algus- ja lõpp-punkti uuesti määratleda.
animation-range-start: [faas] [nihe];
animation-range-end: [faas] [nihe];
`faas` võib olla väärtused nagu:
entry: Hetk, mil subjekt hakkab kerimisaknasse sisenema.cover: Hetk, mil subjekt on täielikult kerimisakna sees.contain: Hetk, mil subjekt sisaldab täielikult kerimisakent (suurte elementide puhul).exit: Hetk, mil subjekt hakkab kerimisaknast lahkuma.
Täiustagem meie "kerimisel ilmumise" näidet. Mis siis, kui me tahame, et see animeeruks ainult siis, kui see on ekraani keskel?
CSS:
.reveal-in-middle {
animation: fade-and-slide-in linear forwards;
animation-timeline: view();
animation-direction: normal;
/* Uued lisad vahemiku juhtimiseks */
animation-range-start: entry 25%;
animation-range-end: exit 75%;
}
Kuidas see töötab:
animation-range-start: entry 25%;tähendab, et animatsioon (ja selle ajajoon) ei alga `entry` faasi alguses. See ootab, kuni element on 25% ulatuses vaateaknasse sisenenud.animation-range-end: exit 75%;tähendab, et animatsioon loetakse 100% lõpetatuks, kui elemendil on jäänud vaid 75% endast enne täielikku väljumist.- See loob efektiivselt väiksema "aktiivse tsooni" animatsiooni jaoks vaateakna keskel. Animatsioon toimub kiiremini ja kesksemalt. Suunaline käitumine töötab endiselt ideaalselt selles uues, piiratud vahemikus.
Ajajoone edenemises mõtlemine: ühendav teooria
Kui te kunagi segadusse satute, tulge tagasi selle põhimudeli juurde:
- Määratle ajajoon: Kas jälgite tervet lehte (
scroll()) või elemendi nähtavust (view())? - Määratle vahemik: Millal see ajajoon algab (0%) ja lõpeb (100%)? (Kasutades
animation-range'i). - Seosta animatsioon: Kuidas teie võtmekaadrid vastavad sellele 0%-100% ajajoone edenemisele? (Kasutades
animation-direction'i).
normal: 0% ajajoon -> 0% võtmekaadrid.reverse: 0% ajajoon -> 100% võtmekaadrid.
Edasi kerimine suurendab ajajoone edenemist. Tagasi kerimine vähendab seda. Kõik muu tuleneb nendest lihtsatest reeglitest.
Veebilehitsejate tugi, jõudlus ja parimad praktikad
Nagu iga tipptasemel veebitehnoloogia puhul, on oluline arvestada rakendamise praktiliste aspektidega.
Praegune veebilehitsejate tugi
2023. aasta lõpu seisuga on CSS-i kerimispõhised animatsioonid toetatud Chromiumi-põhistes veebilehitsejates (Chrome, Edge) ning on aktiivses arenduses Firefoxis ja Safaris. Kontrollige alati ajakohaseid ressursse nagu CanIUse.com uusima tugiteabe saamiseks.
Praegu tuleks neid animatsioone käsitleda progressiivse täiustusena. Sait peab olema ilma nendeta täiesti funktsionaalne. Saate kasutada @supports reeglit, et rakendada neid ainult brauserites, mis mõistavad süntaksit:
/* Vaikimisi stiilid kõikidele veebilehitsejatele */
.reveal {
opacity: 1;
transform: translateY(0);
}
/* Rakenda animatsioonid ainult siis, kui neid toetatakse */
@supports (animation-timeline: view()) {
.reveal {
opacity: 0; /* Määra animatsiooni algolek */
animation: fade-and-slide-in linear forwards;
animation-timeline: view();
}
}
Jõudlusega seotud kaalutlused
Selle tehnoloogia suurim võit on jõudlus. Kuid see kasu realiseerub täielikult ainult siis, kui animeerite õigeid omadusi. Kõige sujuvama võimaliku kogemuse saamiseks piirduge omaduste animeerimisega, mida saab käsitleda brauseri komposiitorlõim ja mis ei käivita paigutuse ümberarvutusi ega ümberjoonistamisi.
- Suurepärased valikud:
transform,opacity. - Kasutada ettevaatlikult:
color,background-color. - Vältida võimalusel:
width,height,margin,top,left(omadused, mis mõjutavad teiste elementide paigutust).
Juurdepääsetavuse parimad praktikad
Animatsioon lisab elegantsi, kuid see võib olla mõnele kasutajale häiriv või isegi kahjulik, eriti neile, kellel on vestibulaarhäired. Austage alati kasutaja eelistusi.
Kasutage prefers-reduced-motion meediapäringut, et oma animatsioonid keelata või neid leebemaks muuta.
@media (prefers-reduced-motion: reduce) {
.reveal, .spinning-gear, .title-reassemble span {
animation: none;
opacity: 1; /* Veendu, et elemendid on vaikimisi nähtavad */
transform: none; /* Lähtesta kõik transformatsioonid */
}
}
Lisaks veenduge, et animatsioonid on dekoratiivsed ega edasta kriitilist teavet, mis ei ole muul viisil kättesaadav.
Kokkuvõte
CSS-i kerimispõhised animatsioonid kujutavad endast paradigma muutust selles, kuidas me ehitame dünaamilisi veebiliideseid. Animatsioonikontrolli viimisega JavaScriptist CSS-i saavutame tohutu jõudluse kasu ja deklaratiivsema, paremini hooldatava koodibaasi.
Nende täieliku potentsiaali avamise võti peitub voo juhtimise mõistmises ja valdamises. Kujutades animation-direction omadust ümber mitte iteratsiooni kontrollerina, vaid vastavuse loojana ajajoone edenemise ja animatsiooni edenemise vahel, saavutame vaevatu kahesuunalise kontrolli. Vaikimisi normal käitumine pakub kõige levinumat mustrit – edasi kerimisel edasi ja tagasi kerimisel tagasi animeerimist – samas kui reverse annab meile võimu luua köitvaid "tagasivõtmise" või "tagasikerimise" efekte.
Kuna veebilehitsejate tugi jätkab kasvamist, muutuvad need tehnikad progressiivsest täiustusest kaasaegsete esiveebiarendajate põhioskuseks. Seega alustage katsetamist juba täna. Mõelge ümber oma kerimispõhised interaktsioonid ja vaadake, kuidas saate asendada keeruka JavaScripti mõne rea elegantse, jõudsa ja suunatundliku CSS-iga.