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); }
}

            

              
                Copy
              
            
          

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; }
}

            

              
                Copy
              
            
          

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>
            

              
                Copy
              
            
          

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 */
}

            

              
                Copy
              
            
          

Kuidas see töötab:

1. 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)).
2. Me rakendame selle animatsiooni oma .reveal elemendile ja, mis on ülioluline, seome selle view() ajajoonega. Kasutame ka animation-fill-mode: forwards;, et tagada elemendi püsimine oma lõppolekus pärast ajajoone lõppemist.
3. Kuna suund on normal, hakkab animatsioon edasi mängima, kui element hakkab vaateaknasse sisenema (ajajoone edenemine > 0%).
4. Alla kerides muutub element nähtavamaks, ajajoone edenemine suureneb ja animatsioon liigub oma `to` oleku suunas.
5. 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>
            

              
                Copy
              
            
          

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 */

            

              
                Copy
              
            
          

Kuidas see töötab:

1. Meie võtmekaadrid, scatter-letters, defineerivad animatsiooni kokkupandud olekust (`from`) laialipillutatud olekusse (`to`).
2. Me rakendame selle animatsiooni igale tähe span-elemendile ja seome selle view() ajajoonega.
3. Me määrame animation-direction: reverse;. See pöörab vastavuse ümber.
4. 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.
5. 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.
6. 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>
            

              
                Copy
              
            
          

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);
}

            

              
                Copy
              
            
          

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%;
}

            

              
                Copy
              
            
          

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:

1. Määratle ajajoon: Kas jälgite tervet lehte (scroll()) või elemendi nähtavust (view())?
2. Määratle vahemik: Millal see ajajoon algab (0%) ja lõpeb (100%)? (Kasutades animation-range'i).
3. 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();
  }
}

            

              
                Copy
              
            
          

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 */
  }
}

            

              
                Copy
              
            
          

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.