Cubic Bezier generátor

A cubic-bezier(x1, y1, x2, y2) kézzel történő beírása és az oldal újratöltése az érzés ellenőrzéséhez lassú módja az animáció hangolásának. Ez a generátor lezárja ezt a hurkot: húzza a vezérlőpont fogantyúját a görbére, vagy írjon be pontos számokat az x1/y1/x2/y2 mezőkbe, és a görbe, a másolható CSS-karakterlánc és az élő animáció előnézete minden változtatáskor frissül – nincs összeállítási lépés, nincs újratöltés.

A két tengely szándékosan eltérően működik. x1 és x2 0 és 1 között marad, mert a CSS specifikáció valójában ezt követeli meg a cubic-bezier() időzítési függvénytől – az ezen a tartományon kívül eső érték egyszerűen érvénytelen. Az y1-nek és az y2-nek nincs ilyen korlátja: húzzon egy fogantyút a doboz teteje fölé vagy az alja alá, és a görbe túllép a kezdetén vagy a végén, pontosan így épül fel a rugós és a visszapattanó-stílusú effektusok egyetlen lazító görbéből.

Egy szám látása nem ugyanaz, mint a mozgás, ezért az előnézet két egyforma golyót fut egymás mellett egy hurkon: az egyik az egyéni görbén mozog, a másik pedig sima állandó lineáris ütemben. Versengésük nézése a leggyorsabb módja annak, hogy megtudja, hogy egy enyhülési görbe valóban a kívánt érzést hozza-e létre, még mielőtt elérné a stíluslapot. Az előre beállított oldalak – a valódi számok a CSS saját egyszerűsítés-kilépés kulcsszava mögött, az őszinte túllövési közelítés, amelyet egyesek visszapattanásnak neveznek, és a Google által közzétett anyagtervezési standard görbe – kész kiindulási pontok, amelyeket az üres vezérlőpontok helyett húzhat.

Minden helyileg fut a böngészőben: nincs feltöltés, nincs fiók, nincs oda-vissza út a szerverhez, és a generátor az oldal betöltése után offline állapotban is működik.