Cubic-bezier szerkesztő

Cubic-bezier szerkesztő – funkciók

• 01

  Húzza az görbét, lássa az mozgást

  Az két húzható kezelő vezérli az bezier kezdetét és végét. Az kísérő labda animáció az görbét játszik vissza az kiválasztott időtartammal, így az overshoot és ease-out érzet előnézetét tekintheti meg az oldal elhagyása nélkül.

• 02

  Az összes standard előbeállítás

  Kezdje az CSS beépített ease, linear, ease-in, ease-out, és ease-in-out értékekből — majd finomhangoljon. Az előbeállítás visszavált az "custom"-ra automatikusan amikor az kezelőt mozgat.

• 03

  Másolja az CSS-t az egy kattintásra

  Az cubic-bezier() érték valós időben frissül az két tizedes pontossággal, készen az transition-timing-function vagy animation-timing-function értékbe való beillesztésre.

Cubic-bezier szerkesztő – GYIK

Miért mehet az Y értékek 1 feletti vagy 0 alatti?

Az Bezier kontrollpont az 0–1 tartományon kívül overshoot és undershoot effektusokat termel — az görbe az végpontnál továbbmegy az lezárás előtt. Ez az hogyan készülnek az "rugalmas" easing görbék; az X tengely továbbra is az 0–1-ben kell maradnia.

Hogyan használom az kimenetet?

Másolja az cubic-bezier(...) stringet és illessze be az bármilyen CSS transition-timing-function vagy animation-timing-function értékbe. Minden modern böngészőben működik.

Az előnézet pontos az ahogy az CSS csinálja?

Igen — az előnézet animálja az labdát 0-ról 100%-ra ugyanaz az cubic bezier formula használatával, amelyet a böngészők az transitions-hez használnak. Az időtartam csúszka lehetővé teszi az lassú versus gyors görbék érzékeltetét az elköteleződés előtt.

Mit jelent az ease-in-out?

Az ease-in-out lassan kezd, felgyorsul a közepén és ismét lelassul az végén — az cubic-bezier(0.42, 0, 0.58, 1) görbe. Ez az alapértelmezett legtöbb csiszolt UI mozgáshoz, mert tükrözi az hogyan a valódi fizikai objektumok gyorsulnak és lassulnak.