Ściąga z Funkcji Przejścia
Funkcje przejścia zadaj tempo zmian parametru w czasie.
Obiekty w prawdziwym życiu nie ruszają i nie zatrzymują się natychmiastowo i prawie nigdy nie poruszają się ze stałą prędkością. Kiedy wysuwamy szufladę, najpierw nadajemy jej energiczny, szybki ruch, zaś kiedy już się wysuwa, spowalniamy ją. Upuść coś na podłogę, a to najpierw zacznie przyspieszać w dół, po czym, gdy trafi w podłogę, odbije się od niej z powrotem.
Ta strona pomaga wybrać Ci odpowiednią funkcję przejścia.
Open Source
Pomóż przetłumaczyć stronę na twój język!
x
t
CSS
W CSS-ie, takie właściwości jak przemiana (transition) oraz animacja (animation) pozwalają na określenie dla nich funkcji przejścia.
.block { transition: transform 0.6s ; }
Edytuj na cubic-bezier.com.
W CSS-ie, taka funkcja może zostać zaimplementowana za pomocą
@keyframes:Rozmiar
Ładowanie...
Pozycja
Ładowanie...
Przezroczystość
Ładowanie...
PostCSS
Funkcje przejścia są znacznie łatwiejsze do opisania w PostCSS. Istnieje plugin postcss-easings, który pobiera informacje o przejściach z tejże strony.
.block { transition: transform 0.6s ; }
Tamta deklaracja została skonwertowana do tej opisanej powyżej.
Niestety nie można ustawić funkcji przejścia za pomocą żadnego pluginu do PostCSS-a. Zobacz powyżej, jak można to zrobić przy użyciu
@keyframes.Gradient
Można narysować gradient przy użyciu postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Funkcje matematyczne
Poniżej widzisz kod dla funkcji przejścia napisany w TypeScriptcie. Zmienna x odzwierciedla absolutny postęp animacji w zakresie od 0 (początek animacji) do 1 (koniec animacji).
function (x: number): number {
}Poniżej widzisz kod dla funkcji przejścia napisany w TypeScriptcie. Zmienna x odzwierciedla absolutny postęp animacji w zakresie od 0 (początek animacji) do 1 (koniec animacji).
function (x: number): number {
}Sprawdź, jaką zmianę daje to przejście:
Ta funkcja:
Ta funkcja
Funkcja liniowa:
Funkcja liniowa