Метод bezier
Метод bezier класса
Easing
принимает x1, y1, x2 и y2
кубической кривой Безье в диапазоне от нуля до единицы.
Так повторяют кривые из CSS для
timing.
Синтаксис
easing: Easing.bezier(0.42, 0, 1, 1)
Параметры
| Параметр | Описание |
|---|---|
x1 |
Координата X первой контрольной точки. |
y1 |
Координата Y первой контрольной точки. |
x2 |
Координата X второй контрольной точки. |
y2 |
Координата Y второй контрольной точки. |
Пример
Давайте растянем полоску с кривой ease-out:
import { useEffect, useRef } from 'react';
import { Animated, Easing, View } from 'react-native';
export default function App() {
const width = useRef(new Animated.Value(24)).current;
useEffect(() => {
Animated.timing(width, {
toValue: 220,
duration: 650,
easing: Easing.bezier(0, 0, 0.58, 1),
useNativeDriver: false,
}).start();
}, [width]);
return (
<Animated.View style={{ width, height: 10, backgroundColor: '#336655' }} />
);
}
На экране полоска быстро стартует и мягко останавливается у финальной ширины.
