Ускорение

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

Вы можете найти визуализацию некоторых общих функций ускорения по адресу http://easings.net/

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

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

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

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

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

• linear
• quad
• cubic

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

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

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

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

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

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

Справочник

Методы

step0()

static step0(n)

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

step1()

static step1(n)

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

linear()

static linear(t)

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

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

ease()

static ease(t)

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

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

quad()

static quad(t)

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

http://easings.net/#easeInQuad

cubic()

static cubic(t)

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

http://easings.net/#easeInCubic

poly()

static poly(n)

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

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

sin()

static sin(t)

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

http://easings.net/#easeInSine

circle()

static circle(t)

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

http://easings.net/#easeInCirc

exp()

static exp(t)

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

http://easings.net/#easeInExpo

elastic()

static elastic(bounciness)

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

По умолчанию коэффициент отскока равен 1, что приводит к небольшому превышению значения один раз. Коэффициент отскока 0 не приводит к превышению, а коэффициент отскока N > 1 приведет к превышению примерно N раз.

http://easings.net/#easeInElastic

back()

static back(s)

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

bounce()

static bounce(t)

Предоставляет базовый эффект отскока.

http://easings.net/#easeInBounce

bezier()

static bezier(x1, y1, x2, y2)

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

Полезный инструмент для визуализации кубических кривых Безье находится по адресу http://cubic-bezier.com/

in()

static in(easing);

Выполняет функцию ускорения вперёд.

out()

static out(easing)

Выполняет функцию ускорения назад.

inOut()

static inOut(easing)

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