Метод bounce

Метод bounce класса Easing вызывают без аргументов. Кривую передают в easing у timing, когда нужен эффект удара о границу.

Синтаксис

easing: Easing.bounce

Пример

Давайте уроним блок сверху с отскоком:

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

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

	useEffect(() => {
		Animated.timing(shift, {
			toValue: 0,
			duration: 900,
			easing: Easing.bounce,
			useNativeDriver: true,
		}).start();
	}, [shift]);

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

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

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

метод elastic,
который дает пружинящий хвост
метод spring,
который тоже дает отскок через физику
метод out,
который можно комбинировать с другими кривыми
метод timing,
который принимает bounce