Метод interpolate

Метод interpolate у Value строит новое анимируемое значение для style. Пары inputRange и outputRange задают, как входное число превращается в выходное. Параметр extrapolate ограничивает результат за пределами диапазона.

Синтаксис

const width = progress.interpolate({
	inputRange: [0, 1],
	outputRange: [40, 200],
	extrapolate: 'clamp',
});

Параметры

Параметр	Описание
`inputRange`	Массив опорных точек исходного значения по возрастанию.
`outputRange`	Массив результатов для каждой точки `inputRange`.
`extrapolate`	Правило за границами диапазона, часто `'clamp'`.

Пример

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

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

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

	useEffect(() => {
		Animated.timing(step, {
			toValue: 1,
			duration: 600,
			useNativeDriver: false,
		}).start();
	}, [step]);

	const bg = step.interpolate({
		inputRange: [0, 1],
		outputRange: ['rgb(200,220,240)', 'rgb(40,80,120)'],
	});

	return (
		<Animated.View style={{ padding: 16, backgroundColor: bg }}>
			<Text>abcde</Text>
		</Animated.View>
	);
}

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

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

метод diffClamp,
который ограничивает приращение перед interpolate
метод event,
который кормит Value из прокрутки
метод timing,
который двигает входной диапазон
компонент Animated.View,
который принимает результат interpolate в style