Метод spring

Метод spring класса Animated меняет Value с эффектом упругости. Жесткость задают tension, затухание - friction. Метод возвращает объект анимации для start.

Синтаксис

const anim = Animated.spring(value, {
	toValue: 0,
	friction: 7,
	tension: 40,
	useNativeDriver: true,
});

Параметры

Параметр	Описание
`value`	Экземпляр `Value`.
`toValue`	Целевое число анимации.
`friction`	Сопротивление: большее значение быстрее гасит колебание.
`tension`	Жесткость пружины: выше значение - резче рывок к цели.
`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 snapBack = () => {
		Animated.spring(shift, {
			toValue: 0,
			friction: 5,
			tension: 80,
			useNativeDriver: true,
		}).start();
	};

	return (
		<View>
			<Pressable onPress={() => shift.setValue(120)}>
				<Text>12345</Text>
			</Pressable>
			<Pressable onPress={snapBack}>
				<Text>abcde</Text>
			</Pressable>
			<Animated.View style={{ transform: [{ translateX: shift }] }}>
				<View style={{ width: 60, height: 60, backgroundColor: '#cc6633' }} />
			</Animated.View>
		</View>
	);
}

На экране квадрат после второго нажатия подпрыгивает к исходной позиции.

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

метод timing,
который меняет значение по времени
метод decay,
который замедляет значение по инерции
метод setValue,
который ставит число без анимации
компонент Animated.View,
который рисует блок с анимируемым стилем