Метод stopAnimation

Метод stopAnimation у Value прерывает движение, которое идет через Animated. Колбэк получает текущее число на момент остановки.

Синтаксис

value.stopAnimation((current) => {
	console.log(current);
});

Параметры

Параметр	Описание
`колбэк`	Функция с текущим значением после остановки.

Пример

Давайте остановим сдвиг и зафиксируем оставшееся число:

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

export default function App() {
	const shift = useRef(new Animated.Value(0)).current;
	const [frozen, setFrozen] = useState('0');

	const run = () => {
		Animated.timing(shift, {
			toValue: 150,
			duration: 1500,
			useNativeDriver: true,
		}).start();
	};

	const freeze = () => {
		shift.stopAnimation((current) => {
			setFrozen(String(Math.round(current)));
		});
	};

	return (
		<View>
			<Pressable onPress={run}>
				<Text>abcde</Text>
			</Pressable>
			<Pressable onPress={freeze}>
				<Text>12345</Text>
			</Pressable>
			<Animated.View style={{ transform: [{ translateX: shift }] }}>
				<View style={{ width: 36, height: 36, backgroundColor: '#996633' }} />
			</Animated.View>
			<Text>{frozen}</Text>
		</View>
	);
}

На экране после второго нажатия квадрат замирает, а под ним видно зафиксированное смещение.

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

метод stop,
который останавливает объект анимации
метод setValue,
который ставит число вручную после остановки
метод timing,
который двигает Value до stopAnimation
метод addListener,
который слушает каждое изменение Value