Przejdź do treści głównej
Wersja: Następna

Funkcje Easing

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Moduł Easing implementuje powszechnie używane funkcje płynności. Jest wykorzystywany przez Animated.timing() do tworzenia fizycznie wiarygodnych ruchów w animacjach.

Wizualizację niektórych funkcji płynności znajdziesz na https://easings.net/

Predefiniowane animacje​

Moduł Easing udostępnia kilka gotowych animacji poprzez następujące metody:

  • back tworzy podstawową animację, w której obiekt najpierw lekko się cofa przed ruchem do przodu

  • bounce tworzy animację odbijania

  • ease tworzy podstawową animację inercyjną

  • elastic tworzy podstawową interakcję sprężystą

Funkcje standardowe​

Udostępniono trzy podstawowe funkcje płynności:

Funkcja poly może implementować funkcje wyższych rzędów jak kwartyczne czy kwintowe.

Funkcje dodatkowe​

Dodatkowe funkcje matematyczne są dostępne poprzez:

  • bezier tworzy krzywą Béziera trzeciego stopnia

  • circle tworzy funkcję kołową

  • sin tworzy funkcję sinusoidalną

  • exp tworzy funkcję wykładniczą

Następujące funkcje pomocnicze modyfikują inne funkcje płynności:

  • in uruchamia funkcję płynności w przód

  • inOut nadaje funkcji symetryczność

  • out uruchamia funkcję płynności wstecz

Przykład​

Dokumentacja

Metody​

step0()​

tsx
static step0(n: number);

Funkcja schodkowa zwracająca 1 dla każdej dodatniej wartości n.

step1()​

tsx
static step1(n: number);

Funkcja schodkowa zwracająca 1, gdy n jest większe lub równe 1.

linear()​

tsx
static linear(t: number);

Funkcja liniowa f(t) = t. Pozycja jest wprost proporcjonalna do czasu trwania.

https://cubic-bezier.com/#0,0,1,1

ease()​

tsx
static ease(t: number);

Podstawowa interakcja inercyjna, podobna do stopniowego przyspieszania obiektu.

https://cubic-bezier.com/#.42,0,1,1

quad()​

tsx
static quad(t: number);

Funkcja kwadratowa f(t) = t * t. Pozycja równa się kwadratowi czasu trwania.

https://easings.net/#easeInQuad

cubic()​

tsx
static cubic(t: number);

Funkcja sześcienna f(t) = t * t * t. Pozycja równa się sześcianowi czasu trwania.

https://easings.net/#easeInCubic

poly()​

tsx
static poly(n: number);

Funkcja potęgowa. Pozycja równa się czasowi trwania podniesionemu do potęgi N.

n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint

sin()​

tsx
static sin(t: number);

Funkcja sinusoidalna.

https://easings.net/#easeInSine

circle()​

tsx
static circle(t: number);

Funkcja kołowa.

https://easings.net/#easeInCirc

exp()​

tsx
static exp(t: number);

Funkcja wykładnicza.

https://easings.net/#easeInExpo

elastic()​

tsx
static elastic(bounciness: number);

Podstawowa interakcja sprężysta, przypominająca drgania sprężyny.

Domyślna sprężystość wynosi 1, co powoduje lekkie przekroczenie wartości docelowej. Wartość 0 całkowicie eliminuje przekroczenia, a wartości N > 1 spowodują około N przekroczeń.

https://easings.net/#easeInElastic

back()​

tsx
static back(s)

Używaj z Animated.parallel(), aby uzyskać efekt cofnięcia obiektu na początku animacji.

bounce()​

tsx
static bounce(t: number);

Tworzy podstawowy efekt odbijania.

https://easings.net/#easeInBounce

bezier()​

tsx
static bezier(x1: number, y1: number, x2: number, y2: number);

Implementuje krzywą Béziera trzeciego stopnia, odpowiadającą właściwości CSS transition-timing-function.

Narzędzie do wizualizacji krzywych Béziera: https://cubic-bezier.com/

in()​

tsx
static in(easing: number);

Wykonuje funkcję easingu w kierunku normalnym.

out()​

tsx
static out(easing: number);

Wykonuje funkcję easingu w kierunku odwrotnym.

inOut()​

tsx
static inOut(easing: number);

Tworzy symetryczną funkcję easingu. Animacja przebiega normalnie przez pierwszą połowę czasu, a następnie odwrotnie przez drugą połowę.