反应本地“交换单元”动画

Question

我正在尝试制作“宝石迷阵”类型的游戏，并且当我交换两个像元/形状/图块（无论您喜欢用哪种方法）时，我目前正在制作动画。我已经建立了一个非常基本的屏幕来进行测试，但是由于对动画的了解很少，因此我很难弄清楚该如何开始。

当前，屏幕上有彼此相邻的2个单元格，内部有不同的数字。当您从一个单元格向另一个单元格滑动时，它们的编号会互换。我希望交换动画效果好（数字在到达新位置的过程中应该相互移动）。

代码如下：

import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import GestureRecognizer, {
  swipeDirections
} from "react-native-swipe-gestures";


class Sandbox extends Component {
  state = {
    cellValues: [1, 2]
  };

  onSwipeRight = cellIndex => {
    this.swapValues(cellIndex, cellIndex + 1);
  };

  onSwipeLeft = cellIndex => {
    this.swapValues(cellIndex, cellIndex - 1);
  };

  swapValues = (cell1, cell2) => {
    const newValues = [...this.state.cellValues];
    const temp = newValues[cell1];
    newValues[cell1] = newValues[cell2];
    newValues[cell2] = temp;
    this.setState({ cellValues: newValues });
  };

  render() {
    const { cellValues } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.cellsContainer}>
          <GestureRecognizer
            style={styles.cell}
            onSwipeRight={() => this.onSwipeRight(0)}
          >
            <Text style={styles.cellText}>{cellValues[0]}</Text>
          </GestureRecognizer>
          <GestureRecognizer
            style={styles.cell}
            onSwipeLeft={() => this.onSwipeLeft(1)}
          >
            <Text style={styles.cellText}>{cellValues[1]}</Text>
          </GestureRecognizer>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  cellsContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  cell: {
    flex: 1,
    borderRadius: 2,
    borderWidth: 1,
    borderColor: "black",
    padding: 2,
    margin: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  cellText: {
    fontSize: 30
  }
});

export default Sandbox;

谢谢。