改变动画中的反应本机动画值

Question

我构建了类似于流行游戏 Flappy Bird 的东西 - 一个物体掉落，用户单击一个按钮导致该物体跳跃，目的是确保它不会撞到屏幕底部。

我最初是通过对状态进行多次更新来构建此效果的，即通过将对象的位置移动几个像素并重新渲染来实现下落对象和“跳跃”效果。例如这样：

//falling effect
gameTimerId = setInterval(()=>{
          setObjectHeight(objectHeight => objectHeight - 5)
       }, 30)

    return ()=>{
      clearInterval(gameTimerId)
      }

//jump effect (struggling to replicate this below)
const jump = () => {
    if(!isGameOver && (objectHeight < screenHeight)){
      setObjectHeight(objectHeight => objectHeight +50)
      console.log("jumped!")
    }
  }

这显然是一种非常低效的做事方式，所以我一直在尝试使用 React Animated API 来重新设计它，它将使用 UI 线程来制作动画。

我可以实现坠落效果，但在坠落效果处于活动状态时很难使对象跳跃。当用户单击“跳跃”时，对象应该再次开始下落，但高度略高于当前位置。我已阅读文档并尝试了多种选项，但似乎都不起作用。这是我到目前为止所得到的：

export default App = () => {
  
  // animated value for height of square on screen
  const squareHeight = useRef(new Animated.Value(Dimensions.get('screen').height / 2)).current;

  //gravity animation
  const gravity =  Animated.timing(squareHeight, {
      toValue: 0,
      duration: 2000,
      useNativeDriver: true,
    })

  //start falling effect on component loading
  useEffect(() => {
   gravity.start()
  }, []); 

 
//PROBLEM - this should restart falling effect from square's current location + 10px
  const jump = () => {
    //squareHeight.setValue(squareHeight + 10) 
    gravity.start()
  }

  return (
    <>
    <Animated.View
      style={[
        {
          position: 'absolute',
          backgroundColor: 'blue',
          width: 50,
          height: 60,
          bottom: squareHeight,
        },
      ]}/>

  <Button title="Jump!" onPress={jump}> </Button>
  </>
  );
};

我是反应原生动画的新手，非常感谢您提供有关如何实现这一目标的帮助！谢谢。

Answer 1

将您的跳跃函数更改为：

const jump = () => {
  //squareHeight.setValue(squareHeight + 10)
  squareHeight._startingValue = squareHeight._value+10; // new starting value
  gravity.reset();
  gravity.start();
}

说明：

1. 首先更改动画的起始值。
2. 然后重置动画以便可以再次开始。
3. 然后开始动画。

Answer 2

好吧，您还可以每次开始动画时都会改变持续时间来保持速度。更改的持续时间可以写成原始绘制/原始Squareheight Times NewsQuareheight。