Generator sześcienny Beziera
Zaprojektuj niestandardową funkcję synchronizacji CSS Cube-bezier(), przeciągając dwa punkty kontrolne, wyświetl podgląd na żywo względem odniesienia liniowego, a następnie skopiuj gotową wartość.
Wynik
Ręczne wpisanie sześcianu-bezier(x1, y1, x2, y2) i ponowne załadowanie strony w celu sprawdzenia działania to powolny sposób na dostrojenie animacji. Ten generator zamyka tę pętlę: przeciągnij uchwyt punktu kontrolnego na krzywą lub wpisz dokładne liczby w polach x1/y1/x2/y2, a krzywa, ciąg CSS, który można kopiować i podgląd animacji na żywo, aktualizują się przy każdej zmianie — bez etapu kompilacji, bez ponownego ładowania.
Obie osie celowo działają inaczej. Wartości x1 i x2 pozostają zaciśnięte pomiędzy 0 a 1, ponieważ tego właśnie wymaga specyfikacja CSS od funkcji pomiaru czasu Cube-bezier() — wartość spoza tego zakresu jest po prostu nieprawidłowa. y1 i y2 nie mają takiego ograniczenia: przeciągnij uchwyt powyżej górnej krawędzi prostokąta lub poniżej jego dolnej krawędzi, a krzywa przekroczy swój początek lub koniec. Dokładnie tak powstają efekty sprężyste i odbicia z pojedynczej krzywej wygładzania.
Zobaczenie liczby to nie to samo, co zobaczenie ruchu, więc podgląd przedstawia dwie identyczne kulki obok siebie w pętli: jedna porusza się według niestandardowej krzywej, druga porusza się w zwykłym, stałym, liniowym tempie. Obserwowanie ich wyścigu to najszybszy sposób, aby stwierdzić, czy krzywa rozluźniania rzeczywiście zapewnia oczekiwane wrażenia, zanim jeszcze trafi do arkusza stylów. Gotowe strony — rzeczywiste liczby kryjące się za słowem kluczowym CSS „easy-in-out”, uczciwe przybliżenie przekroczenia, które niektórzy nazywają odbiciem, oraz opublikowana przez Google krzywa standardowa Material Design — to gotowe punkty początkowe, z których można przeciągać, a nie puste punkty kontrolne.
Wszystko działa lokalnie w Twojej przeglądarce: bez przesyłania, bez konta, bez przełączania serwera w obie strony, a generator działa w trybie offline po załadowaniu strony.