Метод decay

Метод decay класса Animated продолжает движение Value по инерции и постепенно останавливает его. Стартовую скорость задают velocity, силу торможения - deceleration. Метод возвращает объект анимации.

Синтаксис

const anim = Animated.decay(value, {
	velocity: 2,
	deceleration: 0.997,
	useNativeDriver: true,
});

Параметры

Параметр	Описание
`value`	Экземпляр `Value`.
`velocity`	Начальная скорость изменения значения.
`deceleration`	Коэффициент замедления: чем ближе к `1`, тем дольше скольжение.
`useNativeDriver`	При `true` анимация идет через нативный драйвер.

Пример

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

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

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

	const glide = () => {
		Animated.decay(shift, {
			velocity: 3,
			deceleration: 0.995,
			useNativeDriver: true,
		}).start();
	};

	return (
		<View>
			<Pressable onPress={glide}>
				<Text>abcde</Text>
			</Pressable>
			<Animated.View style={{ transform: [{ translateX: shift }] }}>
				<View style={{ width: 48, height: 48, backgroundColor: '#669933' }} />
			</Animated.View>
		</View>
	);
}

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

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

метод spring,
который возвращает значение к цели пружиной
класс ValueXY,
который хранит пару координат для жеста
метод stop,
который обрывает текущую анимацию
класс PanResponder,
который отслеживает жест пальцем