Animated.ValueXY¶

2D-значение для управления 2D-анимацией, например, жестами панорамирования. Почти идентичный API обычному Animated.Value, но мультиплексированный. Содержит под капотом два обычных Animated.Value.

Пример¶

Методы¶

setValue()¶

1

setValue(value: {x: number; y: number});

Непосредственно установите значение. Это остановит любую анимацию, работающую на значении, и обновит все связанные свойства.

Параметры:

setOffset()¶

1

setOffset(offset: {x: number; y: number});

Устанавливает смещение, которое применяется поверх любого установленного значения, будь то через setValue, анимацию или Animated.event. Полезно для компенсации таких вещей, как начало жеста панорамирования.

Параметры:

flattenOffset()¶

1

flattenOffset();

Объединяет значение смещения с базовым значением и сбрасывает смещение на ноль. Окончательный вывод значения не изменяется.

extractOffset()¶

1

extractOffset();

Устанавливает значение смещения на базовое значение и сбрасывает базовое значение на ноль. Окончательный вывод значения не изменяется.

addListener()¶

1

addListener(callback: (value: {x: number; y: number}) => void);

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

Возвращает строку, которая служит идентификатором для слушателя.

Параметры:

removeListener()¶

1

removeListener(id: string);

Снять с регистрации слушателя. Параметр id должен соответствовать идентификатору, ранее возвращенному функцией addListener().

Параметры:

removeAllListeners()¶

1

removeAllListeners();

Удалите всех зарегистрированных слушателей.

stopAnimation()¶

1

stopAnimation(callback?: (value: {x: number; y: number}) => void);

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

Параметры:

resetAnimation()¶

1

resetAnimation(callback?: (value: {x: number; y: number}) => void);

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

Параметры:

getLayout()¶

1

getLayout(): {left: Animated.Value, top: Animated.Value};

Преобразует {x, y} в {left, top} для использования в стиле, например.

1

style={this.state.anim.getLayout()}

getTranslateTransform()¶

1
2
3
4

getTranslateTransform(): [
  {translateX: Animated.Value},
  {translateY: Animated.Value},
];

Преобразует {x, y} в пригодное для использования преобразование перевода, например

1
2
3

style={{
  transform: this.state.anim.getTranslateTransform()
}}

Ссылки¶

• https://reactnative.dev/docs/animatedvaluexy

Комментарии