如何停止 react-spring 循环动画

Question

我有一个简单的脉冲计时器。当时间达到“0”时，我想停止脉冲动画。我对 react-spring 有点陌生，如果有人知道如何做到这一点，请帮忙。

const Timer = ({time = 0}) => {
    const [timer, setTimer] = useState(time);

    const props = useSpring({
        config: {duration: 1000},
        from: { scale: 1 },
        to: {scale: 1.1},
        loop: timer > 0,
    });

    useEffect(() => {
        if (!timer) return;

        const intervalId = setInterval(() => {
            setTimer(timer - 1);
        }, 1000);

        return () => clearInterval(intervalId);
    }, [timer])

    return (<animated.div style={props} className={'timer-main'}>
        { timer }
    </animated.div>)
}

Answer 1

我用一个“不太理想”的解决方案修复了它，仍然对更好的方案持开放态度。

return (<animated.div style={timer > 0 ? props : {}} className={'timer-main'}>
        { timer }
    </animated.div>)

Answer 2

const Timer = ({time = 0}) => {
const [timer, setTimer] = useState(time);
const [isCancel, setIsCancel] = useState(false);

const props = useSpring({
    config: {duration: 1000},
    from: { scale: 1 },
    to: {scale: 1.1},
    loop: timer > 0,
    cancel: isCancel
});

useEffect(() => {
    if (!timer) return;

    const intervalId = setInterval(() => {
        const newTime = timer - 1;

        setTimer(newTime);
        
        if(newTime === 0){
          setIsCancel(true)
        }
    }, 1000);

    return () => clearInterval(intervalId);
}, [timer])

return (<animated.div style={props} className={'timer-main'}>
    { timer }
</animated.div>)
}

cancel属性在spring中用boolean停止动画

如何停止 react-spring 循环动画

How to stop react-spring looping animation

javascript

reactjs

react-spring