在动画中更改反应本机动画值

Question

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

我最初是通过多次更新状态来构建它的，即坠落的物体和 'jump' 效果是通过将物体的位置移动几个像素并重新渲染来实现的。例如：

//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 线程进行动画处理。

我可以实现坠落效果，但在坠落效果激活时很难让物体跳跃。当用户单击 'jump' 时，对象应该再次开始下落，但会从略高于当前位置的高度开始下落。我已阅读文档并尝试了多种选择，其中 none 似乎有效。这是我目前所拥有的：

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>
  </>
  );
};

我是 React 原生动画的新手，非常感谢有关如何实现这一点的帮助！谢谢

Answer 1

将您的跳转功能更改为：

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

解释：

首先更改动画的起始值。
然后重置动画以便再次启动。
然后开始动画。

在动画中更改反应本机动画值

Changing react native animated value mid-animation

javascript

react-native

react-animated

react-native-reanimated