Метод getTranslateTransform

Метод getTranslateTransform у ValueXY синхронно возвращает массив с одним объектом translate. Его передают в transform у Animated.View.

Синтаксис

const transform = pan.getTranslateTransform();

Пример

Давайте получим массив для нулевого смещения:

import { Animated } from 'react-native';

const pan = new Animated.ValueXY({ x: 0, y: 0 });
const res = pan.getTranslateTransform();

Результат выполнения кода:

[{ translateX: 0 }, { translateY: 0 }]

Пример

Давайте сдвинем блок через transform:

import { useRef } from 'react';
import { Animated, View, Pressable, Text } from 'react-native';

export default function App() {
	const pan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;

	return (
		<View>
			<Pressable onPress={() => pan.setValue({ x: 60, y: -20 })}>
				<Text>abcde</Text>
			</Pressable>
			<Animated.View style={{ transform: pan.getTranslateTransform() }}>
				<View style={{ width: 40, height: 40, backgroundColor: '#aa6633' }} />
			</Animated.View>
		</View>
	);
}

На экране квадрат уезжает вправо и чуть вверх после нажатия.

Смотрите также

метод getLayout,
который дает left и top вместо transform
компонент View,
где описан ключ transform
метод interpolate,
который переводит одну ось Value
класс Animated,
который анимирует x и y через spring