Метод timing
Метод timing класса
Animated
ведет
Value
от текущего числа к toValue за duration миллисекунд.
Скорость задает easing из класса
Easing.
Метод возвращает объект анимации; его запускают через
start.
Синтаксис
const anim = Animated.timing(value, {
toValue: 1,
duration: 300,
easing: Easing.inOut(Easing.ease),
useNativeDriver: true,
});
Параметры
| Параметр | Описание |
|---|---|
value |
Экземпляр
Value,
которое нужно изменить.
|
toValue |
Число, к которому приходит анимация. |
duration |
Длительность в миллисекундах. |
easing |
Функция кривой из
Easing.
|
useNativeDriver |
При значении true анимация идет на стороне нативного слоя.
|
Пример
Давайте увеличим ширину полоски за полсекунды:
import { useEffect, useRef } from 'react';
import { Animated, View } from 'react-native';
export default function App() {
const width = useRef(new Animated.Value(40)).current;
useEffect(() => {
Animated.timing(width, {
toValue: 200,
duration: 500,
useNativeDriver: false,
}).start();
}, [width]);
return (
<Animated.View style={{ width, height: 8, backgroundColor: '#336699' }} />
);
}
На экране узкая полоска плавно растягивается по ширине.
