Метод stop

Метод stop вызывают у объекта анимации из timing, loop и других составных методов класса Animated. Это не статический метод у Animated. Значение Value остается там, где анимация прервалась.

Синтаксис

const anim = Animated.timing(value, { toValue: 1, duration: 1000, useNativeDriver: true });
anim.start();
anim.stop();

Пример

Давайте прервем длинный сдвиг вторым нажатием:

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

export default function App() {
	const shift = useRef(new Animated.Value(0)).current;
	const animRef = useRef(null);

	const run = () => {
		animRef.current = Animated.timing(shift, {
			toValue: 200,
			duration: 2000,
			useNativeDriver: true,
		});
		animRef.current.start();
	};

	const halt = () => {
		animRef.current?.stop();
	};

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

На экране квадрат останавливается на месте, если нажать вторую подпись во время движения.

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

метод start,
который запускает объект анимации
метод reset,
который готовит анимацию к новому запуску
метод stopAnimation,
который останавливает движение у Value
метод loop,
который крутит анимацию, пока ее не остановят