Анимированные элементы

Библиотека Animated предназначена для создания плавных, мощных и простых в разработке и поддержке анимаций. Animated фокусируется на декларативных взаимосвязях между входами и выходами, настраиваемых преобразованиях между ними и start/stop методах для управления выполнением анимации, основанной на времени.

Основной рабочий процесс создания анимации заключается в создании Animated.Value, подключении его к одному или нескольким атрибутам стиля анимированного компонента, а затем в управлении обновлениями с помощью анимаций, используя Animated.timing().

• Компонент функции
• Компонент класса

Следующий пример содержит View, который будет плавно появляться и исчезать, основываясь на анимированном значении fadeAnim.

• Компонент функции
• Компонент класса

Обратитесь к руководству Анимации, чтобы увидеть дополнительные примеры работы Animated.

Обзор

Существует два типа значений, которые можно использовать с Animated:

• Animated.Value() для одиночных значений
• Animated.ValueXY() для векторов

Animated.Value может привязываться к свойствам стиля или другим свойствам и может также интерполироваться. Один Animated.Value может управлять любым количеством свойств.

Настройка анимаций

Animated предоставляет три типа анимаций. Каждый тип анимации предоставляет определенную кривую анимации, которая управляет тем, как значения анимируются от начального до конечного:

• Animated.decay() начинается с начальной скорости и постепенно замедляется до полной остановки.
• Animated.spring() обеспечивает базовую модель пружинной физики.
• Animated.timing() анимирует значение во времени, используя функции сглаживания.

В большинстве случаев вы будете использовать timing(). По умолчанию он использует симметричную кривую easeInOut, которая передает постепенное ускорение объекта до полной скорости и заканчивается постепенным замедлением до остановки.

Работа с анимациями

Анимация запускается путем вызова start() на вашей анимации. start() принимает обратный вызов завершения, который будет вызван по завершении анимации. Если анимация завершилась нормально, обратный вызов завершения будет вызван с {finished: true}. Если анимация завершилась из-за того, что stop() было вызвано для нее до завершения (например, из-за прерывания жестом или другой анимацией), то она получит {finished: false}.

Animated.timing({}).start(({ finished }) => {
  /* completion callback */
});

Использование нативного драйвера

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

Вы можете использовать нативный драйвер, указав useNativeDriver: true в вашей конфигурации анимации. Подробнее см. в руководстве Анимации.

Анимируемые компоненты

Только анимируемые компоненты могут быть анимированы. Эти уникальные компоненты выполняют магию привязки анимированных значений к свойствам и выполняют целевые нативные обновления, чтобы избежать затрат процесса рендеринга и примирения React на каждом кадре. Они также обрабатывают очистку при размонтировании, поэтому по умолчанию они безопасны.

• createAnimatedComponent() может быть использован для создания анимируемого компонента.

Animated экспортирует следующие анимируемые компоненты, используя указанный выше обертку:

• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View
• Animated.FlatList
• Animated.SectionList

Компоновка анимаций

Анимации также могут быть объединены сложными способами с помощью функций композиции:

• Animated.delay() запускает анимацию после заданной задержки.
• Animated.parallel() запускает несколько анимаций одновременно.
• Animated.sequence() запускает анимации в порядке, ожидая завершения каждой перед запуском следующей.
• Animated.stagger() запускает анимации в порядке и параллельно, но с последовательными задержками.

Анимации также могут быть объединены, установив toValue одной анимации на другую Animated.Value. См. Отслеживание динамических значений в руководстве по анимации.

По умолчанию, если одна анимация остановлена или прервана, все остальные анимации в группе также останавливаются.

Объединение анимированных значений

Вы можете объединить два анимированных значения посредством сложения, вычитания, умножения, деления или модуля, чтобы получить новое анимированное значение:

• Animated.add()
• Animated.subtract()
• Animated.divide()
• Animated.modulo()
• Animated.multiply()

Интерполяция

Функция interpolate() позволяет отображать диапазоны ввода в различные диапазоны вывода. По умолчанию она экстраполирует кривую за заданные диапазоны, но также может ограничивать выходное значение. По умолчанию используется линейная интерполяция, но также поддерживаются функции сглаживания.

• interpolate()

Дополнительную информацию об интерполяции см. в руководстве Анимация.

Обработка жестов и других событий

Жесты, такие как панорамирование или прокрутка, и другие события могут быть напрямую связаны с анимированными значениями с помощью Animated.event() . Это делается с помощью структурированной синтаксической конструкции карты, чтобы значения могли извлекаться из сложных объектов событий. Первый уровень — массив для отображения по нескольким аргументам, а этот массив содержит вложенные объекты.

• Animated.event()

Например, при работе с горизонтальными жестами прокрутки вы выполните следующие действия для сопоставления event.nativeEvent.contentOffset.x с scrollX (Animated.Value):

 onScroll={Animated.event(
   // scrollX = e.nativeEvent.contentOffset.x
   [{ nativeEvent: {
        contentOffset: {
          x: scrollX
        }
      }
    }]
 )}

Справочник

Методы

Если заданное значение является ValueXY, а не Value, каждый параметр конфигурации может быть вектором вида {x: ..., y: ...} вместо скаляра.

decay()

static decay(value, config)

Анимирует значение от начальной скорости до нуля, основываясь на коэффициенте затухания.

Конфигурация — объект, который может иметь следующие параметры:

• velocity: Начальная скорость. Требуется.
• deceleration: Скорость затухания. По умолчанию 0,997.
• isInteraction: Создание или нет "ручки взаимодействия" на InteractionManager. По умолчанию true.
• useNativeDriver: Использование нативного драйвера, если true. По умолчанию false.

timing()

static timing(value, config)

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

Конфигурация — объект, который может иметь следующие параметры:

• duration: Длительность анимации (миллисекунды). По умолчанию 500.
• easing: Функция сглаживания для определения кривой. По умолчанию Easing.inOut(Easing.ease).
• delay: Запуск анимации после задержки (миллисекунды). По умолчанию 0.
• isInteraction: Создание или нет "ручки взаимодействия" на InteractionManager. По умолчанию true.
• useNativeDriver: Использование нативного драйвера, если true. По умолчанию false.

spring()

static spring(value, config)

Анимирует значение согласно аналитической модели пружины, основанной на затухающем гармоническом осцилляторе. Отслеживает состояние скорости, чтобы создавать плавные движения, поскольку toValue обновляется, и может быть объединен.

Конфигурация — объект, который может иметь следующие параметры.

Обратите внимание, что вы можете определить только один из bounciness/speed, tension/friction или stiffness/damping/mass, но не более одного:

Параметры friction/tension или bounciness/speed соответствуют модели пружины в Facebook Pop, Rebound и Origami.

• friction: Управляет "отскоком"/переходом. По умолчанию 7.
• tension: Управляет скоростью. По умолчанию 40.
• speed: Управляет скоростью анимации. По умолчанию 12.
• bounciness: Управляет отскоком. По умолчанию 8.

Указание stiffness/damping/mass в качестве параметров заставляет Animated.spring использовать аналитическую модель пружины, основанную на уравнениях движения затухающего гармонического осциллятора. Это поведение немного точнее и соответствует физике, лежащей в основе динамики пружины, и тесно имитирует реализацию в CASpringAnimation iOS.

• stiffness: Коэффициент жесткости пружины. По умолчанию 100.
• damping: Определяет, как движение пружины должно затухать из-за сил трения. По умолчанию 10.
• mass: Масса объекта, прикрепленного к концу пружины. По умолчанию 1.

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

• velocity: Начальная скорость объекта, прикрепленного к пружине. По умолчанию 0 (объект покоится).
• overshootClamping: Булево значение, указывающее, должна ли пружина быть зафиксирована и не отскакивать. По умолчанию false.
• restDisplacementThreshold: Порог смещения от состояния покоя, ниже которого пружина должна считаться в состоянии покоя. По умолчанию 0,001.
• restSpeedThreshold: Скорость, при которой пружина должна считаться в состоянии покоя в пикселях в секунду. По умолчанию 0,001.
• delay: Запустить анимацию после задержки (миллисекунды). По умолчанию 0.
• isInteraction: Создаёт ли эта анимация "ручку взаимодействия" на InteractionManager. По умолчанию true.
• useNativeDriver: Использует родной драйвер, если значение true. По умолчанию false.

add()

static add(a, b)

Создаёт новую анимированную величину, составленную из двух анимированных величин, сложенных вместе.

subtract()

static subtract(a, b)

Создаёт новую анимированную величину, вычитая вторую анимированную величину из первой анимированной величины.

divide()

static divide(a, b)

Создаёт новую анимированную величину, деля первую анимированную величину на вторую анимированную величину.

multiply()

static multiply(a, b)

Создаёт новую анимированную величину, составленную из двух анимированных величин, умноженных друг на друга.

modulo()

static modulo(a, modulus)

Создаёт новую анимированную величину, являющуюся (неотрицательным) модулем предоставленной анимированной величины.

diffClamp()

static diffClamp(a, min, max)

Создаёт новую анимированную величину, ограниченную между двумя значениями. Она использует разницу между последними значениями, поэтому даже если значение далеко от границ, оно начнёт изменяться, когда значение начнёт приближаться снова. (value = clamp(value + diff, min, max)).

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

delay()

static delay(time)

Запускает анимацию после заданной задержки.

sequence()

static sequence(animations)

Запускает массив анимаций в порядке, ожидая завершения каждой перед запуском следующей. Если текущая запущенная анимация останавливается, последующие анимации не будут запускаться.

parallel()

static parallel(animations, config?)

Запускает массив анимаций одновременно. По умолчанию, если одна из анимаций останавливается, они все останавливаются. Вы можете переопределить это с помощью флага stopTogether.

stagger()

static stagger(time, animations)

Массив анимаций может выполняться параллельно (перекрываться), но запускается последовательно с последующими задержками. Хорошо подходит для создания эффектов отставания.

loop()

static loop(animation, config?)

Повторяет заданную анимацию непрерывно, так что каждый раз, когда она достигает конца, она сбрасывается и начинается сначала. Будет повторяться без блокировки потока JS, если дочерняя анимация установлена на useNativeDriver: true. Кроме того, циклы могут предотвращать компоненты, основанные на VirtualizedList, от рендеринга дополнительных строк во время выполнения анимации. Вы можете передать isInteraction: false в конфигурацию дочерней анимации, чтобы исправить это.

Конфигурация — это объект, который может иметь следующие параметры:

• iterations: Количество повторений анимации. По умолчанию -1 (бесконечно).

event()

static event(argMapping, config?)

Принимает массив отображений и извлекает значения из каждого аргумента соответственно, а затем вызывает setValue на сопоставленных результатах. Например:

 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
   {listener: (event) => console.log(event)}, // Optional async listener
 )}
 ...
 onPanResponderMove: Animated.event([
   null,                // raw event arg ignored
   {dx: this._panX}],    // gestureState arg
{listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
 ),

Конфигурация — это объект, который может иметь следующие параметры:

• listener: Необязательный асинхронный обработчик.
• useNativeDriver: Использует родной драйвер, если значение true. По умолчанию false.

forkEvent()

static forkEvent(event, listener)

Расширенный императивный API для слежения за анимированными событиями, передаваемыми через атрибуты. Он позволяет добавить новый обработчик JavaScript к существующему AnimatedEvent. Если animatedEvent является обработчиком JavaScript, он объединит 2 обработчика в один, а если animatedEvent равно null/undefined, он назначит обработчик JavaScript непосредственно. Используйте значения непосредственно, где это возможно.

unforkEvent()

static unforkEvent(event, listener)

start()

static start([callback]: ?(result?: {finished: boolean}) => void)

Анимации запускаются, вызывая start() для вашей анимации. start() принимает обратный вызов завершения, который будет вызван, когда анимация завершится или когда анимация завершится, потому что stop() был вызван для неё до того, как она могла завершиться.

Параметры:

Пример запуска с обратным вызовом:

Animated.timing({}).start(({ finished }) => {
  /* completion callback */
});

stop()

static stop()

Останавливает любую выполняющуюся анимацию.

reset()

static reset()

Останавливает любую выполняющуюся анимацию и сбрасывает значение до его исходного значения.

Свойства

Value

Стандартный класс значений для управления анимациями. Обычно инициализируется с new Animated.Value(0);

Вы можете узнать больше об API Animated.Value на отдельной странице.

ValueXY

Класс значений 2D для управления 2D-анимациями, такими как жесты масштабирования.

Вы можете узнать больше об API Animated.ValueXY на отдельной странице.

Interpolation

Экспортируется для использования типа Interpolation в потоке.

Node

Экспортируется для удобства проверки типов. Все анимированные значения выводятся от этого класса.

createAnimatedComponent

Делает любой компонент React анимируемым. Используется для создания Animated.View, и т.д.

attachNativeEvent

Императивный API для привязки анимированного значения к событию на представлении. Предпочтительно использовать Animated.event с useNativeDrive: true при возможности.