CSS kubinis Bezier generatorius

Cubic Bezier dokumentacija

Kas yra kubinė Bezier kreivė?

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 sintaksė

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

Įprasti naudojimo atvejai

Animuoti perėjimai:Kurkite sklandžią ypatybių keičiančių elementų animaciją.
Slinkties efektai:Valdykite slinkties animacijos greitį.
Interaktyvūs elementai:Apibrėžkite, kaip elementai reaguoja į vartotojo sąveikas, pvz., užveskite pelės žymeklį arba spustelėkite.
Judesio dizainas:Sukurkite sudėtingas judesių sekas vartotojo sąsajos elementams.

Populiarios palengvinimo funkcijos

Ease (default)

Pradeda lėtai, greitai įsibėgėja ir vėl sulėtėja.

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

Linear

Pastovus greitis nuo pradžios iki pabaigos.

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

Ease-in

Pradeda lėtai, tada įsibėgėja.

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

Ease-out

Pradeda greitai, tada lėtėja.

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

Patarimai, kaip kurti pasirinktines kreives

Laikykite x reikšmes nuo 0 iki 1:Reikšmės, esančios už šio diapazono ribų, gali sukelti netikėtą veikimą.
Vizualizuokite kreivę:Naudokite interaktyvią diagramą, kad suprastumėte, kaip pakeitimai veikia animaciją.
Testas su tikrais elementais:Visada peržiūrėkite savo kreivę naudodami tikrus vartotojo sąsajos komponentus, kad įsitikintumėte, jog ji atrodo tinkama.
Išsaugokite išankstinius nustatymus:Pažymėkite naudingas kreives būsimiems projektams.