CSS-i vaateülemineku animatsioonikõver: kohandatud ülemineku ajastuse valdamine

CSS-i vaateüleminekud (View Transitions) pakuvad võimsat ja elegantset viisi oma veebirakenduste kasutajakogemuse parandamiseks. Need võimaldavad teil luua sujuvaid ja visuaalselt meeldivaid üleminekuid veebisaidi eri olekute vahel, muutes navigeerimise ja andmete värskendamise voolavamaks ja kaasahaaravaks. Kuigi vaikeüleminekud on suurepärane alguspunkt, avab kohandatud animatsioonikõverate valdamine täiesti uue loomingulise kontrolli taseme, võimaldades teil luua unikaalseid ja meeldejäävaid kasutajainteraktsioone.

CSS-i vaateüleminekute mõistmine

Enne kohandatud animatsioonikõveratesse süvenemist vaatame lühidalt üle CSS-i vaateüleminekute põhitõed. Vaateüleminekud toimivad, jäädvustades hetktõmmised lehe praegusest olekust ("vana vaade") ja uuest olekust ("uus vaade") ning seejärel animeerides nende hetktõmmiste vahel. See loob sujuva ülemineku illusiooni, isegi kui aluseks olev DOM-i struktuur muutub.

Siin on põhiline näide, kuidas vaateüleminekuid JavaScriptis lubada:

            document.startViewTransition(() => {
  // Värskenda DOM uuele vaatele
  updateDOM();
});
            

              
                Copy
              
            
          

Funktsioon document.startViewTransition() ümbritseb koodi, mis muudab DOM-i. Brauser tegeleb hetktõmmiste tegemise ja animatsiooniga automaatselt.

Animatsioonikõverate olulisus

Animatsioonikõver, tuntud ka kui leevendusfunktsioon (easing function), määrab animatsiooni muutumiskiiruse aja jooksul. See dikteerib, kui sujuvalt animatsioon algab, kiireneb, aeglustub ja lõpeb. Erinevad animatsioonikõverad võivad tekitada erinevaid tundeid ja luua eristuvaid visuaalseid efekte.

Näiteks lineaarsel animatsioonikõveral on kogu animatsiooni vältel konstantne kiirus. See võib tunduda mõnevõrra robotlik ja ebaloomulik. Leevendusfunktsioonid seevastu lisavad mittelineaarsust, muutes animatsioonid voolavamaks ja orgaanilisemaks.

Õige animatsioonikõvera valimine on lihvitud ja kaasahaarava kasutajakogemuse loomiseks ülioluline. Hästi valitud kõver võib peenelt suunata kasutaja pilku, rõhutada olulisi elemente ning muuta interaktsioonid tundlikumaks ja rahuldustpakkuvamaks.

CSS-i vaikeanimatsioonikõverad

CSS pakub mitmeid sisseehitatud animatsioonikõveraid, mida saate kasutada vaateüleminekute (ja muude CSS-animatsioonide) puhul:

• linear: konstantne kiirus algusest lõpuni.
• ease: vaikimisi leevendusfunktsioon, mis algab aeglaselt, kiireneb keskel ja aeglustub lõpu poole.
• ease-in: algab aeglaselt ja seejärel kiireneb.
• ease-out: algab kiiresti ja seejärel aeglustub.
• ease-in-out: algab aeglaselt, kiireneb keskel ja aeglustub lõpu poole (sarnane ease-ile, kuid sageli rohkem väljendunud).

Saate neid leevendusfunktsioone rakendada oma vaateüleminekutele, kasutades view-transition-name atribuuti ja CSS-i atribuuti animation-timing-function.

Näide:

            /* CSS */
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

            

              
                Copy
              
            
          

See koodilõik seab kõigi vaateüleminekute kestuseks 0,5 sekundit ja kasutab ease-in-out leevendusfunktsiooni.

Kohandatud ülemineku ajastuse avamine: funktsioon cubic-bezier()

Kuigi vaikimisi leevendusfunktsioonid on kasulikud, ei pruugi need alati pakkuda täpset kontrolli, mida soovitud visuaalse efekti saavutamiseks vajate. Siin tulebki appi funktsioon cubic-bezier().

Funktsioon cubic-bezier() võimaldab teil määratleda kohandatud animatsioonikõvera nelja kontrollpunkti abil. Need kontrollpunktid määravad kõvera kuju ja seega ka animatsiooni kiiruse ja kiirenduse.

cubic-bezier() süntaks on:

            cubic-bezier(x1, y1, x2, y2)
            

              
                Copy
              
            
          

kus x1, y1, x2 ja y2 on numbrid vahemikus 0 kuni 1, mis tähistavad kahe kontrollpunkti koordinaate. Kõvera alguspunkt on alati (0, 0) ja lõpp-punkt on alati (1, 1).

Cubic Bezier' kontrollpunktide mõistmine

Cubic Bezier' kõvera visualiseerimine aitab mõista iga kontrollpunkti mõju. Kujutage ette graafikut, kus x-telg tähistab aega (0 kuni 1) ja y-telg animatsiooni edenemist (0 kuni 1). Kõver algab all vasakul (0,0) ja lõpeb üleval paremal (1,1).

• (x1, y1): see kontrollpunkt mõjutab animatsiooni algust. Suurem y1 väärtus annab kiirema algkiiruse.
• (x2, y2): see kontrollpunkt mõjutab animatsiooni lõppu. Madalam y2 väärtus annab aeglasema lõppkiiruse.

Nende kontrollpunktidega manipuleerides saate luua laia valiku kohandatud animatsioonikõveraid.

Praktilised näited kohandatud animatsioonikõveratest

Uurime mõningaid praktilisi näiteid kohandatud animatsioonikõveratest ja sellest, kuidas neid saab vaateüleminekute täiustamiseks kasutada.

Näide 1: Peen põrkav efekt

Peene põrkava efekti loomiseks saate kasutada Cubic Bezier' kõverat, mis ületab sihtväärtuse veidi enne oma kohale asumist.

            cubic-bezier(0.175, 0.885, 0.32, 1.275)
            

              
                Copy
              
            
          

See kõver algab kiiresti, ületab sihtmärgi ja põrkab seejärel tagasi lõppväärtusele, luues mängulise ja kaasahaarava efekti. See võib olla eriti tõhus laadimisindikaatorite või peene kasutajaliidese tagasiside jaoks.

Näide 2: Särtsakas üleminek

Särtsaka ja tundliku ülemineku jaoks saate kasutada kõverat, mis algab kiiresti ja peatub seejärel järsult.

            cubic-bezier(0.0, 0.0, 0.2, 1)
            

              
                Copy
              
            
          

See kõver on kasulik üleminekute jaoks, kus soovite, et uus vaade ilmuks peaaegu koheselt, ilma pika sisse- või sisselibistamise animatsioonita. Kaaluge seda üheleheküljelise rakenduse erinevate jaotiste vaheliste üleminekute jaoks.

Näide 3: Sujuv ja õrn sissehajumine

Sujuva ja õrna sissehajumise efekti loomiseks saate kasutada kõverat, mis algab aeglaselt ja seejärel kiireneb järk-järgult.

            cubic-bezier(0.4, 0.0, 1, 1)
            

              
                Copy
              
            
          

See kõver sobib ideaalselt üleminekuteks, kus soovite, et uus vaade ilmuks järk-järgult ja peenelt, ilma et see oleks liiga järsk või häiriv. See sobib hästi piltide või sisu jaoks, mis peab kasutaja tähelepanu köitma, olemata liiga agressiivne.

Näide 4: Material Design'ist inspireeritud liikumiskõver

Material Design'ist tuntud iseloomuliku "ease-in-out-cubic" ajastusfunktsiooni jäljendamiseks saate kasutada seda kõverat:

            cubic-bezier(0.4, 0.0, 0.2, 1)
            

              
                Copy
              
            
          

See kõver pakub sujuvat, kuid otsustavat üleminekustiili, mida eelistavad paljud kaasaegsed kasutajaliidese disainid. See pakub tasakaalu kiiruse ja voolavuse vahel.

Tööriistad kohandatud animatsioonikõverate visualiseerimiseks ja loomiseks

Kohandatud animatsioonikõverate käsitsi loomine võib olla keeruline, eriti keerukate efektide puhul. Õnneks on mitmeid veebitööriistu, mis aitavad teil kohandatud kõveraid visualiseerida ja luua:

• cubic-bezier.com: lihtne ja intuitiivne tööriist, mis võimaldab teil visuaalselt manipuleerida Cubic Bezier' kõvera kontrollpunkte ja näha tulemust reaalajas.
• Easings.net: kogumik valmis leevendusfunktsioone, sealhulgas palju kohandatud kõveraid, mida saate oma CSS-i kopeerida ja kleepida.
• GreenSock (GSAP) Ease Visualizer: täpsem tööriist, mis võimaldab teil luua ja kohandada laia valikut leevendusfunktsioone, sealhulgas Cubic Bezier' kõveraid ja ka keerukamaid leevendustüüpe.

Need tööriistad muudavad erinevate animatsioonikõveratega katsetamise ja oma vaateüleminekute jaoks ideaalse ajastuse leidmise palju lihtsamaks.

Kohandatud animatsioonikõverate integreerimine oma vaateüleminekutesse

Oma kohandatud animatsioonikõverate integreerimiseks vaateüleminekutesse peate rakendama atribuudi animation-timing-function pseudoelementidele ::view-transition-old(*) ja ::view-transition-new(*).

Siin on näide:

            /* CSS */
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Peen põrkav efekt */
}

            

              
                Copy
              
            
          

See koodilõik seab kõigi vaateüleminekute kestuseks 0,8 sekundit ja kasutab peene põrkava efekti loomiseks kohandatud Cubic Bezier' kõverat.

Samuti saate rakendada erinevaid animatsioonikõveraid erinevatele elementidele oma vaateüleminekutes. Näiteks võite soovida kasutada kiiremat kõverat horisontaalselt liikuvate elementide jaoks ja aeglasemat kõverat sisse või välja hajuvate elementide jaoks.

Selleks saate kasutada atribuuti view-transition-name, et sihtida konkreetseid elemente ja rakendada neile erinevaid animatsioonikõveraid.

Näide:

            /* CSS */
.item {
  view-transition-name: item-transition;
}

::view-transition-old(item-transition),
::view-transition-new(item-transition) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

.title {
  view-transition-name: title-transition;
}

::view-transition-old(title-transition),
::view-transition-new(title-transition) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); /* Särtsakas üleminek */
}

            

              
                Copy
              
            
          

Selles näites kasutavad klassiga item elemendid ease-in-out leevendusfunktsiooni, samas kui klassiga title elemendid kasutavad särtsakat cubic-bezier(0.0, 0.0, 0.2, 1) kõverat.

Jõudlusega seotud kaalutlused

Kuigi vaateüleminekud võivad kasutajakogemust oluliselt parandada, on oluline olla teadlik jõudlusest. Keerulised animatsioonid ja suured pildid võivad jõudlust mõjutada, eriti vähem võimsatel seadmetel.

Siin on mõned näpunäited vaateüleminekute jõudluse optimeerimiseks:

• Hoidke animatsioonid lühikesed ja lihtsad: vältige liiga pikki või keerukaid animatsioone, kuna need võivad tarbida rohkem protsessorivõimsust.
• Optimeerige pilte: kasutage optimeeritud pilte sobivate suuruste ja vormingutega, et vähendada laadimisaegu.
• Kasutage riistvaralist kiirendust: veenduge, et teie animatsioonid kasutavad riistvaralist kiirendust, kasutades atribuute transform ja opacity. Need atribuudid on üldiselt jõudsamad kui selliste atribuutide animeerimine nagu top, left, width või height.
• Testige erinevatel seadmetel: testige oma vaateüleminekuid erinevatel seadmetel, et tagada nende sujuv toimimine erinevatel platvormidel ja ekraanisuurustel.
• Kasutage prefers-reduced-motion meediapäringut: austage kasutajate eelistusi vähendatud liikumise osas. Mõnedel kasutajatel võib olla liikumistundlikkus ja oluline on pakkuda võimalust animatsioonide keelamiseks või vähendamiseks.

Näide prefers-reduced-motion kasutamisest:

            @media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
            

              
                Copy
              
            
          

Juurdepääsetavusega seotud kaalutlused

Vaateüleminekute rakendamisel on ülioluline arvestada ka juurdepääsetavusega. Mõnedel kasutajatel võib olla nägemispuue või kognitiivseid häireid, mis võivad muuta animatsioonid segadust tekitavaks või häirivaks.

Siin on mõned näpunäited vaateüleminekute juurdepääsetavaks muutmiseks:

• Pakkuge võimalust animatsioonide keelamiseks: lubage kasutajatel animatsioonid keelata, kui need on nende jaoks häirivad või üle jõu käivad. Meediapäring prefers-reduced-motion on hea alguspunkt.
• Kasutage peeneid ja tähendusrikkaid animatsioone: vältige liigseid või toretsevaid animatsioone, mis võivad olla üle jõu käivad või segadust tekitavad. Keskenduge peente animatsioonide kasutamisele, mis parandavad kasutajakogemust, olemata häirivad.
• Tagage piisav kontrast: veenduge, et esi- ja tagaplaani elementide vahel oleks piisav kontrast, et animatsioonid oleksid nähtavad ka nägemispuudega kasutajatele.
• Pakkuge alternatiivset sisu: kui animatsioonid on teabe edastamiseks hädavajalikud, pakkuge alternatiivset sisu, mis on juurdepääsetav kasutajatele, kes ei saa animatsioone näha ega nendega suhelda.

Brauseri ühilduvus

CSS-i vaateüleminekud on suhteliselt uus funktsioon ja brauseri ühilduvus areneb endiselt. 2024. aasta lõpu seisuga on vaateüleminekud laialdaselt toetatud Chromiumi-põhistes brauserites (Chrome, Edge, Opera) ja on arendamisel teistes brauserites nagu Firefox ja Safari. Enne vaateüleminekute tootmisesse viimist kontrollige alati uusimaid brauseri ühilduvuse tabeleid saitidel nagu "Can I use...".

Põhiüleminekutest edasi: täiustatud tehnikad

Kui olete vaateüleminekute ja kohandatud animatsioonikõverate põhitõed selgeks saanud, saate uurida täiustatud tehnikaid, et luua veelgi köitvamaid ja kaasahaaravamaid kasutajakogemusi.

• Jagatud elementide üleminekud: animeerige üksikuid elemente, mis on ühised vanale ja uuele vaatele. See loob järjepidevuse tunde ja aitab kasutajatel mõista, kuidas sisu muutub.
• Järjestikused animatsioonid: animeerige mitut elementi järjest, luues kaskaadi- või lainelise efekti. Seda saab kasutada tähelepanu juhtimiseks konkreetsetele elementidele või sügavuse ja mõõtmete tunde loomiseks.
• Morfeeruvad animatsioonid: muutke üks kuju teiseks, luues visuaalselt vapustava ja kaasahaarava efekti. Seda saab kasutada ikoonide, logode või muude graafiliste elementide animeerimiseks.
• Integreerimine JavaScripti animatsiooniteekidega: kombineerige vaateüleminekuid võimsate JavaScripti animatsiooniteekidega nagu GreenSock (GSAP) või Anime.js, et luua veelgi keerukamaid ja viimistletumaid animatsioone.

Rahvusvahelistamise ja lokaliseerimise kaalutlused

Globaalsele publikule vaateüleminekuid kujundades arvestage järgmiste rahvusvahelistamise ja lokaliseerimise (i18n ja l10n) aspektidega:

• Teksti suund: veenduge, et teie üleminekud töötaksid korrektselt nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) tekstisuundadega. Näiteks võib libisevaid üleminekuid olla vaja RTL-keeltes peegeldada.
• Kultuuriline tundlikkus: olge teadlik teatud värvide, sümbolite ja animatsioonistiilidega seotud kultuurilistest konnotatsioonidest. Uurige ja kohandage oma disainilahendusi, et vältida tahtmatut solvamist.
• Animatsiooni kiirus: animatsioonikiirused, mis tunduvad ühes kultuuris loomulikud, võivad teises tunduda liiga kiired või liiga aeglased. Kaaluge kasutajatele võimaluste pakkumist animatsioonikiiruste reguleerimiseks vastavalt nende eelistustele.
• Sisu laienemine: lokaliseeritud tekst võib sageli olla pikem või lühem kui originaaltekst. Teie üleminekud peaksid olema kavandatud nii, et need mahutaksid erineva pikkusega teksti ilma paigutust või visuaalset voogu rikkumata.

Kokkuvõte

CSS-i vaateüleminekud koos kohandatud animatsioonikõveratega pakuvad võimsat tööriistakomplekti kaasahaaravate, lihvitud ja kasutajasõbralike veebikogemuste loomiseks. Mõistes animatsiooni ajastuse põhimõtteid ja katsetades erinevate Cubic Bezier' kõveratega, saate avada uue loomingulise kontrolli taseme ja luua tõeliselt meeldejäävaid kasutajainteraktsioone.

Pidage meeles, et vaateüleminekute rakendamisel tuleb esikohale seada jõudlus ja juurdepääsetavus ning arvestada oma globaalse publiku vajadustega. Hoolika planeerimise ja teostusega võivad vaateüleminekud oluliselt parandada teie veebirakenduste kasutatavust ja atraktiivsust.

Niisiis, süvenege, katsetage erinevate kõveratega ja avastage kohandatud ülemineku ajastuse võimsus! Teie kasutajad tänavad teid selle eest.

Lisalugemist

• Chrome'i arendajad: Vaateüleminekud
• CSS vaateüleminekute moodul, tase 1
• Smashing Magazine: Sissejuhatus CSS vaateüleminekute API-sse