Класс Value

Класс Value в коде пишут как Animated.Value. Конструктор принимает начальное число. Методы setValue и interpolate меняют или переводят значение для стиля. Метод removeListener снимает подписку по ид из addListener. Методы setOffset, extractOffset и stopTracking работают со смещением при жесте и отвязывают значение от события.

Синтаксис

import { Animated } from 'react-native';

const opacity = new Animated.Value(0);

Методы

Метод	Описание
`setValue`	Ставит число сразу, без анимации.
`interpolate`	Переводит диапазон входа в диапазон выхода для стиля.
`addListener`	Вызывает колбэк при каждом изменении числа.
`stopAnimation`	Останавливает текущую анимацию и отдает число в колбэк.

Пример

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

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

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

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

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

Пример

Давайте переведем число в смещение через interpolate:

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

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

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

	const shift = progress.interpolate({
		inputRange: [0, 1],
		outputRange: [0, 120],
	});

	return (
		<Animated.View style={{ transform: [{ translateX: shift }] }}>
			<View style={{ width: 48, height: 48, backgroundColor: '#cc9933' }} />
		</Animated.View>
	);
}

На экране квадрат едет вправо по мере роста progress от нуля до единицы.

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

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