Перейти к содержанию

Easing

Модуль Easing реализует общие функции перемещения. Этот модуль используется Animated.timing() для передачи физически правдоподобного движения в анимации.

Визуализацию некоторых распространенных функций перемещения можно найти на сайте.

Предопределенные анимации

Модуль Easing предоставляет несколько предопределенных анимаций через следующие методы:

  • back обеспечивает базовую анимацию, при которой объект слегка отходит назад перед движением вперед.
  • bounce обеспечивает анимацию подпрыгивания
  • ease обеспечивает базовую инерционную анимацию
  • elastic обеспечивает базовое взаимодействие пружины

Стандартные функции

Предоставляются три стандартные функции перемещения:

Функция poly может быть использована для реализации квартовых, квинтовых и других функций высшей силы.

Дополнительные функции

Дополнительные математические функции предоставляются следующими методами:

  • bezier обеспечивает кубическую кривую Безье
  • circle предоставляет круговую функцию
  • sin предоставляет синусоидальную функцию
  • exp предоставляет экспоненциальную функцию

Следующие помощники используются для модификации других функций easing.

  • in запускает функцию перемещения вперед
  • inOut делает любую функцию перемещения симметричной
  • out запускает функцию перемещения назад

Пример

Методы

step0()

1
static step0(n: number);

Пошаговая функция, возвращает 1 для любого положительного значения n.

step1()

1
static step1(n: number);

Пошаговая функция, возвращает 1, если n больше или равно 1.

linear()

1
static linear(t: number);

Линейная функция, f(t) = t. Позиция коррелирует с прошедшим временем один к одному.

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

ease()

1
static ease(t: number);

Базовое инерционное взаимодействие, подобное тому, как объект медленно разгоняется до скорости.

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

quad()

1
static quad(t: number);

Квадратичная функция, f(t) = t * t. Позиция равна квадрату прошедшего времени.

https://easings.net/#easeInQuad

cubic()

1
static cubic(t: number);

Кубическая функция, f(t) = t * t * t. Позиция равна кубу прошедшего времени.

https://easings.net/#easeInCubic

poly()

1
static poly(n: number);

Функция мощности. Позиция равна N-ой мощности прошедшего времени.

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

sin()

1
static sin(t: number);

Синусоидальная функция.

https://easings.net/#easeInSine

circle()

1
static circle(t: number);

Круговая функция.

https://easings.net/#easeInCirc

exp()

1
static exp(t: number);

Экспоненциальная функция.

https://easings.net/#easeInExpo

elastic()

1
static elastic(bounciness: number);

Базовое упругое взаимодействие, похожее на пружину, колеблющуюся вперед-назад.

Выпуклость по умолчанию равна 1, что приводит к небольшому проскакиванию один раз. Выпуклость 0 не проскакивает вообще, а выпуклость N > 1 проскакивает примерно N раз.

https://easings.net/#easeInElastic

back()

1
static back(s)

Используется с Animated.parallel() для создания базового эффекта, когда объект слегка отступает назад, когда начинается анимация.

bounce()

1
static bounce(t: number);

Обеспечивает базовый эффект подпрыгивания.

https://easings.net/#easeInBounce

bezier()

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

Предоставляет кубическую кривую Безье, эквивалентную transition-timing-function в CSS Transitions.

Полезный инструмент для визуализации кубических кривых Безье можно найти на сайте.

in()

1
static in(easing: number);

Запускает функцию перемещения вперед.

out()

1
static out(easing: number);

Выполняет функцию перемещения в обратном направлении.

inOut()

1
static inOut(easing: number);

Делает любую функцию перемещения симметричной. Функция перемещения будет работать вперед в течение половины времени, а затем назад в течение оставшейся части времени.

Комментарии