CSS Cubic Bezier -generaattori

CSS-kevennyskäyrien toiminta ja cubic-bezier-funktion perusteet

CSS-siirtymissä (transitions) ja -animaatioissa (animations) käytetään ajoitustoimintoja määrittämään, miten animaation nopeus muuttuu sen keston aikana. CSS-kevennyskäyrä (easing curve) kuvaa tätä nopeuden ja edistymisen suhdetta. Käyrä kulkee alavasemmasta kulmasta, joka edustaa animaation alkua, yläoikeaan kulmaan, joka edustaa animaation loppua. Tässä koordinaatistossa aika etenee vasemmalta oikealle, ja animaation edistyminen nousee pystysuunnassa alhaalta ylöspäin.

Matemaattisesti nämä käyrät määritellään kuutiollisina Bezier-käyrinä (cubic Bezier curve). Käyrän muotoa hallitaan kahdella ohjauspisteellä, joista kumpikin vaikuttaa siihen, miten voimakkaasti ja mihin suuntaan käyrä taipuu suorasta linjasta. CSS-koodissa tämä ilmaistaan funktiolla cubic-bezier(x1, y1, x2, y2), jossa x1 ja y1 ovat ensimmäisen ohjauspisteen koordinaatit, ja x2 ja y2 ovat toisen ohjauspisteen koordinaatit.

Ohjauspisteiden koordinaatit ja raja-arvot

CSS-määrittely asettaa tarkat säännöt sille, millaisia arvoja ohjauspisteet voivat saada:

• Aika-akseli (X-koordinaatit): Ensimmäisen ohjauspisteen X-arvon ja toisen ohjauspisteen X-arvon on aina oltava välillä 0 ja 1. Aika ei voi kulkea taaksepäin eikä ylittää animaation kokonaiskestoa, joten arvoalue on rajoitettu välille 0–1.
• Edistymisakseli (Y-koordinaatit): Ensimmäisen ja toisen ohjauspisteen Y-arvot voivat puolestaan ylittää animaation normaalin alun (0) ja lopun (1) rajat. Y-koordinaattien sallittu arvoalue on -0.70–1.70. Tämä mahdollistaa sen, että animaatio voi edetä hetkellisesti negatiiviseen suuntaan tai ylittää päätepisteensä ennen asettumistaan lopulliseen tilaansa.

Jos syötät työkalun numeerisiin kenttiin sallitun alueen ulkopuolisia arvoja, ne korjataan automaattisesti. Esimerkiksi arvon 9 syöttäminen kenttään "Ensimmäinen ohjauspiste" muuttuu arvoksi 1, kun kohdistus siirretään pois kentästä. Jos tyhjennät numeerisen syöttökentän kokonaan ja siirrät kohdistuksen pois, kenttään palautetaan automaattisesti edellinen voimassa ollut arvo. Työkalu odottaa täydellistä numeerista arvoa, jos kenttä jätetään tyhjäksi tai siihen syötetään muita kuin numeroita.

Työkalun käyttöliittymä ja säätimet

CSS Cubic Bezier -generaattori tarjoaa visuaalisen tavan muotoilla kevennyskäyrää. Työkalun käyttöliittymä koostuu seuraavista toiminnoista ja elementeistä:

• Kahvojen vetäminen: Voit muotoilla käyrää vetämällä kahta ohjauspistettä suoraan kuvaajassa. Kun ohjauspisteen kahva on aktiivisena, voit muuttaa sen arvoa myös näppäimistöllä painamalla vasenta nuolinäppäintä, jolloin arvo muuttuu esimerkiksi lukemaan 0.99.
• Numeeriset syötteet: Voit asettaa tarkat koordinaatit ohjauspisteille syöttämällä arvot kenttiin "Ensimmäinen ohjauspiste" ja "Toinen ohjauspiste".
• Esiasetukset: Voit valita valmiita käyriä esiasetusten listasta. Valittavissa ovat perinteiset CSS-avainsanat "ease", "ease-in", "ease-out" ja "ease-in-out" sekä erikoistehosteet "Back In", "Back Out" ja "Back In-Out". Esimerkiksi "Back Out" -esiasetus asettaa ohjauspisteet arvoihin cubic-bezier(0.34, 1.56, 0.64, 1).
• Visuaalinen esikatselu: Työkalu näyttää kuvaajan nimellä "oma käyräsi". Esikatselussa yksi piste liikkuu luomaasi käyrää pitkin, ja sen vieressä toinen piste liikkuu tasaisella, lineaarisella nopeudella. Tämä tekee nopeuserojen havaitsemisesta helppoa.
• Arvon kopiointi: Kun käyrä on valmis, voit kopioida valmiin cubic-bezier(x1, y1, x2, y2) -funktion arvon. Onnistuneen kopioinnin jälkeen käyttöliittymässä näytetään tila, joka ilmaisee arvon tulleen kopioiduksi. Kopiointitoiminnolla on vain onnistumisen ilmaiseva tila, eikä se näytä erillisiä virheilmoituksia.

Tehosteet ja siirtymien hallinta

Säätämällä ohjauspisteiden Y-koordinaatteja nollan alapuolelle tai ykkösen yläpuolelle voidaan luoda dynaamisia fysiikkapohjaisia tehosteita:

1. Ennakointi (Pull-back / Anticipation): Kun ensimmäisen ohjauspisteen Y-arvo säädetään negatiiviseksi (alle 0), animaation kohde liikkuu aluksi hieman vastakkaiseen suuntaan ennen kuin se kiihtyy varsinaiseen kulkusuuntaansa. Tämä luo vaikutelman vauhdin ottamisesta.
2. Ylitys (Overshoot): Kun toisen ohjauspisteen Y-arvo säädetään suuremmaksi kuin 1, animaation kohde liikkuu loppupisteensä yli, kunnes se palautuu takaisin ja asettuu tarkasti määrättyyn lopputilaansa.

Vaikka kuutiolliset Bezier-käyrät ovat monikäyttöisiä, niillä on matemaattisia rajoituksia. Yhdellä cubic-bezier()-funktiolla voidaan luoda ennakointi ja ylitys, mutta se voi liikkua vain kerran kumpaankin suuntaan ja asettua sen jälkeen. Sillä ei ole mahdollista toteuttaa sellaisia monimutkaisia tehosteita, jotka vaihtavat suuntaa useita kertoja peräkkäin, kuten useasti pomppivaa (bounce) tai joustavaa (elastic) liikettä.

Tietosuoja ja tekniset tiedot

Kaikki käyrän piirtämiseen ja arvojen laskentaan liittyvä toiminta tapahtuu suoraan käyttäjän verkkoselaimessa. Mitään työkaluun syötettyjä koordinaatteja, asetuksia tai luotuja käyriä ei lähetetä BroBroGo-palvelimelle.

---

Usein kysytyt kysymykset

Mitä kaksi kahvaa ja neljä numeroa tarkoittavat?

Käyrä kulkee alavasemmasta (alku) yläoikeaan (loppu), jossa aika kulkee vasemmalta oikealle ja edistyminen pystysuunnassa ylöspäin. Kaksi kahvaa ovat ohjauspisteitä, jotka taivuttavat sitä – kummallakin on X- ja Y-koordinaatit, joten yhdessä ne muodostavat cubic-bezier(x1, y1, x2, y2). X pysyy välillä 0 ja 1, kun taas Y voi mennä yläreunan yli tai alareunan alle luoden ylityksen tai vetäytymisen ennen asettumista.

Miten käytän arvoa CSS-koodissani?

Kopioi cubic-bezier() ja sijoita se minne tahansa, missä käytetään ajoitustoimintoa – transition-timing-function, animation-timing-function tai lyhennemuoto, esim. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Avainsanat ease, ease-in, ease-out ja ease-in-out ovat vain kiinteitä cubic-bezier-käyriä, joten jonkin näistä esiasetuksista valitseminen näyttää tarkan arvon avainsanan takana.

Voiko sillä tehdä pomppivan tai joustavan tehosteen?

Ei sellaisenaan. Yksittäinen cubic-bezier voi ennakoida ja ylittää rajan – "back"-esiasetukset vetävät yhtä kahvaa laatikon ulkopuolelle juuri tämän tekemiseksi – mutta se voi liikkua vain yhteen suuntaan ja sitten asettua. Pomppivat (bounce) ja joustavat (elastic) tehosteet vaihtavat suuntaa useita kertoja, mitä yksittäinen cubic-bezier ei pysty ilmaisemaan; niihin tarvitaan CSS-keyframeja tai linear()-funktiota useilla pisteillä.