React Native, несколько анимаций OnPress

Question

Заранее спасибо за помощь.

Попытка получить актив изображения (в данном случае «yes.png») вызывает две анимации при касании («onPress).

Изображение сам должен прыгнуть (animated.spring), а затем должен появиться ранее скрытый текст.

Что бы я ни пытался, я могу заставить его выполнять только одно или другое, но не оба.

Пробовал оборачивать обе анимации в параллельном, ака

_springAnimation = () =>
    Animated.parallel([
      Animated.spring(this.state.springValue, {
        toValue: 1.33,
        friction: 0.47,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.fadeValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }).start(),
    ]);

и добавьте <TouchableOpacity onPress={this._start}> после первого.

Вот текущий код, который у меня есть:

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      springValue: new Animated.Value(0.47),
      useNativeDriver: true,
      fadeValue: new Animated.Value(0),
    };
  }
  _springAnimation = () => {
    Animated.spring(this.state.springValue, {
      toValue: 1.33,
      friction: 0.47,
      useNativeDriver: true,
    }).start();
  };
  _start = () => {
    Animated.timing(this.state.fadeValue, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._springAnimation}>
          <Animated.Image
            source={require('animation/assets/yes.png')}
            style={[
              styles.imageView,
              {
                transform: [{scale: this.state.springValue}],
              },
            ]}
          />
          <Animated.View
            style={{
              opacity: this.state.fadeValue,
              height: 60,
              width: 200,
              backgroundColor: 'black',
              justifyContent: 'center',
            }}>
            <Text style={styles.buttonText}>Win</Text>
          </Animated.View>
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 1

Если вы хотите запускать анимацию один за другим. Вы можете сделать это с помощью Animated.sequence.

Animated.sequence([
    Animated.spring(this.state.springValue, {
        toValue: 1.33,
        friction: 0.47,
        useNativeDriver: true,
    }),
    Animated.timing(this.state.fadeValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
    })
]).start(); // start the sequence group

Они начнут соответственно останавливаться.

И если вы хотите запустить его параллельно, попробуйте следующий код.

Animated.parallel([
    Animated.spring(this.state.springValue, {
        toValue: 1.33,
        friction: 0.47,
        useNativeDriver: true,
    }),
    Animated.timing(this.state.fadeValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
    })
]).start(); // start the sequence group