Класс Animated

Класс Animated меняет число в Value и координаты в ValueXY. Методы timing, spring и decay возвращают объект анимации. Его запускают методом start, а не статическим вызовом у Animated. Готовое значение передают в style у Animated.View.

Синтаксис

import { Animated } from 'react-native';

const opacity = new Animated.Value(0);
const anim = Animated.timing(opacity, {
	toValue: 1,
	duration: 300,
	useNativeDriver: true,
});
anim.start();

Методы

Метод	Описание
`timing`	Меняет значение за заданное время с кривой из `Easing`.
`spring`	Тянет значение к цели как пружина.
`decay`	Замедляет значение по инерции после жеста.
`sequence`	Запускает анимации из массива по очереди.
`parallel`	Запускает анимации из массива одновременно.
`loop`	Повторяет одну анимацию заданное число раз.
`delay`	Вставляет паузу в миллисекундах перед следующим шагом.
`stagger`	Запускает анимации из массива со сдвигом по времени.
`event`	Связывает событие прокрутки или жеста с анимируемым значением.
`diffClamp`	Держит приращение значения между минимумом и максимумом.
`createAnimatedComponent`	Оборачивает компонент для анимации его стиля.
`start`	Запускает объект анимации, который вернули другие методы.
`stop`	Останавливает объект анимации на текущем кадре.
`reset`	Сбрасывает объект анимации в начальное состояние.

Пример

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

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

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

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

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

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

Пример

Давайте сначала сдвинем блок, затем вернем его через цепочку:

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

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

	const run = () => {
		Animated.sequence([
			Animated.timing(shift, {
				toValue: 80,
				duration: 200,
				useNativeDriver: true,
			}),
			Animated.timing(shift, {
				toValue: 0,
				duration: 200,
				useNativeDriver: true,
			}),
		]).start();
	};

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

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

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

класс Value,
который хранит число для анимации
класс Easing,
который задает кривую скорости
компонент Animated.View,
который принимает анимируемый стиль
класс LayoutAnimation,
который анимирует следующее изменение раскладки