使用对象/数据集反应动画

Question

你好，我是动画的新手，我想实现一个简单的转换。这是我有atm的代码：

class CardStack extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cardAnimationX: new Animated.Value(0),
      cardAnimationY: new Animated.Value(0),
    };
  }

  moveCard() {
    Animated.parallel([
      Animated.timing(
        this.state.cardAnimationX,
        {
          toValue: -380,
          duration: 1000,
        },
      ),
      Animated.timing(
        this.state.cardAnimationY,
        {
          toValue: -80,
          duration: 1000,
        },
      ),
    ]).start();
  }

  render() {
    const { cardAnimationX, cardAnimationY } = this.state;
    return (
        <Animated.View style={[styles.cardStyle, {
          transform: [
            { translateX: cardAnimationX },
            { translateY: cardAnimationY },
          ],
        },
        ]}
        >
          <TouchableOpacity style={styles.OpacityStyle} onPress={this.moveCard.bind(this)} />
        </Animated.View>

它正在工作，但是我想在此类中添加更多动画效果，并且不想为每个值创建一个变量，这里有没有使用对象的方法？我尝试过：

class CardStack extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cardAnimation: new Animated.Value({ x: 0, y: 0 }),
    };
  }

  moveCard() {
    Animated.parallel([
      Animated.timing(
        this.state.cardAnimationX,
        {
          toValue: { x: -380, y: -80 },
          duration: 1000,
        },
      ),
      /* Animated.timing(
        something else ....,
        {
          toValue: -80,
          duration: 1000,
        },
      ), */
    ]).start();
  }

但是它无法读取状态值，所以我猜那是错误的。 有人可以帮忙吗？