Easing¶
Модуль Easing
реализует общие функции перемещения. Этот модуль используется Animated.timing()
для передачи физически правдоподобного движения в анимации.
Визуализацию некоторых распространенных функций перемещения можно найти на сайте.
Предопределенные анимации¶
Модуль Easing
предоставляет несколько предопределенных анимаций через следующие методы:
back
обеспечивает базовую анимацию, при которой объект слегка отходит назад перед движением вперед.bounce
обеспечивает анимацию подпрыгиванияease
обеспечивает базовую инерционную анимациюelastic
обеспечивает базовое взаимодействие пружины
Стандартные функции¶
Предоставляются три стандартные функции перемещения:
Функция poly
может быть использована для реализации квартовых, квинтовых и других функций высшей силы.
Дополнительные функции¶
Дополнительные математические функции предоставляются следующими методами:
bezier
обеспечивает кубическую кривую Безьеcircle
предоставляет круговую функциюsin
предоставляет синусоидальную функциюexp
предоставляет экспоненциальную функцию
Следующие помощники используются для модификации других функций easing.
in
запускает функцию перемещения впередinOut
делает любую функцию перемещения симметричнойout
запускает функцию перемещения назад
Пример¶
Методы¶
step0()¶
1 |
|
Пошаговая функция, возвращает 1
для любого положительного значения n
.
step1()¶
1 |
|
Пошаговая функция, возвращает 1
, если n
больше или равно 1
.
linear()¶
1 |
|
Линейная функция, f(t) = t
. Позиция коррелирует с прошедшим временем один к одному.
https://cubic-bezier.com/#0,0,1,1
ease()¶
1 |
|
Базовое инерционное взаимодействие, подобное тому, как объект медленно разгоняется до скорости.
https://cubic-bezier.com/#.42,0,1,1
quad()¶
1 |
|
Квадратичная функция, f(t) = t * t
. Позиция равна квадрату прошедшего времени.
https://easings.net/#easeInQuad
cubic()¶
1 |
|
Кубическая функция, f(t) = t * t * t
. Позиция равна кубу прошедшего времени.
https://easings.net/#easeInCubic
poly()¶
1 |
|
Функция мощности. Позиция равна N-ой мощности прошедшего времени.
n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
sin()¶
1 |
|
Синусоидальная функция.
https://easings.net/#easeInSine
circle()¶
1 |
|
Круговая функция.
https://easings.net/#easeInCirc
exp()¶
1 |
|
Экспоненциальная функция.
https://easings.net/#easeInExpo
elastic()
¶
1 |
|
Базовое упругое взаимодействие, похожее на пружину, колеблющуюся вперед-назад.
Выпуклость по умолчанию равна 1
, что приводит к небольшому проскакиванию один раз. Выпуклость 0
не проскакивает вообще, а выпуклость N > 1
проскакивает примерно N
раз.
https://easings.net/#easeInElastic
back()¶
1 |
|
Используется с Animated.parallel()
для создания базового эффекта, когда объект слегка отступает назад, когда начинается анимация.
bounce()¶
1 |
|
Обеспечивает базовый эффект подпрыгивания.
https://easings.net/#easeInBounce
bezier()¶
1 |
|
Предоставляет кубическую кривую Безье, эквивалентную transition-timing-function
в CSS Transitions.
Полезный инструмент для визуализации кубических кривых Безье можно найти на сайте.
in()¶
1 |
|
Запускает функцию перемещения вперед.
out()¶
1 |
|
Выполняет функцию перемещения в обратном направлении.
inOut()¶
1 |
|
Делает любую функцию перемещения симметричной. Функция перемещения будет работать вперед в течение половины времени, а затем назад в течение оставшейся части времени.