反应本机简单动画

Question

嗨，我只想制作简单的入门游戏。剪刀石头布。这段代码是我要做的。

我只想在每次按下按钮时对图像和文本进行动画处理。

图像动画一次，当按下按钮停止动画时。

每按一次按钮如何显示带有动画的图像

我正在使用npm的react-native-animatable库。也可以建议我另一个

import React from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { TextAnimationSlideUp, TextAnimationDeZoom } from 'react-native-text-effects';
import * as Animatable from 'react-native-animatable';
import { Colors } from './constants';

var arr = [{ image: require('./assets/rock.png') }, { image: require('./assets/paper.png') }, { image: require('./assets/scissors.png') }];
var arr2 = [{ image: require('./assets/rock2.png') }, { image: require('./assets/paper2.png') }, { image: require('./assets/scissors2.png') }];
var win_case = [['rock', 'scissor'], ['scissor', 'paper'], ['paper', 'rock']];

var SELECTIONS = [
  {
    name: 'rock',
    beats: 'scissors',
    rank: 0
  },
  {
    name: 'paper',
    beats: 'rock',
    rank: 1
  },
  {
    name: 'scissors',
    beats: 'paper',
    rank: 2
  }
]
function isWinner(selection, opponentSelection) {
  return selection.beats === opponentSelection.name
}
function randomSelection() {
  const randomIndex = Math.floor(Math.random() * SELECTIONS.length)
  return SELECTIONS[randomIndex]
}

export default class App extends React.Component {
  state = {
    selected_uri: './assets/rock.png',
    uri: require('./assets/rock.png'),
    player1choose: 0,
    player2choose: 0,
    player1message: "-",
    player2message: "-",
 };
  render() {
    return (
      <View>
        <View >

          <TouchableOpacity
            onPress={() => {
              const player1choice = randomSelection();
              const player2choice = randomSelection();

              const player1win = isWinner(player1choice, player2choice);
              const player2win = isWinner(player2choice, player1choice);

              if (player1win) { this.setState({ player1message: "Win", player2message: "Lose" });}
              else if (player2win) {this.setState({ player1message: "Lose", player2message: "Win" });}
              else {this.setState({ player1message: "Draw", player2message: "Draw" });}
              this.setState({ player1choose: player1choice.rank, player2choose: player2choice.rank })
            }}>
            <View >
              <Image source={require('./assets/playicon.png')} />
            </View>
            <View >
              <Text>{this.state.player1message} </Text>
            </View>
          </TouchableOpacity>
        </View>

        <TextAnimationSlideUp value={this.state.player2message} delay={100} duration={1000} style={{ transform: [{ rotateX: "180deg" }, { rotateY: '180deg' }], color: 'purple', fontSize: 40 }} />
        <TextAnimationSlideUp value={this.state.player1message} delay={100} duration={1000} style={{ color: 'yellow', fontSize: 40 }} />
        <Animatable.Text animation="zoomInUp">
          <Text>{this.state.player1message} </Text>
        </Animatable.Text>
        <View >
          <Animatable.Image source={arr[this.state.player1choose].image} animation="zoomInUp">
          </Animatable.Image>
        </View>
      </View>
    );  }}

有人可以帮我吗