Javascript React Native：如何为一个组件设置动画？

我有一张卡片列表，我想一张接一张地制作动画。也就是说，只有在上一张卡和动画完成后，下一张卡组件才会渲染和设置动画。我怎样才能做到这一点？我试过Animated.sequence，但那是一个动画序列，而不是一个组件序列

下面的代码是我拥有的卡组件代码。它从父组件接收已分解的参数

import { StyleSheet, Text, Animated, Easing } from 'react-native';

export default function Card({ card, yValue, fadeValue, rotation, bottom }) {

  useEffect(() => {
    yValue.setValue(-200)
    fadeValue.setValue(0)
    // Animated.sequence([
      Animated.timing(
      fadeValue, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true
      }).start()

    Animated.timing(
      yValue, {
        toValue: 50,
        duration: 500,
        useNativeDriver: true,
        asing: Easing.linear,
      }).start()
  })

  return (
      <Animated.View style={[styles.card, {
        transform: [
        { rotate: rotation },
        { translateY: yValue }
        ]},
        { opacity: fadeValue },
        { bottom : bottom }
      ]}>
        <Text style={styles.value}>{card.value}</Text>
        <Text style={(card.suit === '♠' || card.suit === '♣') ? styles.miniBlackSuit : styles.miniRedSuit}>{card.suit}</Text>
        <Text style={(card.suit === '♠' || card.suit === '♣') ? styles.blackSuit : styles.redSuit}>{card.suit}</Text>
      </Animated.View>
  )
}

const styles = StyleSheet.create({
  card: {
    textAlign: 'left',
    marginRight: 8,
    marginTop: 10,
    marginLeft: 8,
    width: 70,
    height: 110,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomRightRadius: 10,
    borderBottomLeftRadius: 10,
    backgroundColor: '#fff',
    shadowOffset: {
      width: 3,
      height: 3
    },
    shadowRadius: 7,
    shadowColor: 'rgba(0,0,0,0.3)',
    shadowOpacity: 1
  },
  blackSuit: {
    fontSize: 60,
    color: 'black',
    position: 'absolute',
    bottom: 0,
    right: 8
  },
  redSuit: {
    fontSize: 60,
    color: 'red',
    position: 'absolute',
    bottom: 0,
    right: 8
  },
  miniBlackSuit: {
    marginLeft: 6,
    fontSize: 18,
    color: 'black',
  },
  miniRedSuit: {
    marginLeft: 6,
    fontSize: 18,
    color: 'red',
  },
  value: {
    marginTop: 10,
    marginLeft: 8,
    fontFamily: 'Rockwell',
    paddingTop: 1,
    paddingLeft: 1,
    paddingBottom: 0,
    fontSize: 15,
  }
})

import{StyleSheet，Text，Animated，Easing}来自'react native'；
导出默认功能卡（{Card，yValue，fadeValue，rotation，bottom}）{
useffect（（）=>{
yValue.setValue（-200）
fadeValue.setValue（0）
//动画序列([
时间(
时尚价值{
toValue:1，
持续时间：500，
useNativeDriver：真的吗
}).start（）
时间(
yValue{
toValue:50，
持续时间：500，
useNativeDriver：没错，
阿辛：放松，线性，
}).start（）
})
返回(
{card.value}
{card.suit}
{card.suit}
)
}
const styles=StyleSheet.create({
卡片：{
textAlign:'左'，
marginRight:8，
玛金托普：10，
边缘左：8，
宽度：70，
身高：110，
borderTopLeftRadius:10，
BorderTopRight半径：10，
边界右下角半径：10，
边界半径：10，
背景颜色：“#fff”，
阴影偏移：{
宽度：3，
身高：3
},
阴影半径：7，
阴影颜色：“rgba（0,0,0,0.3）”，
阴影不透明度：1
},
黑西装：{
尺寸：60，
颜色：'黑色'，
位置：'绝对'，
底部：0，
右：8
},
红衣：{
尺寸：60，
颜色：“红色”，
位置：'绝对'，
底部：0，
右：8
},
迷你黑色套装：{
边缘左：6，
尺码：18，
颜色：'黑色'，
},
迷你红衣：{
边缘左：6，
尺码：18，
颜色：“红色”，
},
价值：{
玛金托普：10，
边缘左：8，
fontFamily:“Rockwell”，
paddingTop:1，
paddingLeft:1，
填充底部：0，
尺寸：15，
}
})