Метод delay

Метод delay класса Animated возвращает объект анимации, который ждет заданное число миллисекунд. Его кладут в массив для sequence или stagger.

Синтаксис

const pause = Animated.delay(500);

Параметры

Параметр	Описание
`миллисекунды`	Длительность паузы перед следующим шагом.

Пример

Давайте подождем полсекунды и только потом покажем текст:

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

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

	useEffect(() => {
		Animated.sequence([
			Animated.delay(500),
			Animated.timing(opacity, {
				toValue: 1,
				duration: 300,
				useNativeDriver: true,
			}),
		]).start();
	}, [opacity]);

	return (
		<Animated.Text style={{ opacity }}>12345</Animated.Text>
	);
}

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

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

метод sequence,
который выполняет шаги по очереди
метод stagger,
который сдвигает старт каждой анимации во времени
метод timing,
который меняет значение за время
класс InteractionManager,
который откладывает код после жестов