Cubic-bezier szerkesztő

A cubic-bezier szerkesztő használata

1. Húzd a két fogantyút a grafikonon. A P1 (az első vezérlőpont) a mozgás elejét, a P2 a végét alakítja. Az idő balról jobbra, a haladás alulról felfelé telik.
2. Vagy írj be egy értéket a cubic-bezier() érték mezőbe: egy teljes cubic-bezier(0.4, 0, 0.2, 1) kifejezést, négy számot vagy egy kulcsszót, például ease-in-out-ot. Az x1, y1, x2 és y2 mezők egyenként egy koordinátát szerkesztenek.
3. Indulj az Előbeállítások menüből (CSS-kulcsszavak, a sine-tól a back-ig terjedő családok és a Material Design görbéi) vagy a kulcsszógombokból. Ha a görbéd megegyezik egy előbeállítással, a neve megjelenik a gombok mellett.
4. Figyeld az Animáció előnézete részt: A görbéd pontja és a linear pontja ugyanakkora távolságot tesz meg ugyanabban az Időtartamban. A Szünet/Lejátszás és az Újraindítás gombbal összehasonlíthatod őket.
5. Az eredményt a CSS időzítési függvény mezőből másolhatod, vagy másold ki a linear() közelítést, és válaszd ki a Szakaszok számát.

Billentyűzet: fókuszálj egy fogantyúra, és a nyílbillentyűkkel 0,01-del, Shifttel 0,1-del mozgathatod.

Ha a rendszered csökkentett mozgásra van állítva, az animáció szüneteltetve indul. Nyomd meg a Lejátszás gombot, ha mégis futtatni szeretnéd.

Mit jelent a cubic-bezier()?

A CSS easing függvény egy átmenet eltelt idejét (0-tól 1-ig) a haladásához (0-tól 1-ig) rendeli. A cubic-bezier(x1, y1, x2, y2) ezt a leképezést egy harmadfokú Bézier-görbével írja le, amely a (0, 0) pontból indul, az (1, 1) pontban végződik, és két vezérlőpont húzza: P1 = (x1, y1) és P2 = (x2, y2).

• Az x értékek idők, és 0 és 1 között kell maradniuk, különben a függvény nem lenne érvényes időzítési görbe. A szerkesztő tartományban tartja őket.
• Az y értékek a haladást jelentik, és 0 alá vagy 1 fölé mehetnek. Az 1 feletti y miatt az animáció túllő a célon, majd visszatér, mint a Back görbéknél; 0 alatt előbb visszafelé mozdul.
• A meredek lejtő gyors, a lapos lejtő lassú mozgást jelent. Az ease-out gyorsan indul és lassan ér véget, ami természetesnek hat a képernyőre belépő elemeknél. Az ease-in ennek az ellenkezője, és a távozó elemeknek megfelelő.

A CSS-kulcsszavak rövidítések: 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) és linear = (0, 0, 1, 1).

A linear() közelítés

Az újabb linear() függvény egyenletesen elosztott időpontokhoz sorolja fel a haladási értékeket, például linear(0, 0.25, 0.5, 0.75, 1), és egyenes szakaszokkal köti össze őket. Az eszköz mintát vesz a görbédből (minden időlépésre megoldja a Bézier-egyenletet), és az értékeket három tizedesjeggyel írja ki. 20–40 szakasszal az eredmény vizuálisan azonos a görbével. A linear() valódi haszna azoknál a görbéknél van, amelyeket egy Bézier nem tud megrajzolni, például a pattogásnál és a rugózásnál, de egyetlen szintaxis megosztását is lehetővé teszi. Chrome-ban és Edge-ben 113-tól, Firefoxban 112-től és Safariban 17.2-től működik, ezért tartsd meg tartaléknak a cubic-bezier() értéket.