Tengo un componente en el que tiene lugar la animación. cuando se presiona el botón, el valor cambia a Paused y luego la animación se detiene o comienza. Pero por alguna razón, después de la detención, cuando hago clic en el botón y el valor de la variable cambia de estado, se inician otros scripts y funcionan según sea necesario, y la animación continúa en pausa.
const anim = useMemo(() => { return Animated.loop( Animated.sequence([ Animated.timing(figureScale, { toValue: 2, duration: animSpeed, useNativeDriver: true}), Animated.timing(figureScale, { toValue: 1, duration: animSpeed, useNativeDriver: true}) ]) ) }, [figureScale]) useEffect(()=>{ let _localAnim = anim if(isPaused) { _localAnim.stop() } else { _localAnim.start() } }, [isPaused])ACTUALIZADO
Las animaciones detenidas no se pueden reiniciar, por lo que no debe memorizarlas sino recrearlas en cada renderización (llamada de función)
Siguiendo tu enfoque:
const [isPaused, setPause] = useState(true) const figureScale = useRef(new Animated.Value(1)).current useEffect(()=> isPaused ? anim.stop() : anim.start() , [isPaused, anim]) const anim = Animated.loop( Animated.sequence([ Animated.timing(figureScale, { toValue: 2, duration: 500, useNativeDriver: true}), Animated.timing(figureScale, { toValue: 1, duration: 500, useNativeDriver: true}) ]) )Todavía hay un problema porque aunque mantenemos el Animated.Value en la referencia, la secuencia se reinicia usando el primer Animated.timing (expandiendo) también cuando nos detenemos durante el segundo (disminuyendo).
Traté de resolver con interpolación sin éxito, pero una solución que encontré es agregar un oyente a Animated.Value y guardar el estado de expansión/decrecimiento en una variable (estado o cierre).
( https://reactnative.dev/docs/animatedvalue#addlistener )
Usando el estado (representación extra):
const [isGrowing, setGrowing] = useState(true) figureScale.addListener(({value})=>{ if(isGrowing && value==2) {setGrowing(false)} if(!isGrowing && value==1) {setGrowing(true)} })Usando un cierre:
const isGrowing = React.useMemo(() => { // static variable let _isGrowing = true // returned function return function(growing){ if(growing===1) _isGrowing = true if(growing===-1) _isGrowing = false return _isGrowing } }, [] ) figureScale.addListener(({value})=>{ if(isGrowing() && value==2) {isGrowing(-1)} if(!isGrowing() && value==1) {isGrowing(1)} })Finalmente podemos elegir el orden de las animaciones dentro de la secuencia siguiendo la parada de expansión/decrecimiento:
Usando el estado:
const anim = Animated.loop( Animated.sequence([ Animated.timing(figureScale, { toValue: isGrowing ?2:1, duration: 500, useNativeDriver: true}), Animated.timing(figureScale, { toValue: isGrowing ?1:2, duration: 500, useNativeDriver: true}) ]))
Usando un cierre:
const anim = Animated.loop( Animated.sequence([ Animated.timing(figureScale, { toValue: isGrowing() ?2:1, duration: 500, useNativeDriver: true}), Animated.timing(figureScale, { toValue: isGrowing() ?1:2, duration: 500, useNativeDriver: true}) ]) )Ejemplo de trabajo aquí: https://snack.expo.dev/@laxandrea/start-stop-animations