CSS:n kuutio-bezier-generaattori

Cubic Bezierin dokumentaatio

Mikä on kuutiometrinen Bezier-käyrä?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS-syntaksi

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Yleiset käyttötapaukset

Animoidut siirtymät:Luo sulavia animaatioita elementeille,
Vieritystehosteet:Säädä vieritysanimaatioiden nopeutta.
Interaktiiviset elementit:miten elementit reagoivat käyttäjän vuorovaikutukseen, kuten hiiren osoittimeen tai napsauttamiseen.
Liikesuunnittelu:Luo monimutkaisia liikesarjoja käyttöliittymäelementeille.

Suositut kevennystoiminnot

Ease (default)

Käynnistyy hitaasti, kiihtyy nopeasti ja hidastuu sitten uudelleen.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Tasainen nopeus alusta loppuun.

cubic-bezier(0, 0, 1, 1)

Ease-in

Käynnistyy hitaasti, sitten kiihtyy.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Lähtee liikkeelle nopeasti, hidastaa sitten.

cubic-bezier(0, 0, 0.58, 1)

Vinkkejä mukautettujen käyrien luomiseen Pidä

x-arvot välillä 0–1:Tämän alueen ulkopuolella olevat arvot voivat aiheuttaa odottamatonta toimintaa.
Visualisoi käyrä:Käytä interaktiivista kaaviota ymmärtääksesi, miten muutokset vaikuttavat animaatioon.
Testaa todellisilla elementeillä:Esikatsele käyrääsi aina todellisilla käyttöliittymäkomponenteilla varmistaaksesi,
Tallenna esiasetukset:Lisää hyödyllisiä käyriä kirjanmerkkeihin tulevia projekteja varten.