Básicamente, quiero reproducir la animación de la lotería cada vez que se toca. Aquí está mi código de interfaz de usuario para la animación de lottie:
<Pressable onPress={playGame}> <LottieView ref={loseAnimationRef} style={styles.egg} source={Lost} autoPlay={false} loop={false} onAnimationFinish={() => { resetAnimation(); }} /> </Pressable>Aquí está mi código de estado para la animación de lottie:
const loseAnimationRef = useRef(null); const playGame = async () => { await mainGameLogicUC(); playAnimation() }; const playAnimation = () => { loseAnimationRef.current.play() } const resetAnimation = () => { loseAnimationRef.current.reset() } En el primer toque, la animación se reproduce perfectamente bien. Pero en todos los demás toques, la animación no se reproducirá. Intenté pausar la animación en onAnimationFinish y luego reanudarla, pero tampoco funcionó. ¿Me estoy perdiendo de algo?
Me deshice de resetAnimation() en onAnimationFinish y eso resolvió el problema inicial. Pero la cuestión es que quiero que la animación se restablezca al principio cada vez. ¿Por qué se rompe cuando reinicio la animación?
Después de volver a este problema unos días después, encontré la solución.
Reproducir la animación de la lotería parece considerarse un efecto secundario, por lo tanto, la edición de las referencias a las animaciones debe realizarse en un gancho useEffect
La solución que funcionó para mí:
(nuevamente, en este código, quiero que la animación se restablezca al principio antes de que el usuario vuelva a tocar la pantalla).
código del estado
const isMounted = useRef(false); const [isWonAnimationShowing, setIsWonAnimationShowing] = useState(false); const [isAnimationPlaying, setIsAnimationPlaying] = useState(false); const loseAnimationRef = useRef(null); const winAnimationRef = useRef(null); useEffect(() => { if (isMounted.current) { if (isAnimationPlaying) { _playAnimation(); } else { _resetAnimation(); } } else { isMounted.current = true; } }, [isAnimationPlaying]); const playAnimation = () => { setIsAnimationPlaying(true); }; const _playAnimation = () => { if (isWonAnimationShowing) { winAnimationRef.current.play(); } else { loseAnimationRef.current.play(); } }; const resetAnimation = () => { setIsAnimationPlaying(false); }; const _resetAnimation = () => { if (isWonAnimationShowing) { winAnimationRef.current.reset(); } else { loseAnimationRef.current.reset(); } };código de interfaz de usuario
<View style={styles.body}> <Pressable disabled={isAnimationPlaying} onPress={playGame}> {isWonAnimationShowing ? ( <LottieView ref={winAnimationRef} style={styles.egg} source={Won} autoPlay={false} loop={false} onAnimationFinish={() => { resetAnimation(); }} /> ) : ( <LottieView ref={loseAnimationRef} style={styles.egg} source={Lost} autoPlay={false} loop={false} onAnimationFinish={() => { resetAnimation(); }} /> )} </Pressable> </View>¿Has intentado algo como ésto?
const animationRef = useRef<AnimatedLottieView>() const isAnimating = useRef<boolean>(false) const onAnimationPress = () => { if (!isAnimating.current) { isAnimating.current = true animationRef.current.play() } } <TouchableWithoutFeedback onPress={onAnimationPress}> <AnimatedLottieView source={source} ref={animationRef} autoPlay={false} loop={false} onAnimationFinish={() => { isAnimating.current = false animationRef.current.reset() }} /> </TouchableWithoutFeedback>