Метод parallel
Метод parallel класса
Animated
принимает массив объектов анимации и стартует их вместе.
Общий объект завершается, когда закончится последняя из них.
Синтаксис
const anim = Animated.parallel([
Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }),
Animated.timing(shift, { toValue: 40, duration: 300, 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;
const shift = useRef(new Animated.Value(-30)).current;
useEffect(() => {
Animated.parallel([
Animated.timing(opacity, {
toValue: 1,
duration: 400,
useNativeDriver: true,
}),
Animated.timing(shift, {
toValue: 0,
duration: 400,
useNativeDriver: true,
}),
]).start();
}, [opacity, shift]);
return (
<Animated.View style={{ opacity, transform: [{ translateY: shift }] }}>
<Text>12345</Text>
</Animated.View>
);
}
На экране текст одновременно проявляется и съезжает на место сверху.
