Реагируйте на анимацию, используя объекты / наборы данных - PullRequest
Новая
       8

Реагируйте на анимацию, используя объекты / наборы данных

0 голосов
/ 07 сентября 2018

Здравствуйте, я новичок в реагировании на анимацию, я хотел бы добиться простого преобразования. Это код, который я имею 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();
  }

Однако он не мог прочитать значение состояния, поэтому я думаю, что это неправильно. Может кто-нибудь помочь?

...