如何停止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>)