Класс Easing

Класс Easing отдает функции кривой для параметра easing в timing. linear и ease вызывают без аргументов. in, out и inOut оборачивают другую кривую.

Синтаксис

import { Easing } from 'react-native';

Easing.inOut(Easing.ease);

Методы

Метод	Описание
`linear`	Равномерная скорость от начала до конца.
`ease`	Мягкий старт и финиш, по умолчанию у многих анимаций.
`in`	Замедление в начале переданной кривой.
`out`	Замедление в конце переданной кривой.
`inOut`	Замедление и в начале, и в конце.
`bounce`	Отскок у целевого значения.
`elastic`	Пружинящий выход с амплитудой.
`bezier`	Кубическая кривая Безье по четырем числам.

Пример

Давайте сравним linear и ease на одном сдвиге:

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

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

	const runLinear = () => {
		shift.setValue(0);
		Animated.timing(shift, {
			toValue: 100,
			duration: 600,
			easing: Easing.linear,
			useNativeDriver: true,
		}).start();
	};

	const runEase = () => {
		shift.setValue(0);
		Animated.timing(shift, {
			toValue: 100,
			duration: 600,
			easing: Easing.out(Easing.ease),
			useNativeDriver: true,
		}).start();
	};

	return (
		<View>
			<Pressable onPress={runLinear}>
				<Text>abcde</Text>
			</Pressable>
			<Pressable onPress={runEase}>
				<Text>12345</Text>
			</Pressable>
			<Animated.View style={{ transform: [{ translateX: shift }] }}>
				<View style={{ width: 36, height: 36, backgroundColor: '#557799' }} />
			</Animated.View>
		</View>
	);
}

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

Пример

Давайте зададим свою кривую через bezier:

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

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

	useEffect(() => {
		Animated.timing(width, {
			toValue: 180,
			duration: 700,
			easing: Easing.bezier(0.25, 0.1, 0.25, 1),
			useNativeDriver: false,
		}).start();
	}, [width]);

	return (
		<Animated.View style={{ width, height: 6, backgroundColor: '#884422' }} />
	);
}

На экране полоска растет с кастомной плавностью.

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

метод timing,
куда передают easing
метод spring,
который не использует Easing
класс Animated,
который запускает анимацию
класс LayoutAnimation,
который анимирует раскладку без timing