Edytor cubic-bezier
Działa w całości w Twojej przeglądarce. Twoje pliki i dane nigdy nie opuszczają Twojego urządzenia.
O tym narzędziu
Przeciągnij dwa punkty kontrolne na krzywej, żeby ukształtować własne łagodzenie ruchu, albo zacznij od gotowego presetu, na przykład ease-in-out, i dostosuj go dalej. Cztery pola liczbowe są zsynchronizowane z uchwytami, więc wartości można dopracowywać ręcznie albo na oko. Animacja podglądu odtwarza Twoje łagodzenie obok liniowego wzorca, dzięki czemu łatwo zobaczyć, o ile krzywa przyspiesza albo zwalnia ruch w porównaniu do stałego tempa.
Jak działa edytor krzywej?
Łagodzenie CSS cubic-bezier() opisują dwa punkty kontrolne, (x1, y1) i (x2, y2), przy czym początek i koniec krzywej są ustalone na (0,0) i (1,1). Współrzędne x oznaczają czas i zawsze są ograniczone do zakresu 0-1 wymaganego przez CSS, ale współrzędne y, oznaczające postęp, w tym edytorze mogą wykraczać poza ten zakres (mniej więcej od -1 do 2), dzięki czemu można zaprojektować efekt przestrzelenia, gdzie ruch odbija się poza cel przed ustabilizowaniem, tak jak wbudowane presety ease-in-back i ease-out-back. Pod spodem narzędzie wylicza krzywą tak samo jak przeglądarka: dla danego momentu w czasie znajduje odpowiadający punkt na krzywej kilkoma rundami metody Newtona, a gdy krzywa jest zbyt płaska, żeby metoda Newtona szybko się zbiegła, przechodzi na zwykłą bisekcję.
Można też wkleić wartość cubic-bezier(...) bezpośrednio w pola liczbowe, a narzędzie rozłoży ją z powrotem na przeciągalne uchwyty, o ile wartości x mieszczą się w dozwolonym zakresie 0-1.
Czy to, co rysuję, gdzieś trafia?
Nie. Edytor krzywej, cała matematyka za nim i animacja podglądu działają w całości w przeglądarce. Nic z tego, co narysujesz, nigdzie się nie przesyła, żaden serwer nie bierze w tym udziału.
Przyda się do dopracowania przejść i animacji CSS: dynamiczne ease-out do reakcji na kliknięcie przycisku, sprężyste przestrzelenie do pojawienia się modala, albo własna krzywa dopasowana do specyfikacji ruchu z narzędzia projektowego. Gotową wartość cubic-bezier() skopiuj prosto do arkusza stylów. Zobacz dokumentację funkcji łagodzenia na MDN, żeby zobaczyć, jak wpisuje się to w transition-timing-function i animation-timing-function, albo opis funkcji cubic-bezier() po dokładną składnię.