CSS Animation Range: Sügav sissevaade kerimispõhiste animatsioonide juhtimisse

Aastaid on kasutaja kerimisasendile reageerivate animatsioonide loomine olnud kaasahaaravate veebikogemuste nurgakivi. Alates peentest sissehajutustest kuni keerukate parallaksiefektideni – need interaktsioonid puhuvad staatilistele lehtedele elu sisse. Traditsiooniliselt on need aga kaasa toonud märkimisväärse kulu: sõltuvuse JavaScriptist. Teegid ja kohandatud skriptid, mis kuulavad kerimissündmusi, võivad olla jõudlusmahukad, joostes põhilõimes (main thread) ja põhjustades potentsiaalselt hakitud ning mittereageerivaid kasutajakogemusi, eriti vähem võimsatel seadmetel.

Sisenege veebianimatsioonide uude ajastusse. Viimased edusammud CSS-is muudavad revolutsiooniliselt seda, kuidas me neid interaktsioone käsitleme. Spetsifikatsioon Scroll-Driven Animations pakub võimsa, deklaratiivse ja ülijõudsa viisi animatsioonide sidumiseks otse kerimisriba asendi või elemendi nähtavusega vaateaknas – ja seda kõike ilma ühegi reata JavaScriptita.

Selle uue paradigma keskmes on kaks peamist omadust: animation-timeline ja animation-range. Kuigi animation-timeline seab lava, defineerides, mis animatsiooni juhib (nt dokumendi kerimisriba), on just animation-range see, mis annab meile teralise kontrolli, mida oleme alati ihaldanud. See võimaldab meil määratleda animatsiooni täpsed algus- ja lõpp-punktid sellel ajajoonel.

Selles põhjalikus juhendis uurime CSS-i kerimispõhiste animatsioonide maailma, keskendudes eriliselt omadusele animation-range. Me käsitleme:

• Kerimise ja vaate edenemise ajajoonte põhimõisteid.
• Omaduse animation-range ja selle süntaksi üksikasjalikku jaotust.
• Praktilisi, reaalseid näiteid edenemisribade, ilmumisefektide ja muu loomiseks.
• Parimaid tavasid jõudluse, ligipääsetavuse ja brauserite ühilduvuse osas.

Olge valmis looma animatsioone, mis pole mitte ainult kaunid, vaid ka uskumatult tõhusad, liigutades keerulise loogika põhilõimest komposiitori lõimele (compositor thread), et tagada garanteeritult siidiselt sujuv liikumine.

Aluste mõistmine: mis on kerimispõhised animatsioonid?

Enne kui süveneme omadusse animation-range, on ülioluline mõista süsteemi, milles see toimib. Traditsiooniliselt on CSS-i animatsioonid seotud ajapõhise ajajoonega. Kui defineerite animation-duration: 3s;, edeneb animatsioon kolme sekundi jooksul 0%-st 100%-ni, mida juhib kell.

Kerimispõhised animatsioonid muudavad seda põhimõtteliselt. Nad tutvustavad edenemise ajajoone (Progress Timeline) kontseptsiooni, mida ei juhi aeg, vaid edenemine – kas konteineri kerimise edenemine või elemendi nähtavuse edenemine selle liikumisel läbi vaateakna.

See uus mudel pakub kolme suurt eelist:

1. Jõudlus: Kuna neid animatsioone saab käitada väljaspool põhilõime brauseri komposiitori lõimel, ei konkureeri need ressursside pärast JavaScripti, paigutuse või renderdamisoperatsioonidega. Tulemuseks on erakordselt sujuv animatsioon, vaba hakkimisest, mis sageli vaevab JS-põhiseid kerimiskuulajaid.
2. Lihtsus: CSS-i süntaks on deklaratiivne. Te deklareerite, mida te soovite, et juhtuks, ja brauser tegeleb keeruliste arvutustega. See viib sageli puhtama ja paremini hooldatava koodini võrreldes imperatiivse JavaScriptiga.
3. Ligipääsetavus: Animatsioonid austavad vaikimisi kasutaja eelistusi nagu prefers-reduced-motion, mis teeb kaasavate kogemuste loomise lihtsamaks.

On kaks peamist tüüpi edenemise ajajooni, millega te töötate:

• Kerimise edenemise ajajoon (Scroll Progress Timeline): Jälgib kerimisasendit kerimiskonteineris (ingl k "scroller"). Ajajoon esindab kogu keritavat vahemikku, kõige ülemisest servast (0%) kuni kõige alumise servani (100%).
• Vaate edenemise ajajoon (View Progress Timeline): Jälgib elemendi nähtavust selle liikumisel läbi vaateakna. Ajajoon esindab elemendi teekonda alates vaateaknasse sisenemisest kuni sealt täieliku väljumiseni.

Põhikontseptsioon: omadus `animation-timeline`

Esimene samm kerimispõhise animatsiooni loomisel on standardse CSS-animatsiooni lahtiühendamine selle vaikimisi ajapõhisest kellast ja selle ühendamine uue edenemispõhise ajajoonega. Seda tehakse omaduse animation-timeline abil.

See aktsepteerib funktsiooni, mis defineerib ajajoone allika: kas scroll() kerimise edenemise ajajoone jaoks või view() vaate edenemise ajajoone jaoks.

Kerimise edenemise ajajoon: `scroll()`

Funktsioon scroll() seob animatsiooni konteineri kerimisasendiga. Selle kõige levinum vorm on scroll(scroller, axis).

• scroller: Määrab, millist kerimiselementi jälgida. See võib olla root (dokumendi vaateaken), self (element ise, kui see on keritav) või nearest (lähim ülenev keritav element).
• axis: Määrab, millist kerimistelge jälgida. See võib olla block (sisu voolu peamine suund, tavaliselt vertikaalne), inline (risti `block`-suunaga, tavaliselt horisontaalne), y või x.

Näide: lihtne dokumendi kerimise edenemisriba

Loome lehe ülaossa edenemisriba, mis kasvab, kui kasutaja alla kerib.

            <!-- HTML -->
<div id="progress-bar"></div>

<!-- CSS -->
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 10px;
  width: 100%;
  background-color: dodgerblue;
  transform-origin: left;

  /* Detach from time, attach to document scroll */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}
            

              
                Copy
              
            
          

Selles näites juhib grow-progress animatsiooni nüüd põhidokumendi (root) kerimine selle vertikaalsel teljel (block). Kui kerite lehte 0%-st 100%-ni, muutub edenemisriba `scaleX` transformatsioon 0-st 1-ni.

Vaate edenemise ajajoon: `view()`

Funktsioon view() seob animatsiooni elemendi nähtavusega selle kerimiskonteineris. See on uskumatult kasulik "ilmumisanimatsioonide" käivitamiseks, kui elemendid vaatesse ilmuvad.

Selle süntaks on view(axis, inset).

• axis: Valikuline, samad väärtused nagu funktsioonis scroll() (nt block). Määrab, millist kerimisakna telge arvestada.
• inset: Valikuline, võimaldab kohandada nähtavuse arvutamiseks kasutatava vaateakna piire, sarnaselt IntersectionObserver'i omadusele rootMargin.

Näide: elemendi sissehajutamine

            <!-- HTML -->
<div class="content-box reveal">
  This box will fade in as it enters the screen.
</div>

<!-- CSS -->
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  /* Attach animation to this element's visibility */
  animation: fade-in linear;
  animation-timeline: view();
}
            

              
                Copy
              
            
          

Siin on fade-in animatsioon seotud .reveal elemendi endaga. Animatsioon edeneb, kui element liigub läbi vaateakna. Aga kuidas see täpselt toimub? Millal see algab ja lõpeb? Siin tulebki mängu animation-range.

Tähelepanu keskpunktis: `animation-range`

Kuigi animation-timeline seab konteksti, pakub animation-range kriitilist kontrolli. See määratleb, milline osa ajajoonest loetakse "aktiivseks" ja seob selle teie @keyframes animatsiooni 0%-st 100%-ni edenemisega.

Põhisüntaks on:

            animation-range: <range-start> <range-end>;
            

              
                Copy
              
            
          

See ütleb brauserile: "Kui ajajoon jõuab punkti <range-start>, peaks animatsioon olema 0% juures. Kui see jõuab punkti <range-end>, peaks animatsioon olema 100% juures."

Väärtused <range-start> ja <range-end> jaoks võivad olla ühte mitmest tüübist:

• Märksõnad (view() jaoks): Spetsiaalsed, väga intuitiivsed nimed nagu entry, exit, cover ja contain. Uurime neid üksikasjalikult.
• Protsendid: Protsent ajajoone kogukestusest. scroll() ajajoone puhul on 0% ülemine serv ja 100% alumine serv.
• CSS pikkusühikud: Fikseeritud pikkuse väärtus nagu 100px või 20rem. See määrab punkti selle kerimisnihke juures ajajoone algusest.

Võite isegi kombineerida märksõnu protsentide või pikkusühikutega eriti peeneteraliseks juhtimiseks, näiteks entry 50% või cover 200px.

Praktiline süvitsiminek: `animation-range` koos `scroll()` ajajoontega

Kui töötate scroll() ajajoonega, seote oma animatsiooni keritava elemendi üldise kerimisvahemikuga. Vaatame, kuidas animation-range aitab meil sihtida selle teekonna konkreetseid osi.

Konkreetse kerimisosa sihtimine

Kujutage ette, et teil on pikk artikkel ja soovite, et konkreetne graafika animeeruks ainult siis, kui kasutaja kerib läbi lehe keskmise poole.

            @keyframes spin-and-grow {
  from { transform: rotate(0deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(360deg) scale(1); opacity: 1; }
}

.special-graphic {
  animation: spin-and-grow linear;
  animation-timeline: scroll(root block);

  /* Animation starts at 25% scroll and ends at 75% scroll */
  animation-range: 25% 75%;
}
            

              
                Copy
              
            
          

Kuidas see töötab:

• Enne kui kasutaja on kerinud 25% lehest, hoitakse animatsiooni selle 0% olekus (rotate(0deg) scale(0.5) opacity: 0).
• Kui kasutaja kerib 25% märgist 75% märgini, edeneb animatsioon 0%-st 100%-ni.
• Pärast seda, kui kasutaja on kerinud mööda 75% märgist, hoitakse animatsiooni selle 100% olekus (rotate(360deg) scale(1) opacity: 1).

See lihtne animation-range'i lisamine annab meile võimsa kontrolli meie efektide ajastuse ja paigutuse üle laiemas kerimiskogemuses.

Absoluutsete pikkusühikute kasutamine

Võite kasutada ka absoluutseid pikkusühikuid. Näiteks, kui soovite, et animatsioon toimuks ainult esimese 500 piksli kerimise jooksul:

            .hero-animation {
  animation: fade-out linear;
  animation-timeline: scroll(root block);

  /* Animation starts at scroll offset 0px and ends at 500px */
  animation-range: 0px 500px;
}
            

              
                Copy
              
            
          

See sobib ideaalselt sissejuhatavate animatsioonide jaoks lehe avaosas, mis peaksid lõppema, kui kasutaja on hakanud sügavamale sisusse kerima.

`animation-range`'i meisterlik valdamine koos `view()` ajajoontega

See on koht, kus animation-range muutub tõeliselt maagiliseks. Kui seda kasutatakse koos view() ajajoonega, ei põhine vahemiku väärtused kogu dokumendi kerimiskõrgusel, vaid elemendi nähtavusel vaateaknas. Siin tulevad mängu spetsiaalsed nimelised vahemikud.

Nimeliste vahemike selgitus

Kujutage ette elementi (ingl k "subject") ja vaateakent (ingl k "scroller"). Nimelised vahemikud kirjeldavad nende kahe kasti vahelist suhet.

• entry: Faas, kus element siseneb vaateaknasse. See algab hetkest, mil elemendi alumine serv ületab vaateakna ülemise serva, ja lõpeb, kui elemendi alumine serv ületab vaateakna alumise serva.
• exit: Faas, kus element lahkub vaateaknast. See algab, kui elemendi ülemine serv ületab vaateakna ülemise serva, ja lõpeb, kui elemendi ülemine serv ületab vaateakna alumise serva.
• cover: Faas, kus element on piisavalt suur, et katta täielikult vaateaken. See algab, kui elemendi ülemine serv jõuab vaateakna ülemise servani, ja lõpeb, kui elemendi alumine serv jõuab vaateakna alumise servani. Kui element on vaateaknast väiksem, siis seda faasi ei toimu kunagi.
• contain: Faas, kus element on täielikult vaateakna sees. See algab, kui elemendi alumine serv siseneb vaateakna alumisse serva, ja lõpeb, kui elemendi ülemine serv väljub vaateakna ülemisest servast. Kui element on vaateaknast suurem, siis seda faasi ei toimu kunagi.

Praktiline näide: klassikaline "ilmumine kerimisel" efekt

Loome uuesti ühe levinumaid kerimispõhiseid animatsioone: element, mis hajub ja libiseb vaatesse, kui see ekraanile ilmub. Traditsiooniliselt nõudis see JavaScriptis Intersection Observerit. Nüüd on see vaid mõni rida CSS-i.

            <!-- HTML -->
<section>
  <div class="content-box reveal">Box 1</div>
  <div class="content-box reveal">Box 2</div>
  <div class="content-box reveal">Box 3</div>
</section>

<!-- CSS -->
@keyframes fade-and-slide-in {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-and-slide-in linear both; /* 'both' is important! */
  animation-timeline: view();

  /* Start animation when element enters, end when it's halfway through entering */
  animation-range: entry 0% entry 50%;
}

            

              
                Copy
              
            
          

Analüüsime seda animation-range väärtust:

• animation-fill-mode: both; on ülioluline. See tagab, et enne animatsiooni aktiivset vahemikku püsib element oma from olekus (nähtamatu ja allapoole nihutatud) ning pärast vahemikku püsib see oma to olekus (täielikult nähtav ja paigas).
• entry 0%: Alguspunkt. See viitab entry faasi kõige algusele – täpsele hetkele, mil meie elemendi alumine osa puudutab vaateakna alumist osa.
• entry 50%: Lõpp-punkt. See viitab hetkele, mil element on läbinud 50% oma teekonnast läbi entry faasi. Selleks hetkeks on animatsioon 100% lõpule viidud.

See annab meeldiva efekti, kus element on täielikult nähtav ja oma lõplikus asendis juba ammu enne, kui kasutaja on selle ekraani keskele kerinud. Saate neid protsente kohandada, et saavutada täpselt soovitud tunnetus. Näiteks entry 25% entry 75% looks pikema animatsiooni.

Täpsem juhtimine: parallaksiefekti loomine

Proovime keerukamat efekti. Paneme taustapildi liikuma kerimisest erineva kiirusega, kuid ainult siis, kui selle konteiner katab vaateakent.

            <!-- HTML -->
<div class="parallax-container">
  <div class="parallax-bg"></div>
  <h2>Parallax Section</h2>
</div>

<!-- CSS -->
@keyframes parallax-shift {
  from { background-position: 50% -50px; }
  to   { background-position: 50% 50px; }
}

.parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  inset: -50px; /* Make it taller than container to allow movement */
  background-image: url('your-image.jpg');
  background-size: cover;

  animation: parallax-shift linear both;
  animation-timeline: view(block);
  /* Animate across the entire 'cover' phase */
  animation-range: cover 0% cover 100%; 
}

            

              
                Copy
              
            
          

Sel juhul on parallax-shift animatsioon seotud parallax-bg elemendi ajajoonega. animation-range on seatud kogu cover faasi kestusele. See tähendab, et animatsioon hakkab edenema alles siis, kui konteiner on piisavalt kõrge, et katta vaateaken ja on paigutatud nii, et selle ülemine serv on vaateakna ülemise serva juures. See lõpeb, kui konteineri alumine serv jõuab vaateakna alumise servani. Tulemuseks on sujuv, jõudluslik parallaksiefekt, mis on ideaalselt sünkroniseeritud kerimisasendiga.

Kõige kombineerimine: lühivormid ja parimad tavad

`animation` lühivorm

Süntaksi veelgi lühemaks muutmiseks saab ajajoone ja vahemiku omadused lisada otse animation lühivormi omadusse. See on uus, väljapakutud süntaks, mis kogub toetust.

Meie ilmumisefektiga näite saaks ümber kirjutada nii:

            .reveal {
  animation: fade-and-slide-in linear both view() entry 0% entry 50%;
}
            

              
                Copy
              
            
          

See üks rida asendab kolme eraldi omadust: animation, animation-timeline ja animation-range. See on puhas, tõhus ja hoiab kogu animatsiooniloogika ühes kohas.

Jõudlusega seotud kaalutlused

Kerimispõhiste animatsioonide peamine eelis on jõudlus. Selle eelise säilitamiseks peaksite eelistama animeerida omadusi, mida saab töödelda komposiitori lõimel. Need on peamiselt:

• transform (translate, scale, rotate)
• opacity

Omaduste nagu width, height, margin või color animeerimine töötab endiselt, kuid need võivad käivitada paigutuse ja renderdamise operatsioone, mis toimuvad põhilõimes. Kuigi need on sageli siiski sujuvamad kui JS-põhised alternatiivid, ei ole need nii jõudsad kui ainult komposiitoril põhinevad animatsioonid.

Ligipääsetavus ja varuvariandid

On ülioluline luua lahendusi kõikidele kasutajatele. Kerimispõhised animatsioonid on suurepärased, kuid mõned kasutajad peavad liikumist häirivaks või iiveldamaajavaks.

1. Austage kasutaja eelistusi: Mähi oma liikumisega seotud CSS alati prefers-reduced-motion meediapäringusse.

            @media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fade-and-slide-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}
            

              
                Copy
              
            
          

2. Pakkuge varuvariante vanematele brauseritele: Kuna tegemist on uue tehnoloogiaga, peate arvestama brauseritega, mis seda veel ei toeta. @supports reegel on siin teie parim sõber. Pakkuge lihtne, animeerimata vaikeolek ja seejärel täiustage seda toetavate brauserite jaoks.

            /* Default state for all browsers */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Enhancement for supporting browsers */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0; /* Set initial state for animation */
      transform: translateY(50px);
      animation: fade-and-slide-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

            

              
                Copy
              
            
          

Brauseri tugi ja tulevik

2023. aasta lõpu seisuga on CSS-i kerimispõhised animatsioonid toetatud Chrome'is ja Edge'is. Neid arendatakse aktiivselt Firefoxis ja kaalutakse Safaris. Nagu iga tipptasemel veebiplatvormi funktsiooni puhul, on oluline kontrollida uusimat teavet toe kohta ressurssidest nagu CanIUse.com.

Selle tehnoloogia kasutuselevõtt tähistab olulist nihet veebiarenduses. See annab disaineritele ja arendajatele võimaluse luua rikkalikke, interaktiivseid ja jõudsaid kogemusi deklaratiivselt, vähendades meie sõltuvust JavaScriptist terve klassi levinud kasutajaliidese mustrite puhul. Brauserite toe küpsedes võib oodata, et kerimispõhised animatsioonid muutuvad iga front-end arendaja tööriistakasti oluliseks tööriistaks.

Kokkuvõte

CSS-i kerimispõhised animatsioonid, ja eriti omadus animation-range, kujutavad endast monumentaalset hüpet edasi veebianimatsioonis. Oleme liikunud ajapõhistelt ajajoontelt edenemispõhistele ajajoontele, avades võimaluse luua keerukaid, kerimisele reageerivaid interaktsioone enneolematu jõudluse ja lihtsusega.

Oleme õppinud, et:

• animation-timeline seob animatsiooni scroll() või view() edenemise ajajoonega.
• animation-range annab meile täpse kontrolli, sidudes selle ajajoone konkreetse osa meie animatsiooni võtmekaadritega.
• view() ajajoonte puhul pakuvad võimsad nimelised vahemikud nagu entry, exit, cover ja contain intuitiivset viisi animatsioonide juhtimiseks elemendi nähtavuse põhjal.
• Jäädes komposiitorisõbralike omaduste juurde ja pakkudes varuvariante, saame seda tehnoloogiat täna kasutada, et luua ligipääsetavaid, jõudsaid ja meeldivaid kasutajakogemusi.

Päevad, mil tuli võidelda hakkivate, põhilõime blokeerivate kerimiskuulajatega lihtsate efektide nimel, on loetud. Kerimispõhise animatsiooni tulevik on siin, see on deklaratiivne ja see on kirjutatud CSS-is. On aeg hakata katsetama.