Easing¶

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

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

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

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

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

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

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

• linear
• quad
• cubic

Функция 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);

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

Комментарии