Generator kubičnih Bezierovih krivulj CSS

Dokumentacija kubičnih Bezierjevih matrik

Kaj je kubična Bezierjeva krivulja?

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.

Sintaksa CSS-ja

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

Pogosti primeri uporabe

Animirani prehodi:Ustvarite gladke animacije za elemente, ki spreminjajo lastnosti.
Učinki pomikanja:Nadzorujte hitrost animacij drsenja.
Interaktivni elementi:Določite, kako se elementi odzivajo na uporabniške interakcije, kot sta pomik miške ali klik.
Oblikovanje gibanja:Ustvarite kompleksna zaporedja gibanja za elemente uporabniškega vmesnika.

Priljubljene funkcije popuščanja

Ease (default)

Začne se počasi, hitro pospeši in nato spet upočasni.

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

Linear

Konstantna hitrost od začetka do konca.

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

Ease-in

Začne se počasi, nato pospeši.

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

Ease-out

Začne se hitro, nato pa upočasni.

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

Nasveti za ustvarjanje krivulj po meri

Vrednosti x naj bodo med 0 in 1:Vrednosti zunaj tega območja lahko povzročijo nepričakovano vedenje.
Vizualizirajte krivuljo:S pomočjo interaktivnega grafa lahko razumete, kako spremembe vplivajo na animacijo.
Preizkus z resničnimi elementi:Vedno si predoglejte krivuljo z dejanskimi komponentami uporabniškega vmesnika, da se prepričate, da se zdi pravilna.
Shrani prednastavitve:Dodajte uporabne krivulje med zaznamke za prihodnje projekte.