Cubic-Bezier Editor

Paano gamitin ang cubic-bezier editor

1. I-drag ang dalawang handle sa graph. Ang P1 (unang control point) ang humuhubog sa simula ng galaw, ang P2 sa dulo. Ang oras ay mula kaliwa pakanan at ang progreso ay mula ibaba pataas.
2. O mag-type ng halaga sa Halaga ng cubic-bezier(): buong cubic-bezier(0.4, 0, 0.2, 1), apat na numero, o keyword gaya ng ease-in-out. Ang mga field na x1, y1, x2 at y2 ay nag-e-edit ng isang coordinate bawat beses.
3. Magsimula sa menu ng Mga preset (mga CSS keyword, ang mga pamilyang sine hanggang back, at mga kurba ng Material Design) o sa mga keyword button. Kapag tumugma ang kurba mo sa isang preset, ipinapakita ang pangalan nito sa tabi ng mga button.
4. Panoorin ang Preview ng animation: ang tuldok sa Ang iyong kurba at ang tuldok sa linear ay naglalakbay ng parehong distansya sa parehong Tagal. Gamitin ang Pause/Play at I-restart para ihambing ang mga ito.
5. Kopyahin ang resulta mula sa CSS timing function, o kopyahin ang Approximation na linear() at piliin ang bilang ng Mga segment nito.

Keyboard: i-focus ang handle at gamitin ang mga arrow key para ilipat ito nang 0.01, o 0.1 kapag may Shift.

Kung nakatakda ang iyong system na bawasan ang galaw, nagsisimulang naka-pause ang animation. Pindutin ang Play kung gusto mo itong patakbuhin pa rin.

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Ano ang ibig sabihin ng cubic-bezier()

Itinutugma ng CSS easing function ang lumipas na oras ng isang transition (0 hanggang 1) sa progreso nito (0 hanggang 1). Inilalarawan ng cubic-bezier(x1, y1, x2, y2) ang pagtutugmang ito gamit ang cubic Bézier na kurba na nagsisimula sa (0, 0), nagtatapos sa (1, 1) at hinihila ng dalawang control point, P1 = (x1, y1) at P2 = (x2, y2).

• Ang mga x na halaga ay oras at dapat manatili sa pagitan ng 0 at 1, kung hindi ay hindi ito magiging balidong timing curve. Pinapanatili sila ng editor sa saklaw.
• Ang mga y na halaga ay progreso at puwedeng bumaba sa 0 o lumampas sa 1. Ang y na higit sa 1 ay nagpapalampas sa animation sa target nito at bumabalik, gaya ng mga kurba ng Back; kapag mas mababa sa 0, umuurong muna ito.
• Ang matarik na slope ay mabilis na galaw, ang patag na slope ay mabagal. Ang ease-out ay nagsisimulang mabilis at nagtatapos nang mabagal, na natural ang pakiramdam para sa mga element na pumapasok sa screen. Ang ease-in ay kabaligtaran at bagay sa mga element na umaalis.

Mga shortcut ang mga CSS keyword: ang ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) at linear = (0, 0, 1, 1).

Ang approximation na linear()

Inililista ng mas bagong function na linear() ang mga halaga ng progreso sa pantay na pagitan ng oras, halimbawa linear(0, 0.25, 0.5, 0.75, 1), at pinagdurugtong ang mga ito ng tuwid na linya. Sina-sample ng tool ang iyong kurba (nilulutas ang Bézier sa bawat hakbang ng oras) at isinusulat ang mga halagang iyon na may tatlong decimal. Sa 20 hanggang 40 segment, kapareho na ng kurba ang itsura ng resulta. Ang tunay na pakinabang ng linear() ay para sa mga kurbang hindi kayang iguhit ng Bézier, gaya ng bounce at spring, pero nagbibigay din ito ng iisang syntax na maibabahagi. Gumagana ito sa Chrome at Edge 113+, Firefox 112+ at Safari 17.2+, kaya panatilihin ang halagang cubic-bezier() bilang fallback.