Метод start

Метод start вызывают у объекта анимации, а не у класса Animated. Такой объект возвращают timing, spring, decay, sequence, parallel и loop. Колбэк получает объект с полем finished.

Синтаксис

anim.start(({ finished }) => {
	if (finished) {
		// done
	}
});

Параметры

Параметр	Описание
`колбэк`	Функция после завершения или остановки. Аргумент `{ finished }` равен `true`, если анимация дошла до конца.

Пример

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

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 run = () => {
		Animated.timing(shift, {
			toValue: 100,
			duration: 400,
			useNativeDriver: true,
		}).start(({ finished }) => {
			if (finished) {
				shift.setValue(0);
			}
		});
	};

	return (
		<View>
			<Pressable onPress={run}>
				<Text>12345</Text>
			</Pressable>
			<Animated.View style={{ transform: [{ translateX: shift }] }}>
				<Text>abcde</Text>
			</Animated.View>
		</View>
	);
}

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

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

метод stop,
который обрывает анимацию до колбэка
метод reset,
который сбрасывает объект анимации
метод timing,
который создает объект для start
метод stopAnimation,
который останавливает анимацию у Value