Creé algo similar al popular juego Flappy Bird: un objeto cae y el usuario hace clic en un botón que hace que ese objeto salte con el objetivo de asegurarse de que no golpee la parte inferior de la pantalla.

Originalmente construí esto a través de muchas actualizaciones al estado, es decir, el objeto que cae y el efecto de 'salto' se lograron moviendo la posición del objeto unos pocos píxeles y volviendo a renderizar. Así por ejemplo:

 //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!") } }

Obviamente, esta es una forma muy ineficiente de hacer las cosas, por lo que he estado tratando de volver a trabajar esto usando la API de reacción animada, que animaría usando el subproceso de la interfaz de usuario.

Puedo lograr el efecto de caída, pero me cuesta hacer que el objeto salte mientras el efecto de caída está activo. Cuando el usuario hace clic en 'saltar', el objeto debería comenzar a caer de nuevo, pero desde una altura ligeramente superior a la que se encuentra actualmente. He leído los documentos y probado numerosas opciones, ninguna de las cuales parece funcionar. Esto es lo que tengo hasta ahora:

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

¡Soy nuevo en reaccionar con animación nativa, estoy muy agradecido por la ayuda sobre cómo lograr esto! Gracias.