Метод loop

Метод loop класса Animated оборачивает объект анимации и запускает его снова. Число повторов задают в iterations. Без ограничения цикл крутится, пока его не остановят.

Синтаксис

const anim = Animated.loop(
	Animated.timing(value, { toValue: 1, duration: 500, useNativeDriver: true }),
	{ iterations: 3 },
);

Параметры

Параметр	Описание
`анимация`	Объект анимации от `timing` или другого метода.
`iterations`	Сколько раз повторить цикл. Отрицательное значение означает бесконечный повтор.

Пример

Давайте три раза пульсируем прозрачность текста:

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

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

	useEffect(() => {
		Animated.loop(
			Animated.sequence([
				Animated.timing(opacity, {
					toValue: 0.2,
					duration: 400,
					useNativeDriver: true,
				}),
				Animated.timing(opacity, {
					toValue: 1,
					duration: 400,
					useNativeDriver: true,
				}),
			]),
			{ iterations: 3 },
		).start();
	}, [opacity]);

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

На экране подпись три раза тускнеет и снова становится яркой.

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

метод sequence,
который собирает шаги в одну анимацию
метод stop,
который прерывает бесконечный цикл
метод reset,
который возвращает анимацию в начало
компонент Animated.Text,
который рисует строку с анимируемым стилем