Ściąga z Funkcji Przejścia
Funkcje przejścia określ tempo zmian parametru w czasie.
Obiekty w rzeczywistości nie ruszają ani nie zatrzymują się natychmiastowo i prawie nigdy nie poruszają się ze stałą prędkością. Kiedy wysuwamy szufladę, najpierw robimy to szybko, a pod koniec zwalniamy. Gdy upuścisz coś na podłogę, przedmiot przyspiesza w dół, a po uderzeniu odbija się.
Ta strona pomoże Ci wybrać 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 w użyciu z PostCSS. Plugin postcss-easings pobiera definicje przejść z tej strony.
.block { transition: transform 0.6s ; }
Ta deklaracja jest zamieniana na powyższy kod.
Niestety, tej funkcji przejścia nie można ustawić za pomocą pluginu PostCSS. Zobacz powyżej, jak uzyskać ten efekt przy użyciu
@keyframes.Gradient
Możesz narysować gradient używając postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Funkcje matematyczne
Poniżej znajduje się kod funkcji przejścia w języku TypeScript. Zmienna x reprezentuje postęp animacji w zakresie od 0 (początek) do 1 (koniec).
function (x: number): number {
}Poniżej znajduje się kod funkcji przejścia w języku TypeScript. Zmienna x reprezentuje postęp animacji w zakresie od 0 (początek) do 1 (koniec).
function (x: number): number {
}Sprawdź działanie tego przejścia:
Wybrana funkcja:
Wybrana funkcja
Funkcja liniowa:
Funkcja liniowa