19、React Native 拼图游戏：动画与手势实现

React Native 拼图游戏：动画与手势实现

1. 动画基础与起始屏幕构建

在构建拼图游戏时，我们使用了 React Native 中的两种主要动画 API： Animated 和 LayoutAnimation 。

• LayoutAnimation ：用于自动过渡 UI 状态，适用于同时动画多个组件和样式属性，或在不知道动画的确切像素值时（如基于 flex 的布局）。但只能动画布局属性，如宽度或 flex。
• Animated ：提供比 LayoutAnimation 更多的控制，但 API 更复杂。需要为每个动画指定确切的起始和结束值，并在适当的时间启动每个动画。用于独立动画多个组件或动画非布局属性（如颜色），还可以使用 useNativeDriver 提高非布局动画的性能。

起始屏幕的代码如下：

{transitionState !== State.Launching && (
  <Animated.View style={buttonStyle}>
    <Button title={'Start Game'} onPress={this.handlePressStart} />
  </Animated.View>
)}

操作步骤：
1. 保存 <