Метод sequence
Метод sequence класса
Animated
принимает массив объектов анимации.
Каждый следующий шаг стартует после завершения предыдущего.
В массив кладут результат
timing,
delay
и других методов.
Синтаксис
const anim = Animated.sequence([
Animated.timing(value, { toValue: 1, duration: 200, useNativeDriver: true }),
Animated.timing(value, { toValue: 0, duration: 200, useNativeDriver: true }),
]);
Параметры
| Параметр | Описание |
|---|---|
массив |
Список объектов анимации, которые нужно выполнить по порядку. |
Пример
Давайте сначала увеличим прозрачность, затем уменьшим:
import { useEffect, useRef } from 'react';
import { Animated, View, Text } from 'react-native';
export default function App() {
const opacity = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.sequence([
Animated.timing(opacity, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}),
Animated.timing(opacity, {
toValue: 0.3,
duration: 300,
useNativeDriver: true,
}),
]).start();
}, [opacity]);
return (
<Animated.View style={{ opacity }}>
<Text>abcde</Text>
</Animated.View>
);
}
На экране текст сначала становится ярким, затем слегка приглушается.
