Soy nuevo en React Native animado y estoy tratando de incorporarlo a mi aplicación. Actualmente tengo un objeto que parece caer desde el medio hasta la parte inferior de la pantalla, usando actualizaciones de estado frecuentes como esta:
const [objHeight, setObjHeight] = useState((Dimensions.get("screen").height)/2) useEffect(()=>{ if(objHeight > 0){ timerId = setInterval(()=>{ setObjHeight(objHeight => objHeight - 3) }, 30) //30ms return ()=>{ clearInterval(timerId) } },[objHeight]) //then the object looks like: <View style = {[{ position: "absolute", backgroundColor: 'blue', width: 50, height: 60, bottom: objHeight, }]}> </View>Entiendo que esta es una forma ineficiente de hacer animaciones en reacción, y que al usar reaccionar animadas podemos animar esto en el subproceso de la interfaz de usuario. He intentado replicar lo anterior usando reaccionar nativo animado.
const objHeight = new Animated.Value(screenHeight/2) Animated.loop( Animated.timing(objHeight, { toValue: objHeight>0 ? objHeight - gravity : null, duration: 3000, useNativeDriver: true }), {iterations: 1000} ).start() <Animated.View style = {[{ backgroundColor: 'blue', width: 50, height: 60, bottom: 200, transform:[{translateY: objHeight}] }]}> </Animated.View>Sin embargo, el objeto no se mueve/anima. Simplemente se mantiene a la misma altura. ¿Qué estoy haciendo mal? Encuentro que la documentación sobre reaccionar nativo animado no es particularmente útil.
Gracias
Primero crea un Animated.Value con algún valor inicial:
const bottomAnim = useRef(new Animated.Value(Dimensions.get('screen').height / 2)).current;Luego, en el montaje del componente, inicie la animación:
useEffect(() => { Animated.timing(bottomAnim, { toValue: 0, duration: 3000, useNativeDriver: true, }).start(); }, []);Finalmente, vincule el valor animado al componente:
return ( <Animated.View style={[ { position: 'absolute', backgroundColor: 'blue', width: 50, height: 60, bottom: bottomAnim, }, ]}/> );